html { width: 100%; height: 100%; font-size: 62.5%; } body { width: 100%; height: 100%; font-size: 16px; font-size: 1.6rem; line-height: 175%; font-family: a-otf-ud-shin-go-pr6n,"游ゴシック体", "游ゴシック", YuGothic, メイリオ, Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "MS Pゴシック", "MS PGothic", Osaka, sans-serif; color: #000; background-color: #FFF; /*#dedad4*/ } .float-clear { clear: both; } a { color: $linkCL; text-decoration: none; } a:hover { color: $linkhoverCL; text-decoration: none; } hr { border-top-color: #CCCCCC; border-right-color: #CCCCCC; border-bottom-color: #CCCCCC; border-left-color: #CCCCCC; margin-top: 10px; margin-bottom: 10px; } /*スペース*/ .bt-sp10 { margin-bottom: 10px!important; } .bt-sp20 { margin-bottom: 20px!important; } .bt-sp30 { margin-bottom: 30px!important; } .bt-sp40 { margin-bottom: 40px!important; } .bt-sp80 { margin-bottom: 80px!important; } /*グリッドシステムのガター調整*/ .row-0{ margin-left:0px; margin-right:0px; > div { padding-right:0px; padding-left:0px; padding-bottom:0px; } } .row-10 { margin-left:-5px; margin-right:-5px; > div{ padding-right:5px; padding-left:5px; padding-bottom:10px; } } .row-20 { margin-left: -10px; margin-right: -10px; > div{ padding-right:10px; padding-left:10px; padding-bottom:20px; } } .row-30 { margin-left:-15px; margin-right:-15px; > div{ padding-right:15px; padding-left:15px; padding-bottom:30px; } } /*比率を保って拡大・縮小処理*/ .photo-area { overflow: hidden; position: relative; img { @include fullcenter(); width: 100%; height: auto; } } .ratio-1_1:before { content: ""; display: block; padding-top: 100%; /* 1:1 */ } .ratio-7_3:before { content: ""; display: block; padding-top: 30%; /* 7:3 */ } .ratio-8_2:before { content: ""; display: block; padding-top: 20%; /* 8:2 */ } .ratio-1_2:before { content: ""; display: block; padding-top: 200%; /* 1:2 */ } .ratio-4_3:before { content: ""; display: block; padding-top: 75%; /* 4:3 */ } .ratio-16_9:before { content: ""; display: block; padding-top: 56.25%; /* 16:9 */ } .ratio-8_5:before { content: ""; display: block; padding-top: 62.5%; /* 8:5 ≒ 黄金比 */ } .ratio-1_1, .ratio-7_3, .ratio-8_2, .ratio-1_2, .ratio-4_3, .ratio-16_9, .ratio-8_5 { position: relative; overflow: hidden; } /*.ratio-1_1 > img, .ratio-7_3 > img, .ratio-8_2 > img, .ratio-1_2 > img, .ratio-4_3 > img, .ratio-16_9 > img, .ratio-8_5 > img { position: absolute; top: 0; left: 0; }*/ /*---------------------------------------------*/ /*追加グリッド */ /*---------------------------------------------*/ .col-xs-15, .col-sm-15, .col-md-15, .col-lg-15 { position: relative; min-height: 1px; } .col-xs-15 { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } @media (min-width: 768px) { .col-sm-15 { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } } @media (min-width: 992px) { .col-md-15 { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } } @media (min-width: 1200px) { .col-lg-15 { -ms-flex: 0 0 20%; flex: 0 0 20%; max-width: 20%; } } /*---------------------------------------------*/ /*白テーブル */ /*---------------------------------------------*/ .table-wite { background-color: $baseCL; } .table-wite th { background-color: $footer_copyCL; } .table-wite th, .table-wite td { border-color: #000!important; } /*---------------------------------------------*/ /*通常リスト */ /*---------------------------------------------*/ .nomal-ul { > li { margin-bottom: 20px; } } /*---------------------------------------------*/ /*リストをテーブル化 */ /*---------------------------------------------*/ .list-table { display: block; padding: 0px; list-style: none; li { width: 100%; display: table; > div:first-child { display: table-cell; padding: 10px; } > div:last-child { display: table-cell; padding: 10px; } } .cell100 { width: 100px; } .cell200 { width: 200px; } } .history-table { > li { border-bottom: 1px solid #CCC; > div:first-child { text-align: right; width: 14rem; } } } @media only screen and (min-width: 992px) { } @media only screen and (max-width: 991px) { } /*---------------------------------------*/ /* youtube */ /*---------------------------------------*/ .youtube { position: relative; width: 100%; padding-top: 62.5%; } .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }