@charset "UTF-8"; /* =================================================================== CSS information file name : layout.css style info : 全ページ共通 枠組みレイアウト生成用 cssの定義 =================================================================== */ /*------------------------------------------------ contents width -------------------------------------------------*/ .inner { width: 94%; margin-right: auto; margin-left: auto; max-width: 1120px; } .inner_m { width: 94%; margin-right: auto; margin-left: auto; max-width: 1024px; } .inner_s { width: 94%; margin-right: auto; margin-left: auto; max-width: 1024px; } .inner_ss { width: 94%; margin-right: auto; margin-left: auto; max-width: 880px; } .col_bg .inner_ss { padding: 0; } #dcms_layoutPageBlockPasteArea, #dcms_layoutPageBlock { width: 100%; } #container { overflow: hidden; padding-top: 0; } #contents_left { width: calc(100% - 240px - 24px); } #contents_right { width: 240px; } #contents { width: 94%; margin-right: auto; margin-left: auto; max-width: 1200px; } #contents_left { float: left; width: calc(100% - 240px - 40px); } #contents_right { float: right; width: 240px; } /*------------------------------------------------ form -------------------------------------------------*/ body#template_form header.template_form { padding: 40px; border-bottom: 1px solid #e9e9e9; margin-bottom: 40px; } body#template_form header.template_form img { max-height: 40px; width: auto; height: auto; display: block; margin: auto; } body#template_form footer.template_form { text-align: center; padding: 40px; border-top: 3px solid #eeeeee; margin-top: 50px; } /*------------------------------------------------ template coraplate 3 -------------------------------------------------*/ #contents.template_c3 { width: 94%; margin-right: auto; margin-left: auto; max-width: 1200px; width: 1200px; padding: 0; } @media only screen and (max-width: 1219px) { #contents.template_c3 { width: 94vw; padding-right: 0; padding-left: 0; } } @media only screen and (max-width: 979px) { #contents.template_c3 #contents_right { margin-top: 30px; } } @media only screen and (max-width: 979px) { #contents_left { width: 100%; } #contents_right { width: 100%; margin-top: 40px; } /*#contents{width: 100%;margin-bottom: 40px;} #contents_left{ float: none; width: 100%; } #contents_right{ float: none; width: 100%; margin-top: 40px; }*/ } @media only screen and (max-width: 690px) { /*#contents{width: 100%;margin-bottom: 30px;} #contents_right{margin-top: 30px;}*/ } /*------------------------------------------------ float -------------------------------------------------*/ .flt { float: left; } .flr { float: right; } @media only screen and (max-width: 690px) { .flt { float: none; } .flr { float: none; } } /*------------------------------------------------ ブロック（2個並び half） -------------------------------------------------*/ /*.col2::after,.col2_m::after,.col2_ti::after,.col2_it::after {@include clearfix;} .col2 .flt, .col2 .flr{ width: 50%;} .col2_m .flt, .col2_m .flr{ width: 49%;} .col2_ti .flt{width: calc(18.5% * 3 + 1.875% * 2);} .col2_ti .flr{width: calc(18.5% * 2 + 1.875%);} .col2_it .flt{width: calc(18.5% * 2 + 1.875%);} .col2_it .flr{ width: calc(18.5% * 3 + 1.875% * 2);}*/ /* old -------------*/ .col2, .col2_sp2, .col2_m, .col2_m_sp2 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .col2_m .col, .col2_m_sp2 .col { width: calc(50% - 12px); margin-left: 24px; margin-bottom: 24px; } .col2_m .col:nth-child(2n + 1), .col2_m_sp2 .col:nth-child(2n + 1) { margin-left: 0; } .col2 .col, .col2_sp2 .col { width: calc(50% - 0.5px); margin-left: 1px; margin-bottom: 1px; } .col2 .col:nth-child(2n + 1), .col2_sp2 .col:nth-child(2n + 1) { margin-left: 0; } @media only screen and (max-width: 690px) { .col2_m_sp2 .col { width: calc(50% - 8px); margin-left: 16px; } .col2_m_sp2 .col:nth-child(2n + 1) { margin-left: 0; } .col2 .col, .col2_m .col { width: 100%; margin-left: auto; } } /* new -------------*/ .col2_m_222, .col2_m_221, .col2_m_212, .col2_m_211, .col2_222, .col2_221, .col2_212, .col2_211 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; /*真ん中寄せは案件による*/ } .col2_m_222 .col, .col2_m_221 .col, .col2_m_212 .col, .col2_m_211 .col { width: calc(50% - 12px); margin-left: 24px; margin-bottom: 32px; } .col2_m_222 .col:nth-child(2n + 1), .col2_m_221 .col:nth-child(2n + 1), .col2_m_212 .col:nth-child(2n + 1), .col2_m_211 .col:nth-child(2n + 1) { margin-left: 0; } .col2_222 .col, .col2_221 .col, .col2_212 .col, .col2_211 .col { width: calc(50% - 0.5px); margin-left: 1px; margin-bottom: 1px; } .col2_222 .col:nth-child(2n + 1), .col2_221 .col:nth-child(2n + 1), .col2_212 .col:nth-child(2n + 1), .col2_211 .col:nth-child(2n + 1) { margin-left: 0; } @media only screen and (max-width: 979px) { .col2_m_212 .col, .col2_m_211 .col, .col2_212 .col, .col2_211 .col { width: 100%; margin-left: 0; } } @media only screen and (max-width: 690px) { .col2_m_212 .col { width: calc(50% - 8px); margin-left: 16px; margin-bottom: 16px; } .col2_m_212 .col:nth-child(2n + 1) { margin-left: 0; } .col2_212 .col { width: calc(50% - 0.5px); margin-left: 1px; margin-bottom: 1px; } .col2_212 .col:nth-child(2n + 1) { margin-left: 0; } .col2_m_221 .col, .col2_221 .col { width: 100%; margin-left: 0; } } .col2_m_222 .col:last-child, .col2_m_221 .col:last-child, .col2_m_212 .col:last-child, .col2_m_211 .col:last-child, .col2_222 .col:last-child, .col2_221 .col:last-child, .col2_212 .col:last-child, .col2_211 .col:last-child { margin-right: 0; } /*------------------------------------------------ ブロック（2個並び　unique 大小） -------------------------------------------------*/ .col2_ti { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .col2_ti .col_l { width: 67%; } .col2_ti .col_r { width: calc(100% - 24px - 67%); margin-left: 24px; } @media only screen and (max-width: 690px) { .col2_ti { margin-left: 0; margin-top: -8px; } .col2_ti .col_l, .col2_ti .col_r { width: 100%; margin: 8px 0; } .col2_ti.sp_reverse .col_l { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .col2_ti.sp_reverse .col_r { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } } .col2_it { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .col2_it .col_l { width: calc(100% - 24px - 67%); margin-right: 24px; } .col2_it .col_r { width: 67%; } .col2_it .col2_it { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; margin-left: 0; margin-top: -8px; } .col2_it .col2_it .col_l, .col2_it .col2_it .col_r { width: 100%; margin: 8px 0; } .col2_it .col2_it.sp_reverse .col_l { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .col2_it .col2_it.sp_reverse .col_r { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .col2_it.img_l .col_l { width: calc(100% - 40px - 55%); margin-right: 40px; } .col2_it.img_l .col_r { width: 55%; } .col2_ti.img_l .col_l { width: 55%; } .col2_ti.img_l .col_r { width: calc(100% - 40px - 55%); margin-left: 40px; } .col2_it_istl { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .col2_it_istl .col_l { width: 30%; } .col2_it_istl .col_r { width: calc(100% - 5% - 30%); margin-left: 5%; } @media only screen and (max-width: 690px) { .col2_it { margin-left: 0; margin-top: -8px; } .col2_it .col_l, .col2_it .col_r { width: 100%; margin: 8px 0; } .col2_it.sp_reverse .col_l { -webkit-box-ordinal-group: 3; -ms-flex-order: 2; order: 2; } .col2_it.sp_reverse .col_r { -webkit-box-ordinal-group: 2; -ms-flex-order: 1; order: 1; } .col2_it_istl .col_l { width: 35%; } .col2_it_istl .col_r { width: calc(100% - 5% - 35%); } .col2_it.img_l .col_l { width: 100%; margin-right: auto; } .col2_it.img_l .col_r { width: 100%; } .col2_ti.img_l .col_r { width: 100%; margin-left: auto; } .col2_ti.img_l .col_l { width: 100%; } } /*------------------------------------------------ ブロック（3個並び） -------------------------------------------------*/ /* column 3 ************/ /*.col3::after,.col3_m::after {@include clearfix;} .col3 .flt, .col3 .flr{ width: 33.33333%;} .col3_m .flt, .col3_m .flr{ width: 32%;}.col3_m .flt{margin-right: 2%;}*/ /* old -------------*/ .col3, .col3_sp2, .col3_m, .col3_m_sp2, .col3_m_tab2sp1 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .col3_m .col, .col3_m_sp2 .col, .col3_m_tab2sp1 .col { width: calc(33.33333% - 16px); margin-left: 24px; margin-bottom: 24px; } .col3_m .col:nth-child(3n + 1), .col3_m_sp2 .col:nth-child(3n + 1), .col3_m_tab2sp1 .col:nth-child(3n + 1) { margin-left: 0; } .col3 .col, .col3_sp2 .col { width: calc(33.33333% - 1px); margin-left: 1.5px; margin-bottom: 1px; } .col3 .col:nth-child(3n + 1), .col3_sp2 .col:nth-child(3n + 1) { margin-left: 0; } @media only screen and (max-width: 979px) { .col3_m_sp2 .col, .col3_m_tab2sp1 .col { width: calc(50% - 12px); margin-left: 24px; } .col3_m_sp2 .col:nth-child(3n + 1), .col3_m_tab2sp1 .col:nth-child(3n + 1) { margin-left: 24px; } .col3_m_sp2 .col:nth-child(2n + 1), .col3_m_tab2sp1 .col:nth-child(2n + 1) { margin-left: 0; } .col3_sp2 .col { width: calc(50% - 1px); margin-left: 1px; } .col3_sp2 .col:nth-child(3n + 1) { margin-left: 1px; } .col3_sp2 .col:nth-child(2n + 1) { margin-left: 0; } } @media only screen and (max-width: 690px) { .col3_m .col, .col3 .col, .col3_m_tab2sp1 .col { width: 100%; margin-left: auto; } .col3_m_sp2 .col { width: calc(50% - 8px); margin-left: 16px; } .col3_m_sp2 .col:nth-child(3n + 1) { margin-left: 16px; } .col3_m_sp2 .col:nth-child(2n + 1) { margin-left: 0; } .col3_m_tab2sp1 .col:nth-child(3n + 1) { margin-left: 0; } } /* new -------------*/ .col3_m_333, .col3_m_332, .col3_m_331, .col3_m_323, .col3_m_322, .col3_m_321, .col3_m_313, .col3_m_312, .col3_m_311, .col3_333, .col3_332, .col3_331, .col3_323, .col3_322, .col3_321, .col3_313, .col3_312, .col3_311 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; /*真ん中寄せは案件による*/ } .col3_m_333 .col, .col3_m_332 .col, .col3_m_331 .col, .col3_m_323 .col, .col3_m_322 .col, .col3_m_321 .col, .col3_m_313 .col, .col3_m_312 .col, .col3_m_311 .col { width: calc(33.33333% - 16px); margin-right: 24px; margin-bottom: 24px; } .col3_m_333 .col:nth-child(3n), .col3_m_332 .col:nth-child(3n), .col3_m_331 .col:nth-child(3n), .col3_m_323 .col:nth-child(3n), .col3_m_322 .col:nth-child(3n), .col3_m_321 .col:nth-child(3n), .col3_m_313 .col:nth-child(3n), .col3_m_312 .col:nth-child(3n), .col3_m_311 .col:nth-child(3n) { margin-right: 0; } .col3_333 .col, .col3_332 .col, .col3_331 .col, .col3_323 .col, .col3_322 .col, .col3_321 .col, .col3_313 .col, .col3_312 .col, .col3_311 .col { width: calc(33.33333% - 1px); margin-right: 1.5px; margin-bottom: 1px; } .col3_333 .col:nth-child(3n), .col3_332 .col:nth-child(3n), .col3_331 .col:nth-child(3n), .col3_323 .col:nth-child(3n), .col3_322 .col:nth-child(3n), .col3_321 .col:nth-child(3n), .col3_313 .col:nth-child(3n), .col3_312 .col:nth-child(3n), .col3_311 .col:nth-child(3n) { margin-right: 0; } @media only screen and (max-width: 979px) { .col3_m_323 .col, .col3_m_322 .col, .col3_m_321 .col { width: calc(50% - 12px); margin-right: 24px; } .col3_m_323 .col:nth-child(3n), .col3_m_322 .col:nth-child(3n), .col3_m_321 .col:nth-child(3n) { margin-right: 24px; } .col3_m_323 .col:nth-child(2n), .col3_m_322 .col:nth-child(2n), .col3_m_321 .col:nth-child(2n) { margin-right: 0; } .col3_323 .col, .col3_322 .col, .col3_321 .col { width: calc(50% - 1px); margin-right: 1px; } .col3_323 .col:nth-child(3n), .col3_322 .col:nth-child(3n), .col3_321 .col:nth-child(3n) { margin-right: 1px; } .col3_323 .col:nth-child(2n), .col3_322 .col:nth-child(2n), .col3_321 .col:nth-child(2n) { margin-right: 0; } .col3_m_313 .col, .col3_m_312 .col, .col3_m_311 .col, .col3_313 .col, .col3_312 .col, .col3_311 .col { width: 100%; margin-right: 0; } .col3_m_313 .col:nth-child(2n), .col3_m_312 .col:nth-child(2n), .col3_m_311 .col:nth-child(2n), .col3_313 .col:nth-child(2n), .col3_312 .col:nth-child(2n), .col3_311 .col:nth-child(2n) { margin-right: 0; } } .col3_m_333 .col:last-child, .col3_m_332 .col:last-child, .col3_m_331 .col:last-child, .col3_m_323 .col:last-child, .col3_m_322 .col:last-child, .col3_m_321 .col:last-child, .col3_m_313 .col:last-child, .col3_m_312 .col:last-child, .col3_m_311 .col .col3_333 .col:last-child, .col3_332 .col:last-child, .col3_331 .col:last-child, .col3_323 .col:last-child, .col3_322 .col:last-child, .col3_321 .col:last-child, .col3_313 .col:last-child, .col3_312 .col:last-child, .col3_311 .col:last-child { margin-right: 0; } @media only screen and (max-width: 690px) { .col3_m_333 .col, .col3_m_332 .col, .col3_m_331 .col, .col3_m_323 .col, .col3_m_322 .col, .col3_m_321 .col, .col3_m_313 .col, .col3_m_312 .col, .col3_m_311 .col { margin-bottom: 16px; margin-right: 16px; } .col3_m_333 .col, .col3_m_323 .col, .col3_m_313 .col { width: calc(33.333% - 11.3px); margin-right: 16px; } .col3_m_333 .col:nth-child(2n), .col3_m_323 .col:nth-child(2n), .col3_m_313 .col:nth-child(2n) { margin-right: 16px; } .col3_m_333 .col:nth-child(3n), .col3_m_323 .col:nth-child(3n), .col3_m_313 .col:nth-child(3n) { margin-right: 0; } .col3_m_333 .col:nth-child(6n), .col3_m_323 .col:nth-child(6n), .col3_m_313 .col:nth-child(6n) { margin-right: 0; } .col3_m_332 .col, .col3_m_322 .col, .col3_m_312 .col { width: calc(50% - 8px); margin-right: 16px; } .col3_m_332 .col:nth-child(3n), .col3_m_322 .col:nth-child(3n), .col3_m_312 .col:nth-child(3n) { margin-right: 16px; } .col3_m_332 .col:nth-child(2n), .col3_m_322 .col:nth-child(2n), .col3_m_312 .col:nth-child(2n) { margin-right: 0; } .col3_333 .col, .col3_332 .col, .col3_331 .col, .col3_323 .col, .col3_322 .col, .col3_321 .col, .col3_313 .col, .col3_312 .col, .col3_311 .col { margin-bottom: 1px; margin-right: 1px; } .col3_333 .col, .col3_323 .col, .col3_313 .col { width: calc(33.333% - 1px); margin-right: 1.5px; } .col3_333 .col:nth-child(2n), .col3_323 .col:nth-child(2n), .col3_313 .col:nth-child(2n) { margin-right: 1.5px; } .col3_333 .col:nth-child(3n), .col3_323 .col:nth-child(3n), .col3_313 .col:nth-child(3n) { margin-right: 0; } .col3_332 .col, .col3_322 .col, .col3_312 .col { width: calc(50% - 1px); margin-right: 1.5px; } .col3_332 .col:nth-child(2n), .col3_322 .col:nth-child(2n), .col3_312 .col:nth-child(2n) { margin-right: 0; } .col3_332 .col:nth-child(3n), .col3_322 .col:nth-child(3n), .col3_312 .col:nth-child(3n) { margin-right: 1.5px; } .col3_m_331 .col, .col3_m_321 .col, .col3_m_311 .col, .col3_331 .col, .col3_321 .col, .col3_m_321 .col:nth-child(3n) { width: 100%; margin-right: 0; } .col3_331 .col { margin-bottom: 24px; } } /*------------------------------------------------ ブロック（4個並び） -------------------------------------------------*/ /*.col4::after,.col4_m::after {@include clearfix;} .col4 .flt, .col4 .flr{ width: 25%;} .col4_m .flt, .col4_m .flr{ width: 23.5%;}.col4_m .flt{margin-right: 2%;}*/ /* old -------------*/ .col4, .col4_sp2, .col4_m, .col4_m_sp2 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .col4_m .col, .col4_m_sp2 .col { width: calc(25% - 18px); margin-left: 24px; margin-bottom: 24px; } .col4_m .col:nth-child(4n + 1), .col4_m_sp2 .col:nth-child(4n + 1) { margin-left: 0; } .col4 .col, .col4_sp2 .col { width: calc(25% - 1px); margin-left: 1px; margin-bottom: 1px; } .col4 .col:nth-child(4n + 1), .col4_sp2 .col:nth-child(4n + 1) { margin-left: 0; } @media only screen and (max-width: 979px) { .col4_m_sp2 .col { width: calc(50% - 12px); margin-left: 24px; } .col4_m_sp2 .col:nth-child(4n + 1) { margin-left: 24px; } .col4_m_sp2 .col:nth-child(2n + 1) { margin-left: 0; } .col4_sp2 .col { width: calc(50% - 1px); margin-left: 1px; } .col4_sp2 .col:nth-child(4n + 1) { margin-left: 1px; } .col4_sp2 .col:nth-child(2n + 1) { margin-left: 0; } } @media only screen and (max-width: 690px) { .col4_m .col, .col4 .col { width: 100%; margin-left: auto; } .col4_m_sp2 .col { width: calc(50% - 8px); margin-left: 16px; } .col4_m_sp2 .col:nth-child(4n + 1) { margin-left: 16px; } .col4_m_sp2 .col:nth-child(2n + 1) { margin-left: 0; } } /* new -------------*/ .col4_m_444, .col4_m_443, .col4_m_442, .col4_m_441, .col4_m_433, .col4_m_432, .col4_m_431, .col4_m_423, .col4_m_422, .col4_m_421, .col4_m_411, .col4_444, .col4_443, .col4_442, .col4_441, .col4_433, .col4_432, .col4_431, .col4_423, .col4_422, .col4_421, .col4_411 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; /*真ん中寄せは案件による*/ } .col4_m_444 .col, .col4_m_443 .col, .col4_m_442 .col, .col4_m_441 .col, .col4_m_433 .col, .col4_m_432 .col, .col4_m_431 .col, .col4_m_422 .col, .col4_m_421 .col, .col4_m_411 .col { width: calc(25% - 19.2px); margin-right: 24px; margin-bottom: 24px; } .col4_m_444 .col:nth-child(4n), .col4_m_443 .col:nth-child(4n), .col4_m_442 .col:nth-child(4n), .col4_m_441 .col:nth-child(4n), .col4_m_433 .col:nth-child(4n), .col4_m_432 .col:nth-child(4n), .col4_m_431 .col:nth-child(4n), .col4_m_422 .col:nth-child(4n), .col4_m_421 .col:nth-child(4n), .col4_m_411 .col:nth-child(4n) { margin-right: 0; } .col4_444 .col, .col4_443 .col, .col4_442 .col, .col4_441 .col, .col4_433 .col, .col4_432 .col, .col4_431 .col, .col4_422 .col, .col4_421 .col, .col4_411 .col { width: calc(25% - 1px); margin-right: 1px; margin-bottom: 1px; } .col4_444 .col:nth-child(4n), .col4_443 .col:nth-child(4n), .col4_442 .col:nth-child(4n), .col4_441 .col:nth-child(4n), .col4_433 .col:nth-child(4n), .col4_432 .col:nth-child(4n), .col4_431 .col:nth-child(4n), .col4_422 .col:nth-child(4n), .col4_421 .col:nth-child(4n), .col4_411 .col:nth-child(4n) { margin-right: 0; } .col4_m_411 .col:last-child, .col4_m_444 .col:last-child, .col4_m_443 .col:last-child, .col4_m_442 .col:last-child, .col4_m_441 .col:last-child, .col4_m_433 .col:last-child, .col4_m_432 .col:last-child, .col4_m_431 .col:last-child, .col4_m_422 .col:last-child, .col4_m_421 .col:last-child, .col4_m_411 .col:last-child, .col4_444 .col:last-child, .col4_443 .col:last-child, .col4_442 .col:last-child, .col4_441 .col:last-child, .col4_433 .col:last-child, .col4_432 .col:last-child, .col4_431 .col:last-child, .col4_422 .col:last-child, .col4_421 .col:last-child, .col4_411 .col:last-child { margin-right: 0; } @media only screen and (max-width: 979px) { .col4_m_433 .col, .col4_m_432 .col, .col4_m_431 .col { width: calc(33.333% - 16px); } .col4_m_433 .col:nth-child(4n), .col4_m_432 .col:nth-child(4n), .col4_m_431 .col:nth-child(4n) { margin-right: 24px; } .col4_m_433 .col:nth-child(3n), .col4_m_432 .col:nth-child(3n), .col4_m_431 .col:nth-child(3n) { margin-right: 0; } .col4_433 .col, .col4_432 .col, .col4_431 .col { width: calc(33.333% - 1px); margin-right: 1.5px; } .col4_433 .col:nth-child(4n), .col4_432 .col:nth-child(4n), .col4_431 .col:nth-child(4n) { margin-right: 1.5px; } .col4_433 .col:nth-child(3n), .col4_432 .col:nth-child(3n), .col4_431 .col:nth-child(3n) { margin-right: 0; } .col4_m_422 .col, .col4_m_421 .col { width: calc(50% - 12px); } .col4_m_422 .col:nth-child(4n), .col4_m_421 .col:nth-child(4n) { margin-right: 24px; } .col4_m_422 .col:nth-child(2n), .col4_m_421 .col:nth-child(2n) { margin-right: 0; } .col4_422 .col, .col4_421 .col { width: calc(50% - 1px); margin-right: 2px; } .col4_422 .col:nth-child(4n), .col4_421 .col:nth-child(4n) { margin-right: 2px; } .col4_422 .col:nth-child(2n), .col4_421 .col:nth-child(2n) { margin-right: 0; } .col4_m_411 .col { width: 100%; margin-right: 0; } .col4_m_411 .col:nth-child(4n) { margin-right: 0; } .col4_m_411 .col:nth-child(2n) { margin-right: 0; } .col4_411 .col { width: 100%; margin-right: 0; margin-bottom: 1px; } .col4_411 .col:nth-child(4n) { margin-right: 0; } .col4_411 .col:nth-child(2n) { margin-right: 0; } } @media only screen and (max-width: 690px) { .col4_m_444 .col, .col4_m_443 .col, .col4_m_442 .col, .col4_m_441 .col, .col4_m_433 .col, .col4_m_432 .col, .col4_m_431 .col, .col4_m_422 .col, .col4_m_421 .col, .col4_m_411 .col { margin-bottom: 16px; } .col4_m_422 .col, .col4_m_421 .col { width: calc(50% - 8px); margin-right: 16px; } .col4_m_422 .col:nth-child(4n), .col4_m_421 .col:nth-child(4n) { margin-right: 0; } .col4_m_444 .col { width: calc(25% - 12px); margin-right: 16px; } .col4_m_443 .col { width: calc(33.333% - 10.7px); margin-right: 16px; } .col4_m_443 .col:nth-child(4n) { margin-right: 16px; } .col4_m_443 .col:nth-child(3n) { margin-right: 0; } .col4_m_433 .col { width: calc(33.333% - 10.7px); margin-right: 16px; } .col4_m_433 .col:nth-child(4n) { margin-right: 16px; } .col4_m_433 .col:nth-child(3n) { margin-right: 0; } .col4_m_442 .col, .col4_m_432 .col, .col4_m_422 .col { width: calc(50% - 8px); margin-right: 16px; } .col4_m_442 .col:nth-child(4n), .col4_m_432 .col:nth-child(4n), .col4_m_422 .col:nth-child(4n) { margin-right: 16px; } .col4_m_442 .col:nth-child(3n), .col4_m_432 .col:nth-child(3n), .col4_m_422 .col:nth-child(3n) { margin-right: 16px; } .col4_m_442 .col:nth-child(2n), .col4_m_432 .col:nth-child(2n), .col4_m_422 .col:nth-child(2n) { margin-right: 0; } .col4_444 .col, .col4_443 .col, .col4_442 .col, .col4_441 .col, .col4_433 .col, .col4_432 .col, .col4_431 .col, .col4_422 .col, .col4_421 .col, .col4_411 .col { margin-bottom: 1px; } .col4_443 .col { width: calc(33.333% - 1px); margin-right: 1.5px; } .col4_443 .col:nth-child(4n) { margin-right: 1.5px; } .col4_443 .col:nth-child(3n) { margin-right: 0; } .col4_442 .col, .col4_432 .col, .col4_422 .col { width: calc(50% - 1px); margin-right: 1.5px; } .col4_442 .col:nth-child(4n), .col4_432 .col:nth-child(4n), .col4_422 .col:nth-child(4n) { margin-right: 1.5px; } .col4_442 .col:nth-child(3n), .col4_432 .col:nth-child(3n), .col4_422 .col:nth-child(3n) { margin-right: 1.5px; } .col4_442 .col:nth-child(2n), .col4_432 .col:nth-child(2n), .col4_422 .col:nth-child(2n) { margin-right: 0; } .col4_441 .col, .col4_431 .col, .col4_421 .col, .col4_m_441 .col, .col4_m_431 .col, .col4_m_421 .col { width: 100%; margin-right: 0; } .col4_441 .col:nth-child(4n), .col4_431 .col:nth-child(4n), .col4_421 .col:nth-child(4n), .col4_m_441 .col:nth-child(4n), .col4_m_431 .col:nth-child(4n), .col4_m_421 .col:nth-child(4n) { margin-right: 0; } .col4_441 .col:nth-child(3n), .col4_431 .col:nth-child(3n), .col4_421 .col:nth-child(3n), .col4_m_441 .col:nth-child(3n), .col4_m_431 .col:nth-child(3n), .col4_m_421 .col:nth-child(3n) { margin-right: 0; } .col4_441 .col:nth-child(2n), .col4_431 .col:nth-child(2n), .col4_421 .col:nth-child(2n), .col4_m_441 .col:nth-child(2n), .col4_m_431 .col:nth-child(2n), .col4_m_421 .col:nth-child(2n) { margin-right: 0; } } /*------------------------------------------------ ブロック（5個並び） -------------------------------------------------*/ /*.col5::after,.col5_m::after {@include clearfix;} .col5 .flt, .col5 .flr{ width: 20%;} .col5_m .flt, .col5_m .flr{ width: 18.5%;}.col5_m .flt{margin-right: 1.875%;}*/ /* old -------------*/ .col5, .col5_sp2, .col5_m, .col5_m_sp2 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .col5_m .col, .col5_m_sp2 .col { width: calc(20% - 19.2px); margin-left: 24px; margin-bottom: 24px; } .col5_m .col:nth-child(5n + 1), .col5_m_sp2 .col:nth-child(5n + 1) { margin-left: 0; } .col5 .col, .col5_sp2 .col { width: calc(20% - 1px); margin-left: 1px; margin-bottom: 1px; } .col5 .col:nth-child(5n + 1), .col5_sp2 .col:nth-child(5n + 1) { margin-left: 0; } @media only screen and (max-width: 979px) { .col5_m .col { width: calc(33.33333% - 16px); margin-left: 24px; } .col5_m .col:nth-child(5n + 1) { margin-left: 24px; } .col5_m .col:nth-child(3n + 1) { margin-left: 0; } .col5 .col { width: calc(33.33333% - 1px); margin-left: 1px; } .col5 .col:nth-child(5n + 1) { margin-left: 1px; } .col5 .col:nth-child(3n + 1) { margin-left: 0; } .col5_m_sp2 .col { width: calc(33.33333% - 16px); margin-left: 24px; } .col5_m_sp2 .col:nth-child(5n + 1) { margin-left: 24px; } .col5_m_sp2 .col:nth-child(3n + 1) { margin-left: 0; } .col5_sp2 .col { width: calc(33.33333% - 1px); margin-left: 1px; } .col5_sp2 .col:nth-child(5n + 1) { margin-left: 1px; } .col5_sp2 .col:nth-child(3n + 1) { margin-left: 0; } } @media only screen and (max-width: 690px) { .col5_m .col, .col5 .col { width: 100%; margin-left: auto; } .col5_m .col:nth-child(5n + 1), .col5 .col:nth-child(5n + 1) { margin-left: auto; } .col5_m_sp2 .col { width: calc(50% - 8px); margin-left: 16px; margin-bottom: 16px; } .col5_m_sp2 .col:nth-child(5n + 1) { margin-left: 16px; } .col5_m_sp2 .col:nth-child(3n + 1) { margin-left: 16px; } .col5_m_sp2 .col:nth-child(2n + 1) { margin-left: 0; } .col5_sp2 .col { width: calc(50% - 0.5px); margin-left: 1px; margin-bottom: 1px; } .col5_sp2 .col:nth-child(5n + 1) { margin-left: 1px; } .col5_sp2 .col:nth-child(3n + 1) { margin-left: 1px; } .col5_sp2 .col:nth-child(2n + 1) { margin-left: 0; } } @media only screen and (max-width: 979px) { /* column 4 ************/ /*.col4 .flt, .col4 .flr{ width: 50%;} .col4_m .flt, .col4_m .flr{ width: 48%;} .col4_m .flt:not(:nth-child(2)){margin-right: 4%;} .col4_m .flt:nth-child(2){margin-right: 0;} .col4_m .flt{margin-bottom: 20px;}*/ } @media only screen and (max-width: 690px) { /*.col2 .flt, .col2 .flr{ width: 100%;}.col2 .flt{margin-bottom: 20px;} .col2_m .flt, .col2_m .flr{ width: 100%;}.col2_m .flt{margin-bottom: 20px;} .col2_ti .flt{width: 100%} .col2_ti .flr{ width: 100%;}.col2_ti .flt{margin-bottom: 20px;} .col2_it .flt{width: 100%} .col2_it .flr{ width: 100%;}.col2_it .flt{margin-bottom: 20px;} .col3 .flt, .col3 .flr{ width: 100%;} .col3_m .flt, .col3_m .flr{ width: 100%;}.col3_m .flt{margin-right: 0;margin-bottom: 20px;} .col4 .flt, .col4 .flr{ width: 100%;} .col4_m .flt, .col4_m .flr{ width: 100%;}.col4_m .flt{margin-right: 0;} .col5 .flt, .col5 .flr{ width: 100%;} .col5_m .flt, .col5_m .flr{ width: 100%;}.col5_m .flt{margin-right: 0;margin-bottom: 20px;}*/ } /* new -------------*/ .col5_m_555, .col5_m_554, .col5_m_553, .col5_m_552, .col5_m_551, .col5_m_544, .col5_m_543, .col5_m_542, .col5_m_541, .col5_m_533, .col5_m_532, .col5_m_531, .col5_m_522, .col5_m_521, .col5_m_511, .col5_555, .col5_554, .col5_553, .col5_552, .col5_551, .col5_544, .col5_543, .col5_542, .col5_541, .col5_533, .col5_532, .col5_531, .col5_522, .col5_521, .col5_511 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; /*真ん中寄せは案件による*/ } .col5_m_555 .col, .col5_m_554 .col, .col5_m_553 .col, .col5_m_552 .col, .col5_m_551 .col, .col5_m_544 .col, .col5_m_543 .col, .col5_m_542 .col, .col5_m_541 .col, .col5_m_533 .col, .col5_m_532 .col, .col5_m_531 .col, .col5_m_522 .col, .col5_m_521 .col, .col5_m_511 .col { width: calc(20% - 19.2px); margin-right: 24px; margin-bottom: 24px; } .col5_m_555 .col:nth-child(5n), .col5_m_554 .col:nth-child(5n), .col5_m_553 .col:nth-child(5n), .col5_m_552 .col:nth-child(5n), .col5_m_551 .col:nth-child(5n), .col5_m_544 .col:nth-child(5n), .col5_m_543 .col:nth-child(5n), .col5_m_542 .col:nth-child(5n), .col5_m_541 .col:nth-child(5n), .col5_m_533 .col:nth-child(5n), .col5_m_532 .col:nth-child(5n), .col5_m_531 .col:nth-child(5n), .col5_m_522 .col:nth-child(5n), .col5_m_521 .col:nth-child(5n), .col5_m_511 .col:nth-child(5n) { margin-right: 0; } .col5_555 .col, .col5_554 .col, .col5_553 .col, .col5_552 .col, .col5_551 .col, .col5_544 .col, .col5_543 .col, .col5_542 .col, .col5_541 .col, .col5_533 .col, .col5_532 .col, .col5_531 .col, .col5_522 .col, .col5_521 .col, .col5_511 .col { width: calc(20% - 1px); margin-right: 1px; margin-bottom: 1px; } .col5_555 .col:nth-child(5n), .col5_554 .col:nth-child(5n), .col5_553 .col:nth-child(5n), .col5_552 .col:nth-child(5n), .col5_551 .col:nth-child(5n), .col5_544 .col:nth-child(5n), .col5_543 .col:nth-child(5n), .col5_542 .col:nth-child(5n), .col5_541 .col:nth-child(5n), .col5_533 .col:nth-child(5n), .col5_532 .col:nth-child(5n), .col5_531 .col:nth-child(5n), .col5_522 .col:nth-child(5n), .col5_521 .col:nth-child(5n), .col5_511 .col:nth-child(5n) { margin-right: 0; } @media only screen and (max-width: 979px) { .col5_m_544 .col, .col5_m_543 .col, .col5_m_542 .col, .col5_m_541 .col { width: calc(25% - 19.2px); } .col5_m_544 .col:nth-child(5n), .col5_m_543 .col:nth-child(5n), .col5_m_542 .col:nth-child(5n), .col5_m_541 .col:nth-child(5n) { margin-right: 24px; } .col5_m_544 .col:nth-child(4n), .col5_m_543 .col:nth-child(4n), .col5_m_542 .col:nth-child(4n), .col5_m_541 .col:nth-child(4n) { margin-right: 0; } .col5_544 .col, .col5_543 .col, .col5_542 .col, .col5_541 .col { width: calc(25% - 1px); margin-right: 1.25px; } .col5_544 .col:nth-child(5n), .col5_543 .col:nth-child(5n), .col5_542 .col:nth-child(5n), .col5_541 .col:nth-child(5n) { margin-right: 1.25px; } .col5_544 .col:nth-child(4n), .col5_543 .col:nth-child(4n), .col5_542 .col:nth-child(4n), .col5_541 .col:nth-child(4n) { margin-right: 0; } .col5_m_533 .col, .col5_m_532 .col, .col5_m_531 .col { width: calc(33.333% - 16px); } .col5_m_533 .col:nth-child(5n), .col5_m_532 .col:nth-child(5n), .col5_m_531 .col:nth-child(5n) { margin-right: 24px; } .col5_m_533 .col:nth-child(3n), .col5_m_532 .col:nth-child(3n), .col5_m_531 .col:nth-child(3n) { margin-right: 0; } .col5_533 .col, .col5_532 .col, .col5_531 .col { width: calc(33.333% - 1px); margin-right: 1.5px; } .col5_533 .col:nth-child(5n), .col5_532 .col:nth-child(5n), .col5_531 .col:nth-child(5n) { margin-right: 1.5px; } .col5_533 .col:nth-child(3n), .col5_532 .col:nth-child(3n), .col5_531 .col:nth-child(3n) { margin-right: 0; } .col5_m_522 .col, .col5_m_521 .col { width: calc(50% - 12px); } .col5_m_522 .col:nth-child(5n), .col5_m_521 .col:nth-child(5n) { margin-right: 24px; } .col5_m_522 .col:nth-child(2n), .col5_m_521 .col:nth-child(2n) { margin-right: 0; } .col5_522 .col, .col5_521 .col { width: calc(50% - 1px); margin-right: 2px; } .col5_522 .col:nth-child(5n), .col5_521 .col:nth-child(5n) { margin-right: 2px; } .col5_522 .col:nth-child(2n), .col5_521 .col:nth-child(2n) { margin-right: 0; } .col5_m_511 .col, .col5_511 .col { width: 100%; margin-right: 0; } .col5_m_511 .col:nth-child(5n), .col5_511 .col:nth-child(5n) { margin-right: 0; } } @media only screen and (max-width: 690px) { .col5_m_555 .col, .col5_m_554 .col, .col5_m_553 .col, .col5_m_552 .col, .col5_m_551 .col, .col5_m_544 .col, .col5_m_543 .col, .col5_m_542 .col, .col5_m_541 .col, .col5_m_533 .col, .col5_m_532 .col, .col5_m_531 .col, .col5_m_522 .col, .col5_m_521 .col, .col5_m_511 .col { margin-right: 16px; margin-bottom: 16px; } .col5_m_553 .col { width: calc(33.333% - 10.7px); } .col5_m_553 .col:nth-child(5n) { margin-right: 16px; } .col5_m_553 .col:nth-child(3n) { margin-right: 0; } .col5_m_552 .col { width: calc(50% - 8px); } .col5_m_552 .col:nth-child(5n) { margin-right: 16px; } .col5_m_552 .col:nth-child(2n) { margin-right: 0; } .col5_m_551 .col { width: 100%; margin-right: 0; } .col5_m_551 .col:nth-child(5n) { margin-right: 0; } .col5_m_543 .col { width: calc(33.333% - 16px); } .col5_m_543 .col:nth-child(5n) { margin-right: 16px; } .col5_m_543 .col:nth-child(4n) { margin-right: 16px; } .col5_m_543 .col:nth-child(3n) { margin-right: 0; } .col5_m_542 .col { width: calc(50% - 8px); } .col5_m_542 .col:nth-child(5n) { margin-right: 16px; } .col5_m_542 .col:nth-child(4n) { margin-right: 16px; } .col5_m_542 .col:nth-child(2n) { margin-right: 0; } .col5_m_541 .col { width: 100%; margin-right: 0; } .col5_m_541 .col:nth-child(5n) { margin-right: 0; } .col5_m_541 .col:nth-child(4n) { margin-right: 0; } .col5_m_533 .col { width: calc(33.333% - 10.7px); } .col5_m_533 .col:nth-child(5n) { margin-right: 16px; } .col5_m_532 .col { width: calc(50% - 8px); } .col5_m_532 .col:nth-child(5n) { margin-right: 16px; } .col5_m_532 .col:nth-child(3n) { margin-right: 16px; } .col5_m_532 .col:nth-child(2n) { margin-right: 0; } .col5_m_531 .col { width: 100%; margin-right: 0; } .col5_m_531 .col:nth-child(5n) { margin-right: 0; } .col5_m_531 .col:nth-child(3n) { margin-right: 0; } .col5_m_522 .col { width: calc(50% - 8px); } .col5_m_522 .col:nth-child(5n) { margin-right: 16px; } .col5_m_522 .col:nth-child(3n) { margin-right: 16px; } .col5_m_522 .col:nth-child(2n) { margin-right: 0; } .col5_m_521 .col { width: 100%; margin-right: 0; } .col5_m_521 .col:nth-child(5n) { margin-right: 0; } .col5_m_521 .col:nth-child(2n) { margin-right: 0; } .col5_m_511 .col { width: 100%; margin-right: 0; } .col5_m_511 .col:nth-child(5n) { margin-right: 0; } .col5_m_511 .col:nth-child(2n) { margin-right: 0; } .col5_553 .col { width: calc(33.333% - 1px); } .col5_553 .col:nth-child(5n) { margin-right: 1.5px; } .col5_553 .col:nth-child(3n) { margin-right: 0; } .col5_552 .col { width: calc(50% - 0.5px); } .col5_552 .col:nth-child(5n) { margin-right: 1px; } .col5_552 .col:nth-child(2n) { margin-right: 0; } .col5_551 .col { width: 100%; } .col5_551 .col:nth-child(5n) { margin-right: 0; } .col5_543 .col { width: calc(33.333% - 1px); } .col5_543 .col:nth-child(5n) { margin-right: 1.5px; } .col5_543 .col:nth-child(4n) { margin-right: 1.5px; } .col5_543 .col:nth-child(3n) { margin-right: 0; } .col5_542 .col { width: calc(50% - 0.5px); margin-right: 1px; } .col5_542 .col:nth-child(5n) { margin-right: 1px; } .col5_542 .col:nth-child(4n) { margin-right: 1px; } .col5_542 .col:nth-child(2n) { margin-right: 0; } .col5_541 .col { width: 100%; } .col5_541 .col:nth-child(5n) { margin-right: 0; } .col5_541 .col:nth-child(4n) { margin-right: 0; } .col5_532 .col { width: calc(50% - 0.5px); margin-right: 1px; } .col5_532 .col:nth-child(5n) { margin-right: 1px; } .col5_532 .col:nth-child(3n) { margin-right: 1px; } .col5_532 .col:nth-child(2n) { margin-right: 0; } .col5_531 .col { width: 100%; margin-right: 0; } .col5_531 .col:nth-child(5n) { margin-right: 0; } .col5_531 .col:nth-child(3n) { margin-right: 0; } .col5_522 .col { width: calc(50% - 0.5px); margin-right: 1px; } .col5_522 .col:nth-child(5n) { margin-right: 1px; } .col5_522 .col:nth-child(3n) { margin-right: 1px; } .col5_522 .col:nth-child(2n) { margin-right: 0; } .col5_521 .col { width: 100%; margin-right: 0; } .col5_521 .col:nth-child(5n) { margin-right: 0; } .col5_521 .col:nth-child(2n) { margin-right: 0; } .col5_511 .col { width: 100%; margin-right: 0; } .col5_511 .col:nth-child(5n) { margin-right: 0; } .col5_511 .col:nth-child(2n) { margin-right: 0; } } .col5_m_555 .col:last-child, .col5_m_554 .col:last-child, .col5_m_553 .col:last-child, .col5_m_552 .col:last-child, .col5_m_551 .col:last-child, .col5_m_544 .col:last-child, .col5_m_543 .col:last-child, .col5_m_542 .col:last-child, .col5_m_541 .col:last-child, .col5_m_533 .col:last-child, .col5_m_532 .col:last-child, .col5_m_531 .col:last-child, .col5_m_522 .col:last-child, .col5_m_521 .col:last-child, .col5_m_511 .col:last-child, .col5_555 .col:last-child, .col5_554 .col:last-child, .col5_553 .col:last-child, .col5_552 .col:last-child, .col5_551 .col:last-child, .col5_544 .col:last-child, .col5_543 .col:last-child, .col5_542 .col:last-child, .col5_541 .col:last-child, .col5_533 .col:last-child, .col5_532 .col:last-child, .col5_531 .col:last-child, .col5_522 .col:last-child, .col5_521 .col:last-child, .col5_511 .col:last-child { margin-right: 0; } /*------------------------------------------------ ブロック（6個並び） -------------------------------------------------*/ .col6_m_666, .col6_m_665, .col6_m_664, .col6_m_663, .col6_m_662, .col6_m_661, .col6_m_655, .col6_m_654, .col6_m_653, .col6_m_652, .col6_m_651, .col6_m_644, .col6_m_643, .col6_m_642, .col6_m_641, .col6_m_633, .col6_m_632, .col6_m_631, .col6_m_622, .col6_m_621, .col6_m_611, .col6_666, .col6_665, .col6_664, .col6_663, .col6_662, .col6_661, .col6_655, .col6_654, .col6_653, .col6_652, .col6_651, .col6_644, .col6_643, .col6_642, .col6_641, .col6_633, .col6_632, .col6_631, .col6_622, .col6_621, .col6_611 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; /*真ん中寄せは案件による*/ } .col6_m_666 .col, .col6_m_665 .col, .col6_m_664 .col, .col6_m_663 .col, .col6_m_662 .col, .col6_m_661 .col, .col6_m_655 .col, .col6_m_654 .col, .col6_m_653 .col, .col6_m_652 .col, .col6_m_651 .col, .col6_m_644 .col, .col6_m_643 .col, .col6_m_642 .col, .col6_m_641 .col, .col6_m_633 .col, .col6_m_632 .col, .col6_m_631 .col, .col6_m_622 .col, .col6_m_621 .col, .col6_m_611 .col { width: calc(16.5% - 12.2px); margin-right: 16px; margin-bottom: 16px; } .col6_m_666 .col:nth-child(6n), .col6_m_665 .col:nth-child(6n), .col6_m_664 .col:nth-child(6n), .col6_m_663 .col:nth-child(6n), .col6_m_662 .col:nth-child(6n), .col6_m_661 .col:nth-child(6n), .col6_m_655 .col:nth-child(6n), .col6_m_654 .col:nth-child(6n), .col6_m_653 .col:nth-child(6n), .col6_m_652 .col:nth-child(6n), .col6_m_651 .col:nth-child(6n), .col6_m_644 .col:nth-child(6n), .col6_m_643 .col:nth-child(6n), .col6_m_642 .col:nth-child(6n), .col6_m_641 .col:nth-child(6n), .col6_m_633 .col:nth-child(6n), .col6_m_632 .col:nth-child(6n), .col6_m_631 .col:nth-child(6n), .col6_m_622 .col:nth-child(6n), .col6_m_621 .col:nth-child(6n), .col6_m_611 .col:nth-child(6n) { margin-right: 0; } .col6_666 .col, .col6_665 .col, .col6_664 .col, .col6_663 .col, .col6_662 .col, .col6_661 .col, .col6_655 .col, .col6_654 .col, .col6_653 .col, .col6_652 .col, .col6_651 .col, .col6_644 .col, .col6_643 .col, .col6_642 .col, .col6_641 .col, .col6_633 .col, .col6_632 .col, .col6_631 .col, .col6_622 .col, .col6_621 .col, .col6_611 .col { width: calc(16.6% - 1px); margin-right: 1.5px; margin-bottom: 1px; } .col6_666 .col:nth-child(6n), .col6_665 .col:nth-child(6n), .col6_664 .col:nth-child(6n), .col6_663 .col:nth-child(6n), .col6_662 .col:nth-child(6n), .col6_661 .col:nth-child(6n), .col6_655 .col:nth-child(6n), .col6_654 .col:nth-child(6n), .col6_653 .col:nth-child(6n), .col6_652 .col:nth-child(6n), .col6_651 .col:nth-child(6n), .col6_644 .col:nth-child(6n), .col6_643 .col:nth-child(6n), .col6_642 .col:nth-child(6n), .col6_641 .col:nth-child(6n), .col6_633 .col:nth-child(6n), .col6_632 .col:nth-child(6n), .col6_631 .col:nth-child(6n), .col6_622 .col:nth-child(6n), .col6_621 .col:nth-child(6n), .col6_611 .col:nth-child(6n) { margin-right: 0; } @media only screen and (max-width: 979px) { .col6_m_655 .col, .col6_m_654 .col, .col6_m_653 .col, .col6_m_652 .col, .col6_m_651 .col { width: calc(20% - 12.8px); } .col6_m_655 .col:nth-child(6n), .col6_m_654 .col:nth-child(6n), .col6_m_653 .col:nth-child(6n), .col6_m_652 .col:nth-child(6n), .col6_m_651 .col:nth-child(6n) { margin-right: 16px; } .col6_m_655 .col:nth-child(5n), .col6_m_654 .col:nth-child(5n), .col6_m_653 .col:nth-child(5n), .col6_m_652 .col:nth-child(5n), .col6_m_651 .col:nth-child(5n) { margin-right: 0; } .col6_655 .col, .col6_654 .col, .col6_653 .col, .col6_652 .col, .col6_651 .col { width: calc(20% - 1.2px); margin-right: 1px; } .col6_655 .col:nth-child(6n), .col6_654 .col:nth-child(6n), .col6_653 .col:nth-child(6n), .col6_652 .col:nth-child(6n), .col6_651 .col:nth-child(6n) { margin-right: 1px; } .col6_655 .col:nth-child(5n), .col6_654 .col:nth-child(5n), .col6_653 .col:nth-child(5n), .col6_652 .col:nth-child(5n), .col6_651 .col:nth-child(5n) { margin-right: 0; } .col6_m_644 .col, .col6_m_643 .col, .col6_m_642 .col, .col6_m_641 .col { width: calc(25% - 12px); } .col6_m_644 .col:nth-child(6n), .col6_m_643 .col:nth-child(6n), .col6_m_642 .col:nth-child(6n), .col6_m_641 .col:nth-child(6n) { margin-right: 16px; } .col6_m_644 .col:nth-child(4n), .col6_m_643 .col:nth-child(4n), .col6_m_642 .col:nth-child(4n), .col6_m_641 .col:nth-child(4n) { margin-right: 0; } .col6_644 .col, .col6_643 .col, .col6_642 .col, .col6_641 .col { width: calc(25% - 1.3px); margin-right: 1px; } .col6_644 .col:nth-child(6n), .col6_643 .col:nth-child(6n), .col6_642 .col:nth-child(6n), .col6_641 .col:nth-child(6n) { margin-right: 1px; } .col6_644 .col:nth-child(4n), .col6_643 .col:nth-child(4n), .col6_642 .col:nth-child(4n), .col6_641 .col:nth-child(4n) { margin-right: 0; } .col6_m_633 .col, .col6_m_632 .col, .col6_m_631 .col { width: calc(33.333% - 11px); } .col6_m_633 .col:nth-child(6n), .col6_m_632 .col:nth-child(6n), .col6_m_631 .col:nth-child(6n) { margin-right: 16px; } .col6_m_633 .col:nth-child(3n), .col6_m_632 .col:nth-child(3n), .col6_m_631 .col:nth-child(3n) { margin-right: 0; } .col6_633 .col, .col6_632 .col, .col6_631 .col { width: calc(33.333% - 1px); margin-right: 1.5px; } .col6_633 .col:nth-child(6n), .col6_632 .col:nth-child(6n), .col6_631 .col:nth-child(6n) { margin-right: 1.5px; } .col6_633 .col:nth-child(3n), .col6_632 .col:nth-child(3n), .col6_631 .col:nth-child(3n) { margin-right: 0; } .col6_m_623 .col, .col6_m_622 .col, .col6_m_621 .col { width: calc(50% - 8px); } .col6_m_623 .col:nth-child(6n), .col6_m_622 .col:nth-child(6n), .col6_m_621 .col:nth-child(6n) { margin-right: 16px; } .col6_m_623 .col:nth-child(2n), .col6_m_622 .col:nth-child(2n), .col6_m_621 .col:nth-child(2n) { margin-right: 0; } .col6_623 .col, .col6_622 .col, .col6_621 .col { width: calc(50% - 0.5px); margin-right: 1px; } .col6_623 .col:nth-child(6n), .col6_622 .col:nth-child(6n), .col6_621 .col:nth-child(6n) { margin-right: 1px; } .col6_623 .col:nth-child(2n), .col6_622 .col:nth-child(2n), .col6_621 .col:nth-child(2n) { margin-right: 0; } .col6_m_611 .col { width: 100%; margin-right: 0; } .col6_m_611 .col:nth-child(6n) { margin-right: 0; } .col6_611 .col { width: 100%; margin-right: 0; } .col6_611 .col:nth-child(6n) { margin-right: 0; } } @media only screen and (max-width: 690px) { .col6_m_666 .col { width: calc(16.6% - 13px); } .col6_m_665 .col { width: calc(20% - 12.8px); } .col6_m_665 .col:nth-child(6n) { margin-right: 16px; } .col6_m_665 .col:nth-child(5n) { margin-right: 0; } .col6_m_664 .col { width: calc(25% - 12px); } .col6_m_664 .col:nth-child(6n) { margin-right: 16px; } .col6_m_664 .col:nth-child(4n) { margin-right: 0; } .col6_m_663 .col { width: calc(33.333% - 11px); } .col6_m_663 .col:nth-child(6n) { margin-right: 16px; } .col6_m_663 .col:nth-child(3n) { margin-right: 0; } .col6_m_662 .col { width: calc(50% - 8px); } .col6_m_662 .col:nth-child(6n) { margin-right: 16px; } .col6_m_662 .col:nth-child(2n) { margin-right: 0; } .col6_m_661 .col { width: 100%; } .col6_m_661 .col:nth-child(6n) { margin-right: 0; } .col6_m_654 .col { width: calc(25% - 12px); } .col6_m_654 .col:nth-child(6n) { margin-right: 16px; } .col6_m_654 .col:nth-child(5n) { margin-right: 16px; } .col6_m_654 .col:nth-child(4n) { margin-right: 0; } .col6_m_653 .col { width: calc(33.333% - 11px); } .col6_m_653 .col:nth-child(6n) { margin-right: 16px; } .col6_m_653 .col:nth-child(5n) { margin-right: 16px; } .col6_m_653 .col:nth-child(3n) { margin-right: 0; } .col6_m_652 .col { width: calc(50% - 8px); } .col6_m_652 .col:nth-child(6n) { margin-right: 16px; } .col6_m_652 .col:nth-child(5n) { margin-right: 16px; } .col6_m_652 .col:nth-child(2n) { margin-right: 0; } .col6_m_651 .col { width: 100%; margin-right: 0; } .col6_m_651 .col:nth-child(6n) { margin-right: 0; } .col6_m_651 .col:nth-child(5n) { margin-right: 0; } .col6_m_643 .col { width: calc(33.333% - 11px); } .col6_m_643 .col:nth-child(6n) { margin-right: 16px; } .col6_m_643 .col:nth-child(4n) { margin-right: 16px; } .col6_m_643 .col:nth-child(3n) { margin-right: 0; } .col6_m_642 .col { width: calc(50% - 8px); } .col6_m_642 .col:nth-child(6n) { margin-right: 16px; } .col6_m_642 .col:nth-child(4n) { margin-right: 16px; } .col6_m_642 .col:nth-child(2n) { margin-right: 0; } .col6_m_641 .col { width: 100%; margin-right: 0; } .col6_m_641 .col:nth-child(6n) { margin-right: 0; } .col6_m_641 .col:nth-child(5n) { margin-right: 0; } .col6_m_632 .col { width: calc(50% - 8px); } .col6_m_632 .col:nth-child(6n) { margin-right: 16px; } .col6_m_632 .col:nth-child(3n) { margin-right: 16px; } .col6_m_632 .col:nth-child(2n) { margin-right: 0; } .col6_m_631 .col { width: 100%; margin-right: 0; } .col6_m_631 .col:nth-child(6n) { margin-right: 0; } .col6_m_631 .col:nth-child(3n) { margin-right: 0; } .col6_m_621 .col { width: 100%; margin-right: 0; } .col6_m_621 .col:nth-child(6n) { margin-right: 0; } .col6_m_621 .col:nth-child(2n) { margin-right: 0; } .col6_654 .col { width: calc(25% - 1px); margin-right: 1.333px; } .col6_654 .col:nth-child(6n) { margin-right: 1.333px; } .col6_654 .col:nth-child(5n) { margin-right: 1.333px; } .col6_654 .col:nth-child(4n) { margin-right: 0; } .col6_653 .col { width: calc(33.333% - 1px); margin-right: 1.5px; } .col6_653 .col:nth-child(6n) { margin-right: 1.5px; } .col6_653 .col:nth-child(5n) { margin-right: 1.5px; } .col6_653 .col:nth-child(3n) { margin-right: 0; } .col6_652 .col { width: calc(50% - 0.5px); margin-right: 1px; } .col6_652 .col:nth-child(6n) { margin-right: 1px; } .col6_652 .col:nth-child(5n) { margin-right: 1px; } .col6_652 .col:nth-child(2n) { margin-right: 0; } .col6_651 .col { width: 100%; margin-right: 0; } .col6_651 .col:nth-child(6n) { margin-right: 0; } .col6_651 .col:nth-child(5n) { margin-right: 0; } .col6_643 .col { width: calc(33.333% - 1px); margin-right: 1.5px; } .col6_643 .col:nth-child(6n) { margin-right: 1.5px; } .col6_643 .col:nth-child(4n) { margin-right: 1.5px; } .col6_643 .col:nth-child(3n) { margin-right: 0; } .col6_642 .col { width: calc(50% - 0.5px); margin-right: 1px; } .col6_642 .col:nth-child(6n) { margin-right: 1px; } .col6_642 .col:nth-child(4n) { margin-right: 1px; } .col6_642 .col:nth-child(2n) { margin-right: 0; } .col6_641 .col { width: 100%; margin-right: 0; } .col6_641 .col:nth-child(6n) { margin-right: 0; } .col6_641 .col:nth-child(4n) { margin-right: 0; } .col6_632 .col { width: calc(50% - 0.5px); margin-right: 1px; } .col6_632 .col:nth-child(6n) { margin-right: 1px; } .col6_632 .col:nth-child(3n) { margin-right: 1px; } .col6_632 .col:nth-child(2n) { margin-right: 0; } .col6_631 .col { width: 100%; margin-right: 0; } .col6_631 .col:nth-child(6n) { margin-right: 0; } .col6_631 .col:nth-child(3n) { margin-right: 0; } .col6_621 .col { width: 100%; margin-right: 0; } .col6_621 .col:nth-child(6n) { margin-right: 0; } .col6_621 .col:nth-child(2n) { margin-right: 0; } } .col6_m_666 .col:last-child, .col6_m_665 .col:last-child, .col6_m_664 .col:last-child, .col6_m_663 .col:last-child, .col6_m_662 .col:last-child, .col6_m_661 .col:last-child, .col6_m_655 .col:last-child, .col6_m_654 .col:last-child, .col6_m_653 .col:last-child, .col6_m_652 .col:last-child, .col6_m_651 .col:last-child, .col6_m_644 .col:last-child, .col6_m_643 .col:last-child, .col6_m_642 .col:last-child, .col6_m_641 .col:last-child, .col6_m_633 .col:last-child, .col6_m_632 .col:last-child, .col6_m_631 .col:last-child, .col6_m_622 .col:last-child, .col6_m_621 .col:last-child, .col6_m_611 .col:last-child, .col6_666 .col:last-child, .col6_665 .col:last-child, .col6_664 .col:last-child, .col6_663 .col:last-child, .col6_662 .col:last-child, .col6_661 .col:last-child, .col6_655 .col:last-child, .col6_654 .col:last-child, .col6_653 .col:last-child, .col6_652 .col:last-child, .col6_651 .col:last-child, .col6_644 .col:last-child, .col6_643 .col:last-child, .col6_642 .col:last-child, .col6_641 .col:last-child, .col6_633 .col:last-child, .col6_632 .col:last-child, .col6_631 .col:last-child, .col6_622 .col:last-child, .col6_621 .col:last-child, .col6_611 .col:last-child { margin-right: 0; } /*------------------------------------------------ background -------------------------------------------------*/ .col_bg { padding: 56px 24px 56px; } @media only screen and (max-width: 979px) { .col_bg { padding: 16px; } } .col_bg100 { padding: 56px 0 56px; } @media only screen and (max-width: 979px) { .col_bg100 { padding: 16px 0; } } .col_bg_white { padding: 24px; } @media only screen and (max-width: 979px) { .col_bg_white { padding: 16px; } } .col_border { padding: 24px; border-width: 1px; border-style: solid; } @media only screen and (max-width: 979px) { .col_border { padding: 16px; } } .col_border.pb_non { padding-bottom: 0; } .bg_next { position: relative; } .bg_next::after { content: ""; width: 0; height: 0; border-style: solid; border-width: 30px 50px 0 50px; position: absolute; bottom: -30px; left: calc(50% - 50px); } .col.col_bg_white { margin-bottom: 0; } @media only screen and (max-width: 690px) { .col.col_bg_white { margin-bottom: 16px; } .col.col_bg_white:last-child { margin-bottom: 0; } } @media only screen and (max-width: 690px) { .col_bg .inner { padding: 24px 0 16px; } .bg_next::after { border-width: 20px 30px 0 30px; bottom: -20px; left: calc(50% - 30px); } } /*------------------------------------------------ youtube -------------------------------------------------*/ .youtube { position: relative; padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/ height: 0; overflow: hidden; } .youtube iframe, .youtube video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } /*------------------------------------------------ width -------------------------------------------------*/ .t-default .w5, .w5 { width: 5%; } .t-default .w10, .w10 { width: 10%; } .t-default .w15, .w15 { width: 15%; } .t-default .w20, .w20 { width: 20%; } .t-default .w25, .w25 { width: 25%; } .t-default .w30, .w30 { width: 30%; } .t-default .w35, .w35 { width: 35%; } .t-default .w40, .w40 { width: 40%; } .t-default .w45, .w45 { width: 45%; } .t-default .w50, .w50 { width: 50%; } .t-default .w55, .w55 { width: 55%; } .t-default .w60, .w60 { width: 60%; } .t-default .w65, .w65 { width: 65%; } .t-default .w70, .w70 { width: 70%; } .t-default .w75, .w75 { width: 75%; } .t-default .w80, .w80 { width: 80%; } .t-default .w85, .w85 { width: 85%; } .t-default .w90, .w90 { width: 90%; } .t-default .w95, .w95 { width: 95%; } .t-default .w100, .w100 { width: 100%; } .t-default .w5_pctab, .w5_pctab { width: 5%; } .t-default .w10_pctab, .w10_pctab { width: 10%; } .t-default .w15_pctab, .w15_pctab { width: 15%; } .t-default .w20_pctab, .w20_pctab { width: 20%; } .t-default .w25_pctab, .w25_pctab { width: 25%; } .t-default .w30_pctab, .w30_pctab { width: 30%; } .t-default .w35_pctab, .w35_pctab { width: 35%; } .t-default .w40_pctab, .w40_pctab { width: 40%; } .t-default .w45_pctab, .w45_pctab { width: 45%; } .t-default .w50_pctab, .w50_pctab { width: 50%; } .t-default .w55_pctab, .w55_pctab { width: 55%; } .t-default .w60_pctab, .w60_pctab { width: 60%; } .t-default .w65_pctab, .w65_pctab { width: 65%; } .t-default .w70_pctab, .w70_pctab { width: 70%; } .t-default .w75_pctab, .w75_pctab { width: 75%; } .t-default .w80_pctab, .w80_pctab { width: 80%; } .t-default .w85_pctab, .w85_pctab { width: 85%; } .t-default .w90_pctab, .w90_pctab { width: 90%; } .t-default .w95_pctab, .w95_pctab { width: 95%; } .t-default .w100_pctab, .w100_pctab { width: 100%; } @media only screen and (max-width: 690px) { .w5_pctab, .w10_pctab, .w15_pctab, .w20_pctab, .w25_pctab, .w30_pctab, .w35_pctab, .w40_pctab, .w45_pctab, .w50_pctab, .w55_pctab, .w60_pctab, .w65_pctab, .w70_pctab, .w75_pctab, .w80_pctab, .w85_pctab, .w90_pctab, .w95_pctab, .w100_pctab { width: 100%; } } /************************************************/ /* width */ /************************************************/ @media only screen and (min-width: 980px) { .w100_pc { width: 100%; } .w95_pc { width: 95%; } .w90_pc { width: 90%; } .w85_pc { width: 85%; } .w80_pc { width: 80%; } .w75_pc { width: 75%; } .w70_pc { width: 70%; } .w65_pc { width: 65%; } .w60_pc { width: 60%; } .w55_pc { width: 55%; } .w50_pc { width: 50%; } .w45_pc { width: 45%; } .w40_pc { width: 40%; } .w35_pc { width: 35%; } .w30_pc { width: 30%; } .w25_pc { width: 25%; } .w20_pc { width: 20%; } .w15_pc { width: 15%; } .w10_pc { width: 10%; } .w5_pc { width: 5%; } } /************************************************/ /* width */ /************************************************/ @media only screen and (min-width: 691px) and (max-width: 979px) { .w100_tablet { width: 100%; } .w95_tablet { width: 95%; } .w90_tablet { width: 90%; } .w85_tablet { width: 85%; } .w80_tablet { width: 80%; } .w75_tablet { width: 75%; } .w70_tablet { width: 70%; } .w65_tablet { width: 65%; } .w60_tablet { width: 60%; } .w55_tablet { width: 55%; } .w50_tablet { width: 50%; } .w45_tablet { width: 45%; } .w40_tablet { width: 40%; } .w35_tablet { width: 35%; } .w30_tablet { width: 30%; } .w25_tablet { width: 25%; } .w20_tablet { width: 20%; } .w15_tablet { width: 15%; } .w10_tablet { width: 10%; } .w5_tablet { width: 5%; } } /************************************************/ /* width */ /************************************************/ @media only screen and (max-width: 690px) { .w100_sp { width: 100%; } .w95_sp { width: 95%; } .w90_sp { width: 90%; } .w85_sp { width: 85%; } .w80_sp { width: 80%; } .w75_sp { width: 75%; } .w70_sp { width: 70%; } .w65_sp { width: 65%; } .w60_sp { width: 60%; } .w55_sp { width: 55%; } .w50_sp { width: 50%; } .w45_sp { width: 45%; } .w40_sp { width: 40%; } .w35_sp { width: 35%; } .w30_sp { width: 30%; } .w25_sp { width: 25%; } .w20_sp { width: 20%; } .w15_sp { width: 15%; } .w10_sp { width: 10%; } .w5_sp { width: 5%; } } /*------------------------------------------------------------- list -----------------------------------------------------------------*/ /* list3 -------------*/ .list3_m_333, .list3_m_332, .list3_m_331, .list3_m_323, .list3_m_322, .list3_m_321, .list3_m_313, .list3_m_312, .list3_m_311, .list3_333, .list3_332, .list3_331, .list3_323, .list3_322, .list3_321, .list3_313, .list3_312, .list3_311 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .list3_m_333 li, .list3_m_332 li, .list3_m_331 li, .list3_m_323 li, .list3_m_322 li, .list3_m_321 li, .list3_m_313 li, .list3_m_312 li, .list3_m_311 li { width: calc(33.33333% - 16px); margin-right: 24px; margin-bottom: 24px; } .list3_m_333 li:nth-child(3n), .list3_m_332 li:nth-child(3n), .list3_m_331 li:nth-child(3n), .list3_m_323 li:nth-child(3n), .list3_m_322 li:nth-child(3n), .list3_m_321 li:nth-child(3n), .list3_m_313 li:nth-child(3n), .list3_m_312 li:nth-child(3n), .list3_m_311 li:nth-child(3n) { margin-right: 0; } .list3_333 li, .list3_332 li, .list3_331 li, .list3_323 li, .list3_322 li, .list3_321 li, .list3_313 li, .list3_312 li, .list3_311 li { width: 33.33333%; } @media only screen and (max-width: 979px) { .list3_m_323 li, .list3_m_322 li, .list3_m_321 li { width: calc(50% - 12px); margin-right: 24px; } .list3_m_323 li:nth-child(3n), .list3_m_322 li:nth-child(3n), .list3_m_321 li:nth-child(3n) { margin-right: 24px; } .list3_m_323 li:nth-child(2n), .list3_m_322 li:nth-child(2n), .list3_m_321 li:nth-child(2n) { margin-right: 0; } .list3_323 li, .list3_322 li, .list3_321 li { width: 50%; } .list3_m_313 li, .list3_m_312 li, .list3_m_311 li, .list3_313 li, .list3_312 li, .list3_311 li { width: 100%; margin-right: 0; } .list3_m_313 li:nth-child(2n), .list3_m_312 li:nth-child(2n), .list3_m_311 li:nth-child(2n), .list3_313 li:nth-child(2n), .list3_312 li:nth-child(2n), .list3_311 li:nth-child(2n) { margin-right: 0; } } @media only screen and (max-width: 690px) { .list3_m_333 li, .list3_m_332 li, .list3_m_331 li, .list3_m_323 li, .list3_m_322 li, .list3_m_321 li, .list3_m_313 li, .list3_m_312 li, .list3_m_311 li { margin-bottom: 16px; margin-right: 16px; } .list3_m_333 li, .list3_m_323 li, .list3_m_313 li { width: calc(33.333% - 11.3px); margin-right: 16px; } .list3_m_333 li:nth-child(2n), .list3_m_323 li:nth-child(2n), .list3_m_313 li:nth-child(2n) { margin-right: 16px; } .list3_m_333 li:nth-child(3n), .list3_m_323 li:nth-child(3n), .list3_m_313 li:nth-child(3n) { margin-right: 0; } .list3_m_333 li:nth-child(6n), .list3_m_323 li:nth-child(6n), .list3_m_313 li:nth-child(6n) { margin-right: 0; } .list3_m_332 li, .list3_m_322 li, .list3_m_312 li { width: calc(50% - 8px); margin-right: 16px; } .list3_m_332 li:nth-child(2n), .list3_m_322 li:nth-child(2n), .list3_m_312 li:nth-child(2n) { margin-right: 0; } .list3_m_332 li:nth-child(3n), .list3_m_322 li:nth-child(3n), .list3_m_312 li:nth-child(3n) { margin-right: 16px; } .list3_333 li, .list3_332 li, .list3_331 li, .list3_323 li, .list3_322 li, .list3_321 li, .list3_313 li, .list3_312 li, .list3_311 li { margin-bottom: 1px; margin-right: 1px; } .list3_333 li, .list3_323 li, .list3_313 li { width: 33.333%; } .list3_332 li, .list3_322 li, .list3_312 li { width: 50%; } .list3_m_331 li, .list3_m_321 li, .list3_m_311 li, .list3_331 li, .list3_321 li, .list3_m_321 li:nth-child(3n) { width: 100%; margin-right: 0; } .list3_331 li { margin-bottom: 24px; } } .list3_m_333 li:last-child, .list3_m_332 li:last-child, .list3_m_331 li:last-child, .list3_m_323 li:last-child, .list3_m_322 li:last-child, .list3_m_321 li:last-child, .list3_m_313 li:last-child, .list3_m_312 li:last-child, .list3_m_311 li .list3_333 li:last-child, .list3_332 li:last-child, .list3_331 li:last-child, .list3_323 li:last-child, .list3_322 li:last-child, .list3_321 li:last-child, .list3_313 li:last-child, .list3_312 li:last-child, .list3_311 li:last-child { margin-right: 0; } /* list4 -------------*/ .list4_m_444, .list4_m_443, .list4_m_442, .list4_m_441, .list4_m_433, .list4_m_432, .list4_m_431, .list4_m_423, .list4_m_422, .list4_m_421, .list4_m_411, .list4_444, .list4_443, .list4_442, .list4_441, .list4_433, .list4_432, .list4_431, .list4_423, .list4_422, .list4_421, .list4_411 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .list4_m_444 li, .list4_m_443 li, .list4_m_442 li, .list4_m_441 li, .list4_m_433 li, .list4_m_432 li, .list4_m_431 li, .list4_m_422 li, .list4_m_421 li, .list4_m_411 li { width: calc(25% - 19.2px); margin-right: 24px; margin-bottom: 24px; } .list4_m_444 li:nth-child(4n), .list4_m_443 li:nth-child(4n), .list4_m_442 li:nth-child(4n), .list4_m_441 li:nth-child(4n), .list4_m_433 li:nth-child(4n), .list4_m_432 li:nth-child(4n), .list4_m_431 li:nth-child(4n), .list4_m_422 li:nth-child(4n), .list4_m_421 li:nth-child(4n), .list4_m_411 li:nth-child(4n) { margin-right: 0; } .list4_444 li, .list4_443 li, .list4_442 li, .list4_441 li, .list4_433 li, .list4_432 li, .list4_431 li, .list4_422 li, .list4_421 li, .list4_411 li { width: 25%; } .list4_m_411 li:last-child, .list4_m_444 li:last-child, .list4_m_443 li:last-child, .list4_m_442 li:last-child, .list4_m_441 li:last-child, .list4_m_433 li:last-child, .list4_m_432 li:last-child, .list4_m_431 li:last-child, .list4_m_422 li:last-child, .list4_m_421 li:last-child, .list4_m_411 li:last-child, .list4_444 li:last-child, .list4_443 li:last-child, .list4_442 li:last-child, .list4_441 li:last-child, .list4_433 li:last-child, .list4_432 li:last-child, .list4_431 li:last-child, .list4_422 li:last-child, .list4_421 li:last-child, .list4_411 li:last-child { margin-right: 0; } @media only screen and (max-width: 979px) { .list4_m_433 li, .list4_m_432 li, .list4_m_431 li { width: calc(33.333% - 16px); } .list4_m_433 li:nth-child(4n), .list4_m_432 li:nth-child(4n), .list4_m_431 li:nth-child(4n) { margin-right: 24px; } .list4_m_433 li:nth-child(3n), .list4_m_432 li:nth-child(3n), .list4_m_431 li:nth-child(3n) { margin-right: 0; } .list4_433 li, .list4_432 li, .list4_431 li { width: 33.333%; } .list4_m_422 li, .list4_m_421 li { width: calc(50% - 12px); } .list4_m_422 li:nth-child(4n), .list4_m_421 li:nth-child(4n) { margin-right: 24px; } .list4_m_422 li:nth-child(2n), .list4_m_421 li:nth-child(2n) { margin-right: 0; } .list4_422 li, .list4_421 li { width: 50%; } .list4_m_411 li { width: 100%; margin-right: 0; } .list4_m_411 li:nth-child(4n) { margin-right: 0; } .list4_m_411 li:nth-child(2n) { margin-right: 0; } .list4_411 li { width: 100%; margin-right: 0; margin-bottom: 1px; } .list4_411 li:nth-child(4n) { margin-right: 0; } .list4_411 li:nth-child(2n) { margin-right: 0; } } @media only screen and (max-width: 690px) { .list4_m_444 li, .list4_m_443 li, .list4_m_442 li, .list4_m_441 li, .list4_m_433 li, .list4_m_432 li, .list4_m_431 li, .list4_m_422 li, .list4_m_421 li, .list4_m_411 li { margin-bottom: 16px; } .list4_m_422 li, .list4_m_421 li { width: calc(50% - 8px); margin-right: 16px; } .list4_m_422 li:nth-child(4n), .list4_m_421 li:nth-child(4n) { margin-right: 0; } .list4_m_444 li { width: calc(25% - 12px); margin-right: 16px; } .list4_m_443 li { width: calc(33.333% - 10.7px); margin-right: 16px; } .list4_m_443 li:nth-child(4n) { margin-right: 16px; } .list4_m_443 li:nth-child(3n) { margin-right: 0; } .list4_m_433 li { width: calc(33.333% - 10.7px); margin-right: 16px; } .list4_m_433 li:nth-child(4n) { margin-right: 16px; } .list4_m_433 li:nth-child(3n) { margin-right: 0; } .list4_m_442 li, .list4_m_432 li, .list4_m_422 li { width: calc(50% - 8px); margin-right: 16px; } .list4_m_442 li:nth-child(4n), .list4_m_432 li:nth-child(4n), .list4_m_422 li:nth-child(4n) { margin-right: 16px; } .list4_m_442 li:nth-child(3n), .list4_m_432 li:nth-child(3n), .list4_m_422 li:nth-child(3n) { margin-right: 16px; } .list4_m_442 li:nth-child(2n), .list4_m_432 li:nth-child(2n), .list4_m_422 li:nth-child(2n) { margin-right: 0; } .list4_444 li, .list4_443 li, .list4_442 li, .list4_441 li, .list4_433 li, .list4_432 li, .list4_431 li, .list4_422 li, .list4_421 li, .list4_411 li { margin-bottom: 1px; } .list4_443 li { width: 33.333%; } .list4_442 li, .list4_432 li, .list4_422 li { width: 50%; } .list4_441 li, .list4_431 li, .list4_421 li, .list4_m_441 li, .list4_m_431 li, .list4_m_421 li { width: 100%; margin-right: 0; } .list4_441 li:nth-child(4n), .list4_431 li:nth-child(4n), .list4_421 li:nth-child(4n), .list4_m_441 li:nth-child(4n), .list4_m_431 li:nth-child(4n), .list4_m_421 li:nth-child(4n) { margin-right: 0; } .list4_441 li:nth-child(3n), .list4_431 li:nth-child(3n), .list4_421 li:nth-child(3n), .list4_m_441 li:nth-child(3n), .list4_m_431 li:nth-child(3n), .list4_m_421 li:nth-child(3n) { margin-right: 0; } .list4_441 li:nth-child(2n), .list4_431 li:nth-child(2n), .list4_421 li:nth-child(2n), .list4_m_441 li:nth-child(2n), .list4_m_431 li:nth-child(2n), .list4_m_421 li:nth-child(2n) { margin-right: 0; } } /* list5 -------------*/ .list5_m_555, .list5_m_554, .list5_m_553, .list5_m_552, .list5_m_551, .list5_m_544, .list5_m_543, .list5_m_542, .list5_m_541, .list5_m_533, .list5_m_532, .list5_m_531, .list5_m_522, .list5_m_521, .list5_m_511, .list5_555, .list5_554, .list5_553, .list5_552, .list5_551, .list5_544, .list5_543, .list5_542, .list5_541, .list5_533, .list5_532, .list5_531, .list5_522, .list5_521, .list5_511 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .list5_m_555 li, .list5_m_554 li, .list5_m_553 li, .list5_m_552 li, .list5_m_551 li, .list5_m_544 li, .list5_m_543 li, .list5_m_542 li, .list5_m_541 li, .list5_m_533 li, .list5_m_532 li, .list5_m_531 li, .list5_m_522 li, .list5_m_521 li, .list5_m_511 li { width: calc(20% - 19.2px); margin-right: 24px; margin-bottom: 24px; } .list5_m_555 li:nth-child(5n), .list5_m_554 li:nth-child(5n), .list5_m_553 li:nth-child(5n), .list5_m_552 li:nth-child(5n), .list5_m_551 li:nth-child(5n), .list5_m_544 li:nth-child(5n), .list5_m_543 li:nth-child(5n), .list5_m_542 li:nth-child(5n), .list5_m_541 li:nth-child(5n), .list5_m_533 li:nth-child(5n), .list5_m_532 li:nth-child(5n), .list5_m_531 li:nth-child(5n), .list5_m_522 li:nth-child(5n), .list5_m_521 li:nth-child(5n), .list5_m_511 li:nth-child(5n) { margin-right: 0; } .list5_555 li, .list5_554 li, .list5_553 li, .list5_552 li, .list5_551 li, .list5_544 li, .list5_543 li, .list5_542 li, .list5_541 li, .list5_533 li, .list5_532 li, .list5_531 li, .list5_522 li, .list5_521 li, .list5_511 li { width: 20%; } @media only screen and (max-width: 979px) { .list5_m_544 li, .list5_m_543 li, .list5_m_542 li, .list5_m_541 li { width: calc(25% - 19.2px); } .list5_m_544 li:nth-child(5n), .list5_m_543 li:nth-child(5n), .list5_m_542 li:nth-child(5n), .list5_m_541 li:nth-child(5n) { margin-right: 24px; } .list5_m_544 li:nth-child(4n), .list5_m_543 li:nth-child(4n), .list5_m_542 li:nth-child(4n), .list5_m_541 li:nth-child(4n) { margin-right: 0; } .list5_544 li, .list5_543 li, .list5_542 li, .list5_541 li { width: 25%; } .list5_m_533 li, .list5_m_532 li, .list5_m_531 li { width: calc(33.333% - 16px); } .list5_m_533 li:nth-child(5n), .list5_m_532 li:nth-child(5n), .list5_m_531 li:nth-child(5n) { margin-right: 24px; } .list5_m_533 li:nth-child(3n), .list5_m_532 li:nth-child(3n), .list5_m_531 li:nth-child(3n) { margin-right: 0; } .list5_533 li, .list5_532 li, .list5_531 li { width: 33.333%; } .list5_m_522 li, .list5_m_521 li { width: calc(50% - 12px); } .list5_m_522 li:nth-child(5n), .list5_m_521 li:nth-child(5n) { margin-right: 24px; } .list5_m_522 li:nth-child(2n), .list5_m_521 li:nth-child(2n) { margin-right: 0; } .list5_522 li, .list5_521 li { width: 50%; } .list5_m_511 li, .list5_511 li { width: 100%; margin-right: 0; } .list5_m_511 li:nth-child(5n), .list5_511 li:nth-child(5n) { margin-right: 0; } } @media only screen and (max-width: 690px) { .list5_m_555 li, .list5_m_554 li, .list5_m_553 li, .list5_m_552 li, .list5_m_551 li, .list5_m_544 li, .list5_m_543 li, .list5_m_542 li, .list5_m_541 li, .list5_m_533 li, .list5_m_532 li, .list5_m_531 li, .list5_m_522 li, .list5_m_521 li, .list5_m_511 li { margin-right: 16px; margin-bottom: 16px; } .list5_m_553 li { width: calc(33.333% - 10.7px); } .list5_m_553 li:nth-child(5n) { margin-right: 16px; } .list5_m_553 li:nth-child(3n) { margin-right: 0; } .list5_m_552 li { width: calc(50% - 8px); } .list5_m_552 li:nth-child(5n) { margin-right: 16px; } .list5_m_552 li:nth-child(2n) { margin-right: 0; } .list5_m_551 li { width: 100%; margin-right: 0; } .list5_m_551 li:nth-child(5n) { margin-right: 0; } .list5_m_543 li { width: calc(33.333% - 16px); } .list5_m_543 li:nth-child(5n) { margin-right: 16px; } .list5_m_543 li:nth-child(4n) { margin-right: 16px; } .list5_m_543 li:nth-child(3n) { margin-right: 0; } .list5_m_542 li { width: calc(50% - 8px); } .list5_m_542 li:nth-child(5n) { margin-right: 16px; } .list5_m_542 li:nth-child(4n) { margin-right: 16px; } .list5_m_542 li:nth-child(2n) { margin-right: 0; } .list5_m_541 li { width: 100%; margin-right: 0; } .list5_m_541 li:nth-child(5n) { margin-right: 0; } .list5_m_541 li:nth-child(4n) { margin-right: 0; } .list5_m_533 li { width: calc(33.333% - 10.7px); } .list5_m_533 li:nth-child(5n) { margin-right: 16px; } .list5_m_532 li { width: calc(50% - 8px); } .list5_m_532 li:nth-child(5n) { margin-right: 16px; } .list5_m_532 li:nth-child(3n) { margin-right: 16px; } .list5_m_532 li:nth-child(2n) { margin-right: 0; } .list5_m_531 li { width: 100%; margin-right: 0; } .list5_m_531 li:nth-child(5n) { margin-right: 0; } .list5_m_531 li:nth-child(3n) { margin-right: 0; } .list5_m_522 li { width: calc(50% - 8px); } .list5_m_522 li:nth-child(5n) { margin-right: 16px; } .list5_m_522 li:nth-child(3n) { margin-right: 16px; } .list5_m_522 li:nth-child(2n) { margin-right: 0; } .list5_m_521 li { width: 100%; margin-right: 0; } .list5_m_521 li:nth-child(5n) { margin-right: 0; } .list5_m_521 li:nth-child(2n) { margin-right: 0; } .list5_m_511 li { width: 100%; margin-right: 0; } .list5_m_511 li:nth-child(5n) { margin-right: 0; } .list5_m_511 li:nth-child(2n) { margin-right: 0; } } .list5_m_555 li:last-child, .list5_m_554 li:last-child, .list5_m_553 li:last-child, .list5_m_552 li:last-child, .list5_m_551 li:last-child, .list5_m_544 li:last-child, .list5_m_543 li:last-child, .list5_m_542 li:last-child, .list5_m_541 li:last-child, .list5_m_533 li:last-child, .list5_m_532 li:last-child, .list5_m_531 li:last-child, .list5_m_522 li:last-child, .list5_m_521 li:last-child, .list5_m_511 li:last-child { margin-right: 0; } /*------------------------------------------------------------------- ブロックまとめる→横並び ---------------------------------------------------------------------*/ /* 3つ (js追加してください。//$('.wcol3').wrapAll('
');)--------------*/ .wblock3 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .wblock3 .wcol3 { width: calc(33.333% - 20px); margin-bottom: 30px; margin-right: 30px; } .wblock3 .wcol3:nth-child(3n) { margin-right: 0; } @media only screen and (max-width: 690px) { .wblock3 .wcol3 { width: 100%; margin-right: 0; } } /* 4つ (js追加してください。//$('.wcol4').wrapAll('
');)--------------*/ .wblock4 { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } .wblock4 .wcol4 { width: calc(25% - 15px); margin-bottom: 30px; margin-right: 20px; } .wblock4 .wcol4:nth-child(4n) { margin-right: 0; } @media only screen and (max-width: 690px) { .wblock4 .wcol4 { width: 100%; margin-right: 0; } } /* =================================================================== CSS information file name : module.css style info : 全ページ共通 パーツ生成用 cssの定義 =================================================================== */ /****************************************************************/ /* txt position */ /****************************************************************/ .txt_l { text-align: left; } .txt_r { text-align: right; } .txt_c { text-align: center; } .txt_rrc { text-align: right; } .txt_ccl { text-align: center; } .txt_rlr { text-align: right; } .txt_lrl { text-align: left; } .valign_t { vertical-align: top; } .valign_m { vertical-align: middle; } .valign_b { vertical-align: bottom; } @media only screen and (max-width: 979px) { .txt_rlr { text-align: left; } .txt_lrl { text-align: right; } } @media only screen and (max-width: 690px) { .txt_rrc { text-align: center; } .txt_ccl { text-align: left; } .txt_rlr { text-align: right; } .txt_lrl { text-align: left; } } /****************************************************************/ /* float clear clearfix /****************************************************************/ .clear { clear: both; } .clearfix:after { content: ""; display: table; clear: both; } /****************************************************************/ /* list style */ /****************************************************************/ .list_return li { width: 33.333%; padding: 0 1.5%; } @media only screen and (max-width: 690px) { .list_return li { width: 100%; padding: 0%; } } .list_none li { list-style: none; line-height: 1.3; margin-bottom: 8px; } .list_disc li { list-style-type: disc; margin-left: 20px; line-height: 1.3; margin-bottom: 8px; } .list_circle li { list-style-type: circle; margin-left: 20px; line-height: 1.3; margin-bottom: 8px; } .list_square li { list-style-type: square; margin-left: 22px; line-height: 1.3; margin-bottom: 8px; } .list_decimal li { list-style-type: decimal; margin-left: 25px; line-height: 1.3; margin-bottom: 8px; } .list_loweralpha li { list-style-type: lower-alpha; margin-left: 25px; line-height: 1.3; margin-bottom: 8px; } .list_upperalpha li { list-style-type: upper-alpha; margin-left: 25px; line-height: 1.3; margin-bottom: 8px; } .list_katakana li { list-style-type: katakana; margin-left: 30px; line-height: 1.3; margin-bottom: 8px; } .list_hiragana li { list-style-type: hiragana; margin-left: 30px; line-height: 1.3; margin-bottom: 8px; } .list_cjk-ideographic li { list-style-type: cjk-ideographic; margin-left: 30px; line-height: 1.3; margin-bottom: 8px; } .list_decimal-leading-zero li { list-style-type: decimal-leading-zero; margin-left: 30px; line-height: 1.3; margin-bottom: 8px; } .list_material li { list-style: none; line-height: 1.6; margin-bottom: 12px; padding-left: 2.2rem; } .list_material li .material-icons { font-size: 1.4rem; margin: 0 8px 0 -2.2rem; } .list_material_bg li { list-style: none; line-height: 1.6; margin-bottom: 12px; padding-left: 2.2rem; background: no-repeat 0 6px / 16px auto; } .list_counter { counter-reset: li; } .list_counter li { list-style: none; line-height: 1.6; margin-bottom: 12px; padding-left: 5rem; position: relative; } .list_counter li.list_c::after { counter-increment: li; content: "第" counter(li) "位"; position: absolute; display: block; text-align: center; font-style: italic; left: 0px; top: -1px; } .list_return { display: -webkit-box; display: -ms-flexbox; display: flex; -ms-flex-wrap: wrap; flex-wrap: wrap; } /****************************************************************/ /* image */ /****************************************************************/ /* responsive **********/ .img100 img, #contents img, .inner img { max-width: 100%; width: auto; height: auto; display: block; margin-right: auto; margin-left: auto; } body.dcms_editor .img100 img, body.dcms_editor #contents_left img, body.dcms_editor .inner img { display: inline; height: auto; max-height: 100%; width: auto; } body .dcms_login_name img { width: 29px !important; height: 29px !important; display: inline !important; } /* border **********/ .pb { border: solid 1px #dddddd; } .pb img { border: 1px solid #dddddd; } .pb1 img { border: 1px solid #dddddd; padding: 1px; } .pb2 img { border: 1px solid #dddddd; padding: 2px; } .pb > img { border: none; } /* form **********/ .imgcircle img { border-radius: 50%; } /****************************************************************/ /* font size */ /****************************************************************/ /* px *****************/ .fs10 { font-size: 10px; line-height: 1.7; } .fs11 { font-size: 11px; line-height: 1.7; } .fs12 { font-size: 12px; line-height: 1.7; } .fs13 { font-size: 13px; line-height: 1.7; } .fs14 { font-size: 14px; line-height: 1.7; } .fs15 { font-size: 15px; line-height: 1.7; } .fs16 { font-size: 16px; line-height: 1.7; } .fs17 { font-size: 17px; line-height: 1.7; } .fs18 { font-size: 18px; line-height: 1.7; } .fs19 { font-size: 19px; line-height: 1.7; } .fs20 { font-size: 20px; line-height: 1.7; } .fs21 { font-size: 21px; line-height: 1.7; } .fs22 { font-size: 22px; line-height: 1.7; } .fs23 { font-size: 23px; line-height: 1.7; } .fs24 { font-size: 24px; line-height: 1.7; } .fs25 { font-size: 25px; line-height: 1.7; } .fs26 { font-size: 26px; line-height: 1.7; } .fs27 { font-size: 27px; line-height: 1.7; } .fs28 { font-size: 28px; line-height: 1.7; } .fs29 { font-size: 29px; line-height: 1.7; } .fs30 { font-size: 30px; line-height: 1.7; } .fs31 { font-size: 31px; line-height: 1.7; } .fs32 { font-size: 32px; line-height: 1.7; } .fs33 { font-size: 33px; line-height: 1.7; } .fs34 { font-size: 34px; line-height: 1.7; } .fs35 { font-size: 35px; line-height: 1.7; } .fs36 { font-size: 36px; line-height: 1.7; } .fs37 { font-size: 37px; line-height: 1.7; } .fs38 { font-size: 38px; line-height: 1.7; } .fs39 { font-size: 39px; line-height: 1.7; } .fs40 { font-size: 40px; line-height: 1.7; } .fs10_bold { font-size: 10px; line-height: 1.7; font-weight: bold; } .fs11_bold { font-size: 11px; line-height: 1.7; font-weight: bold; } .fs12_bold { font-size: 12px; line-height: 1.7; font-weight: bold; } .fs13_bold { font-size: 13px; line-height: 1.7; font-weight: bold; } .fs14_bold { font-size: 14px; line-height: 1.7; font-weight: bold; } .fs15_bold { font-size: 15px; line-height: 1.7; font-weight: bold; } .fs16_bold { font-size: 16px; line-height: 1.7; font-weight: bold; } .fs17_bold { font-size: 17px; line-height: 1.7; font-weight: bold; } .fs18_bold { font-size: 18px; line-height: 1.7; font-weight: bold; } .fs19_bold { font-size: 19px; line-height: 1.7; font-weight: bold; } .fs20_bold { font-size: 20px; line-height: 1.7; font-weight: bold; } .fs21_bold { font-size: 21px; line-height: 1.7; font-weight: bold; } .fs22_bold { font-size: 22px; line-height: 1.7; font-weight: bold; } .fs23_bold { font-size: 23px; line-height: 1.7; font-weight: bold; } .fs24_bold { font-size: 24px; line-height: 1.7; font-weight: bold; } .fs25_bold { font-size: 25px; line-height: 1.7; font-weight: bold; } .fs26_bold { font-size: 26px; line-height: 1.7; font-weight: bold; } .fs27_bold { font-size: 27px; line-height: 1.7; font-weight: bold; } .fs28_bold { font-size: 28px; line-height: 1.7; font-weight: bold; } .fs29_bold { font-size: 29px; line-height: 1.7; font-weight: bold; } .fs30_bold { font-size: 30px; line-height: 1.7; font-weight: bold; } .fs31_bold { font-size: 31px; line-height: 1.7; font-weight: bold; } .fs32_bold { font-size: 32px; line-height: 1.7; font-weight: bold; } .fs33_bold { font-size: 33px; line-height: 1.7; font-weight: bold; } .fs34_bold { font-size: 34px; line-height: 1.7; font-weight: bold; } .fs35_bold { font-size: 35px; line-height: 1.7; font-weight: bold; } .fs36_bold { font-size: 36px; line-height: 1.7; font-weight: bold; } .fs37_bold { font-size: 37px; line-height: 1.7; font-weight: bold; } .fs38_bold { font-size: 38px; line-height: 1.7; font-weight: bold; } .fs39_bold { font-size: 39px; line-height: 1.7; font-weight: bold; } .fs40_bold { font-size: 40px; line-height: 1.7; font-weight: bold; } /* rem **********************/ /* % **********************/ .fs50 { font-size: 50%; line-height: 1.7; } .fs60 { font-size: 60%; line-height: 1.7; } .fs70 { font-size: 70%; line-height: 1.7; } .fs80 { font-size: 80%; line-height: 1.7; } .fs90 { font-size: 90%; line-height: 1.7; } .fs110 { font-size: 110%; line-height: 1.7; } .fs120 { font-size: 120%; line-height: 1.7; } .fs130 { font-size: 130%; line-height: 1.7; } .fs140 { font-size: 140%; line-height: 1.7; } .fs150 { font-size: 150%; line-height: 1.7; } .fs160 { font-size: 160%; line-height: 1.7; } .fs170 { font-size: 170%; line-height: 1.7; } .fs180 { font-size: 180%; line-height: 1.7; } .fs190 { font-size: 190%; line-height: 1.7; } .fs200 { font-size: 200%; line-height: 1.7; } .fs210 { font-size: 210%; line-height: 1.7; } .fs220 { font-size: 220%; line-height: 1.7; } .fs230 { font-size: 230%; line-height: 1.7; } .fs240 { font-size: 240%; line-height: 1.7; } .fs250 { font-size: 250%; line-height: 1.7; } .fs260 { font-size: 260%; line-height: 1.7; } .fs270 { font-size: 270%; line-height: 1.7; } .fs280 { font-size: 280%; line-height: 1.7; } .fs290 { font-size: 290%; line-height: 1.7; } .fs300 { font-size: 300%; line-height: 1.7; } .fs50_bold { font-size: 50%; line-height: 1.7; font-weight: bold; } .fs60_bold { font-size: 60%; line-height: 1.7; font-weight: bold; } .fs70_bold { font-size: 70%; line-height: 1.7; font-weight: bold; } .fs80_bold { font-size: 80%; line-height: 1.7; font-weight: bold; } .fs90_bold { font-size: 90%; line-height: 1.7; font-weight: bold; } .fs110_bold { font-size: 110%; line-height: 1.7; font-weight: bold; } .fs120_bold { font-size: 120%; line-height: 1.7; font-weight: bold; } .fs130_bold { font-size: 130%; line-height: 1.7; font-weight: bold; } .fs140_bold { font-size: 140%; line-height: 1.7; font-weight: bold; } .fs150_bold { font-size: 150%; line-height: 1.7; font-weight: bold; } .fs160_bold { font-size: 160%; line-height: 1.7; font-weight: bold; } .fs170_bold { font-size: 170%; line-height: 1.7; font-weight: bold; } .fs180_bold { font-size: 180%; line-height: 1.7; font-weight: bold; } .fs190_bold { font-size: 190%; line-height: 1.7; font-weight: bold; } .fs200_bold { font-size: 200%; line-height: 1.7; font-weight: bold; } .fs210_bold { font-size: 210%; line-height: 1.7; font-weight: bold; } .fs220_bold { font-size: 220%; line-height: 1.7; font-weight: bold; } .fs230_bold { font-size: 230%; line-height: 1.7; font-weight: bold; } .fs240_bold { font-size: 240%; line-height: 1.7; font-weight: bold; } .fs250_bold { font-size: 250%; line-height: 1.7; font-weight: bold; } .fs260_bold { font-size: 260%; line-height: 1.7; font-weight: bold; } .fs270_bold { font-size: 270%; line-height: 1.7; font-weight: bold; } .fs280_bold { font-size: 280%; line-height: 1.7; font-weight: bold; } .fs290_bold { font-size: 290%; line-height: 1.7; font-weight: bold; } .fs300_bold { font-size: 300%; line-height: 1.7; font-weight: bold; } @media only screen and (max-width: 690px) { .fs50 { font-size: 30%; line-height: 1.7; } .fs60 { font-size: 40%; line-height: 1.7; } .fs70 { font-size: 50%; line-height: 1.7; } .fs80 { font-size: 60%; line-height: 1.7; } .fs90 { font-size: 70%; line-height: 1.7; } .fs100 { font-size: 90%; line-height: 1.7; } .fs110 { font-size: 90%; line-height: 1.7; } .fs120 { font-size: 100%; line-height: 1.7; } .fs130 { font-size: 110%; line-height: 1.7; } .fs140 { font-size: 120%; line-height: 1.7; } .fs150 { font-size: 130%; line-height: 1.7; } .fs160 { font-size: 140%; line-height: 1.7; } .fs170 { font-size: 150%; line-height: 1.7; } .fs180 { font-size: 160%; line-height: 1.7; } .fs190 { font-size: 170%; line-height: 1.7; } .fs200 { font-size: 180%; line-height: 1.7; } .fs210 { font-size: 190%; line-height: 1.7; } .fs220 { font-size: 200%; line-height: 1.7; } .fs230 { font-size: 210%; line-height: 1.7; } .fs240 { font-size: 220%; line-height: 1.7; } .fs250 { font-size: 230%; line-height: 1.7; } .fs260 { font-size: 240%; line-height: 1.7; } .fs270 { font-size: 250%; line-height: 1.7; } .fs280 { font-size: 260%; line-height: 1.7; } .fs290 { font-size: 270%; line-height: 1.7; } .fs300 { font-size: 280%; line-height: 1.7; } .fs50_bold { font-size: 30%; line-height: 1.7; font-weight: bold; } .fs60_bold { font-size: 40%; line-height: 1.7; font-weight: bold; } .fs70_bold { font-size: 50%; line-height: 1.7; font-weight: bold; } .fs80_bold { font-size: 60%; line-height: 1.7; font-weight: bold; } .fs90_bold { font-size: 70%; line-height: 1.7; font-weight: bold; } .fs100_bold { font-size: 90%; line-height: 1.7; font-weight: bold; } .fs110_bold { font-size: 100%; line-height: 1.7; font-weight: bold; } .fs120_bold { font-size: 100%; line-height: 1.7; font-weight: bold; } .fs130_bold { font-size: 110%; line-height: 1.7; font-weight: bold; } .fs140_bold { font-size: 120%; line-height: 1.7; font-weight: bold; } .fs150_bold { font-size: 130%; line-height: 1.7; font-weight: bold; } .fs160_bold { font-size: 140%; line-height: 1.7; font-weight: bold; } .fs170_bold { font-size: 150%; line-height: 1.7; font-weight: bold; } .fs180_bold { font-size: 160%; line-height: 1.7; font-weight: bold; } .fs190_bold { font-size: 170%; line-height: 1.7; font-weight: bold; } .fs200_bold { font-size: 180%; line-height: 1.7; font-weight: bold; } .fs210_bold { font-size: 190%; line-height: 1.7; font-weight: bold; } .fs220_bold { font-size: 200%; line-height: 1.7; font-weight: bold; } .fs230_bold { font-size: 210%; line-height: 1.7; font-weight: bold; } .fs240_bold { font-size: 220%; line-height: 1.7; font-weight: bold; } .fs250_bold { font-size: 230%; line-height: 1.7; font-weight: bold; } .fs260_bold { font-size: 240%; line-height: 1.7; font-weight: bold; } .fs270_bold { font-size: 250%; line-height: 1.7; font-weight: bold; } .fs280_bold { font-size: 260%; line-height: 1.7; font-weight: bold; } .fs290_bold { font-size: 270%; line-height: 1.7; font-weight: bold; } .fs300_bold { font-size: 280%; line-height: 1.7; font-weight: bold; } } /*-----------------------------------------------------------------*/ /* weight 太さ */ /*-----------------------------------------------------------------*/ .fs_bold { font-weight: bold; } /*-----------------------------------------------------------------*/ /* weight 太さ */ /*-----------------------------------------------------------------*/ .t-default { /* margin bottom **********************/ /* margin left **********************/ /* margin right **********************/ /* margin top only pc **********************/ } .t-default .mt5 { margin-top: 5px; } .t-default .mt10 { margin-top: 10px; } .t-default .mt15 { margin-top: 15px; } .t-default .mt20 { margin-top: 20px; } .t-default .mt25 { margin-top: 25px; } .t-default .mt30 { margin-top: 30px; } .t-default .mt35 { margin-top: 35px; } .t-default .mt40 { margin-top: 40px; } .t-default .mt45 { margin-top: 45px; } .t-default .mt50 { margin-top: 50px; } .t-default .mt55 { margin-top: 55px; } .t-default .mt60 { margin-top: 60px; } .t-default .mt65 { margin-top: 65px; } .t-default .mt70 { margin-top: 70px; } .t-default .mt75 { margin-top: 75px; } .t-default .mt80 { margin-top: 80px; } .t-default .mt85 { margin-top: 85px; } .t-default .mt90 { margin-top: 90px; } .t-default .mt95 { margin-top: 95px; } .t-default .mt100 { margin-top: 100px; } .t-default .mt105 { margin-top: 105px; } .t-default .mt110 { margin-top: 110px; } .t-default .mt115 { margin-top: 115px; } .t-default .mt120 { margin-top: 120px; } .t-default .mt125 { margin-top: 125px; } .t-default .mt130 { margin-top: 130px; } .t-default .mt135 { margin-top: 135px; } .t-default .mt140 { margin-top: 140px; } .t-default .mt145 { margin-top: 145px; } .t-default .mt150 { margin-top: 150px; } .t-default .mt155 { margin-top: 155px; } .t-default .mt160 { margin-top: 160px; } .t-default .mt165 { margin-top: 165px; } .t-default .mt170 { margin-top: 170px; } .t-default .mt175 { margin-top: 175px; } .t-default .mt180 { margin-top: 180px; } .t-default .mt185 { margin-top: 185px; } .t-default .mt190 { margin-top: 190px; } .t-default .mt195 { margin-top: 195px; } .t-default .mt200 { margin-top: 200px; } .t-default .m5 { margin-bottom: 5px; } .t-default .m10 { margin-bottom: 10px; } .t-default .m15 { margin-bottom: 15px; } .t-default .m20 { margin-bottom: 20px; } .t-default .m25 { margin-bottom: 25px; } .t-default .m30 { margin-bottom: 30px; } .t-default .m35 { margin-bottom: 35px; } .t-default .m40 { margin-bottom: 40px; } .t-default .m45 { margin-bottom: 45px; } .t-default .m50 { margin-bottom: 50px; } .t-default .m55 { margin-bottom: 55px; } .t-default .m60 { margin-bottom: 60px; } .t-default .m65 { margin-bottom: 65px; } .t-default .m70 { margin-bottom: 70px; } .t-default .m75 { margin-bottom: 75px; } .t-default .m80 { margin-bottom: 80px; } .t-default .m85 { margin-bottom: 85px; } .t-default .m90 { margin-bottom: 90px; } .t-default .m95 { margin-bottom: 95px; } .t-default .m100 { margin-bottom: 100px; } .t-default .m105 { margin-bottom: 105px; } .t-default .m110 { margin-bottom: 110px; } .t-default .m115 { margin-bottom: 115px; } .t-default .m120 { margin-bottom: 120px; } .t-default .m125 { margin-bottom: 125px; } .t-default .m130 { margin-bottom: 130px; } .t-default .m135 { margin-bottom: 135px; } .t-default .m140 { margin-bottom: 140px; } .t-default .m145 { margin-bottom: 145px; } .t-default .m150 { margin-bottom: 150px; } .t-default .m155 { margin-bottom: 155px; } .t-default .m160 { margin-bottom: 160px; } .t-default .m165 { margin-bottom: 165px; } .t-default .m170 { margin-bottom: 170px; } .t-default .m175 { margin-bottom: 175px; } .t-default .m180 { margin-bottom: 180px; } .t-default .m185 { margin-bottom: 185px; } .t-default .m190 { margin-bottom: 190px; } .t-default .m195 { margin-bottom: 195px; } .t-default .m200 { margin-bottom: 200px; } .t-default .ml1 { margin-left: 1%; } .t-default .ml2 { margin-left: 2%; } .t-default .ml3 { margin-left: 3%; } .t-default .ml4 { margin-left: 4%; } .t-default .ml5 { margin-left: 5%; } .t-default .ml6 { margin-left: 6%; } .t-default .ml7 { margin-left: 7%; } .t-default .ml8 { margin-left: 8%; } .t-default .ml9 { margin-left: 9%; } .t-default .ml10 { margin-left: 10%; } .t-default .ml11 { margin-left: 11%; } .t-default .ml12 { margin-left: 12%; } .t-default .ml13 { margin-left: 13%; } .t-default .ml14 { margin-left: 14%; } .t-default .ml15 { margin-left: 15%; } .t-default .ml16 { margin-left: 16%; } .t-default .ml17 { margin-left: 17%; } .t-default .ml18 { margin-left: 18%; } .t-default .ml19 { margin-left: 19%; } .t-default .ml20 { margin-left: 20%; } .t-default .ml21 { margin-left: 21%; } .t-default .ml22 { margin-left: 22%; } .t-default .ml23 { margin-left: 23%; } .t-default .ml24 { margin-left: 24%; } .t-default .ml25 { margin-left: 25%; } .t-default .ml26 { margin-left: 26%; } .t-default .ml27 { margin-left: 27%; } .t-default .ml28 { margin-left: 28%; } .t-default .ml29 { margin-left: 29%; } .t-default .ml30 { margin-left: 30%; } .t-default .ml31 { margin-left: 31%; } .t-default .ml32 { margin-left: 32%; } .t-default .ml33 { margin-left: 33%; } .t-default .ml34 { margin-left: 34%; } .t-default .ml35 { margin-left: 35%; } .t-default .ml36 { margin-left: 36%; } .t-default .ml37 { margin-left: 37%; } .t-default .ml38 { margin-left: 38%; } .t-default .ml39 { margin-left: 39%; } .t-default .ml40 { margin-left: 40%; } .t-default .ml41 { margin-left: 41%; } .t-default .ml42 { margin-left: 42%; } .t-default .ml43 { margin-left: 43%; } .t-default .ml44 { margin-left: 44%; } .t-default .ml45 { margin-left: 45%; } .t-default .ml46 { margin-left: 46%; } .t-default .ml47 { margin-left: 47%; } .t-default .ml48 { margin-left: 48%; } .t-default .ml49 { margin-left: 49%; } .t-default .ml50 { margin-left: 50%; } .t-default .mr1 { margin-right: 1%; } .t-default .mr2 { margin-right: 2%; } .t-default .mr3 { margin-right: 3%; } .t-default .mr4 { margin-right: 4%; } .t-default .mr5 { margin-right: 5%; } .t-default .mr6 { margin-right: 6%; } .t-default .mr7 { margin-right: 7%; } .t-default .mr8 { margin-right: 8%; } .t-default .mr9 { margin-right: 9%; } .t-default .mr10 { margin-right: 10%; } .t-default .mr11 { margin-right: 11%; } .t-default .mr12 { margin-right: 12%; } .t-default .mr13 { margin-right: 13%; } .t-default .mr14 { margin-right: 14%; } .t-default .mr15 { margin-right: 15%; } .t-default .mr16 { margin-right: 16%; } .t-default .mr17 { margin-right: 17%; } .t-default .mr18 { margin-right: 18%; } .t-default .mr19 { margin-right: 19%; } .t-default .mr20 { margin-right: 20%; } .t-default .mr21 { margin-right: 21%; } .t-default .mr22 { margin-right: 22%; } .t-default .mr23 { margin-right: 23%; } .t-default .mr24 { margin-right: 24%; } .t-default .mr25 { margin-right: 25%; } .t-default .mr26 { margin-right: 26%; } .t-default .mr27 { margin-right: 27%; } .t-default .mr28 { margin-right: 28%; } .t-default .mr29 { margin-right: 29%; } .t-default .mr30 { margin-right: 30%; } .t-default .mr31 { margin-right: 31%; } .t-default .mr32 { margin-right: 32%; } .t-default .mr33 { margin-right: 33%; } .t-default .mr34 { margin-right: 34%; } .t-default .mr35 { margin-right: 35%; } .t-default .mr36 { margin-right: 36%; } .t-default .mr37 { margin-right: 37%; } .t-default .mr38 { margin-right: 38%; } .t-default .mr39 { margin-right: 39%; } .t-default .mr40 { margin-right: 40%; } .t-default .mr41 { margin-right: 41%; } .t-default .mr42 { margin-right: 42%; } .t-default .mr43 { margin-right: 43%; } .t-default .mr44 { margin-right: 44%; } .t-default .mr45 { margin-right: 45%; } .t-default .mr46 { margin-right: 46%; } .t-default .mr47 { margin-right: 47%; } .t-default .mr48 { margin-right: 48%; } .t-default .mr49 { margin-right: 49%; } .t-default .mr50 { margin-right: 50%; } .t-default .mt5_tablet { margin-top: 5px; } .t-default .mt10_pc { margin-top: 10px; } .t-default .mt15_pc { margin-top: 15px; } .t-default .mt20_pc { margin-top: 20px; } .t-default .mt25_pc { margin-top: 25px; } .t-default .mt30_pc { margin-top: 30px; } .t-default .mt35_pc { margin-top: 35px; } .t-default .mt40_pc { margin-top: 40px; } .t-default .mt45_pc { margin-top: 45px; } .t-default .mt50_pc { margin-top: 50px; } .t-default .mt55_pc { margin-top: 55px; } .t-default .mt60_pc { margin-top: 60px; } .t-default .mt65_pc { margin-top: 65px; } .t-default .mt70_pc { margin-top: 70px; } .t-default .mt75_pc { margin-top: 75px; } .t-default .mt80_pc { margin-top: 80px; } .t-default .mt85_pc { margin-top: 85px; } .t-default .mt90_pc { margin-top: 90px; } .t-default .mt95_pc { margin-top: 95px; } .t-default .mt100_pc { margin-top: 100px; } .t-default .mt105_pc { margin-top: 105px; } .t-default .mt110_pc { margin-top: 110px; } .t-default .mt115_pc { margin-top: 115px; } .t-default .mt120_pc { margin-top: 120px; } .t-default .mt125_pc { margin-top: 125px; } .t-default .mt130_pc { margin-top: 130px; } .t-default .mt135_pc { margin-top: 135px; } .t-default .mt140_pc { margin-top: 140px; } .t-default .mt145_pc { margin-top: 145px; } .t-default .mt150_pc { margin-top: 150px; } .t-default .mt155_pc { margin-top: 155px; } .t-default .mt160_pc { margin-top: 160px; } .t-default .mt165_pc { margin-top: 165px; } .t-default .mt170_pc { margin-top: 170px; } .t-default .mt175_pc { margin-top: 175px; } .t-default .mt180_pc { margin-top: 180px; } .t-default .mt185_pc { margin-top: 185px; } .t-default .mt190_pc { margin-top: 190px; } .t-default .mt195_pc { margin-top: 195px; } .t-default .mt200_pc { margin-top: 200px; } .mt5 { margin-top: 5px; } .mt10 { margin-top: 10px; } .mt15 { margin-top: 15px; } .mt20 { margin-top: 20px; } .mt25 { margin-top: 25px; } .mt30 { margin-top: 30px; } .mt35 { margin-top: 35px; } .mt40 { margin-top: 40px; } .mt45 { margin-top: 45px; } .mt50 { margin-top: 50px; } .mt55 { margin-top: 55px; } .mt60 { margin-top: 60px; } .mt65 { margin-top: 65px; } .mt70 { margin-top: 70px; } .mt75 { margin-top: 75px; } .mt80 { margin-top: 80px; } .mt85 { margin-top: 85px; } .mt90 { margin-top: 90px; } .mt95 { margin-top: 95px; } .mt100 { margin-top: 100px; } .mt105 { margin-top: 105px; } .mt110 { margin-top: 110px; } .mt115 { margin-top: 115px; } .mt120 { margin-top: 120px; } .mt125 { margin-top: 125px; } .mt130 { margin-top: 130px; } .mt135 { margin-top: 135px; } .mt140 { margin-top: 140px; } .mt145 { margin-top: 145px; } .mt150 { margin-top: 150px; } .mt155 { margin-top: 155px; } .mt160 { margin-top: 160px; } .mt165 { margin-top: 165px; } .mt170 { margin-top: 170px; } .mt175 { margin-top: 175px; } .mt180 { margin-top: 180px; } .mt185 { margin-top: 185px; } .mt190 { margin-top: 190px; } .mt195 { margin-top: 195px; } .mt200 { margin-top: 200px; } /* margin bottom **********************/ .m5 { margin-bottom: 5px; } .m10 { margin-bottom: 10px; } .m15 { margin-bottom: 15px; } .m20 { margin-bottom: 20px; } .m25 { margin-bottom: 25px; } .m30 { margin-bottom: 30px; } .m35 { margin-bottom: 35px; } .m40 { margin-bottom: 40px; } .m45 { margin-bottom: 45px; } .m50 { margin-bottom: 50px; } .m55 { margin-bottom: 55px; } .m60 { margin-bottom: 60px; } .m65 { margin-bottom: 65px; } .m70 { margin-bottom: 70px; } .m75 { margin-bottom: 75px; } .m80 { margin-bottom: 80px; } .m85 { margin-bottom: 85px; } .m90 { margin-bottom: 90px; } .m95 { margin-bottom: 95px; } .m100 { margin-bottom: 100px; } .m105 { margin-bottom: 105px; } .m110 { margin-bottom: 110px; } .m115 { margin-bottom: 115px; } .m120 { margin-bottom: 120px; } .m125 { margin-bottom: 125px; } .m130 { margin-bottom: 130px; } .m135 { margin-bottom: 135px; } .m140 { margin-bottom: 140px; } .m145 { margin-bottom: 145px; } .m150 { margin-bottom: 150px; } .m155 { margin-bottom: 155px; } .m160 { margin-bottom: 160px; } .m165 { margin-bottom: 165px; } .m170 { margin-bottom: 170px; } .m175 { margin-bottom: 175px; } .m180 { margin-bottom: 180px; } .m185 { margin-bottom: 185px; } .m190 { margin-bottom: 190px; } .m195 { margin-bottom: 195px; } .m200 { margin-bottom: 200px; } /* margin left **********************/ .ml1 { margin-left: 1%; } .ml2 { margin-left: 2%; } .ml3 { margin-left: 3%; } .ml4 { margin-left: 4%; } .ml5 { margin-left: 5%; } .ml6 { margin-left: 6%; } .ml7 { margin-left: 7%; } .ml8 { margin-left: 8%; } .ml9 { margin-left: 9%; } .ml10 { margin-left: 10%; } .ml11 { margin-left: 11%; } .ml12 { margin-left: 12%; } .ml13 { margin-left: 13%; } .ml14 { margin-left: 14%; } .ml15 { margin-left: 15%; } .ml16 { margin-left: 16%; } .ml17 { margin-left: 17%; } .ml18 { margin-left: 18%; } .ml19 { margin-left: 19%; } .ml20 { margin-left: 20%; } .ml21 { margin-left: 21%; } .ml22 { margin-left: 22%; } .ml23 { margin-left: 23%; } .ml24 { margin-left: 24%; } .ml25 { margin-left: 25%; } .ml26 { margin-left: 26%; } .ml27 { margin-left: 27%; } .ml28 { margin-left: 28%; } .ml29 { margin-left: 29%; } .ml30 { margin-left: 30%; } .ml31 { margin-left: 31%; } .ml32 { margin-left: 32%; } .ml33 { margin-left: 33%; } .ml34 { margin-left: 34%; } .ml35 { margin-left: 35%; } .ml36 { margin-left: 36%; } .ml37 { margin-left: 37%; } .ml38 { margin-left: 38%; } .ml39 { margin-left: 39%; } .ml40 { margin-left: 40%; } .ml41 { margin-left: 41%; } .ml42 { margin-left: 42%; } .ml43 { margin-left: 43%; } .ml44 { margin-left: 44%; } .ml45 { margin-left: 45%; } .ml46 { margin-left: 46%; } .ml47 { margin-left: 47%; } .ml48 { margin-left: 48%; } .ml49 { margin-left: 49%; } .ml50 { margin-left: 50%; } /* margin right **********************/ .mr1 { margin-right: 1%; } .mr2 { margin-right: 2%; } .mr3 { margin-right: 3%; } .mr4 { margin-right: 4%; } .mr5 { margin-right: 5%; } .mr6 { margin-right: 6%; } .mr7 { margin-right: 7%; } .mr8 { margin-right: 8%; } .mr9 { margin-right: 9%; } .mr10 { margin-right: 10%; } .mr11 { margin-right: 11%; } .mr12 { margin-right: 12%; } .mr13 { margin-right: 13%; } .mr14 { margin-right: 14%; } .mr15 { margin-right: 15%; } .mr16 { margin-right: 16%; } .mr17 { margin-right: 17%; } .mr18 { margin-right: 18%; } .mr19 { margin-right: 19%; } .mr20 { margin-right: 20%; } .mr21 { margin-right: 21%; } .mr22 { margin-right: 22%; } .mr23 { margin-right: 23%; } .mr24 { margin-right: 24%; } .mr25 { margin-right: 25%; } .mr26 { margin-right: 26%; } .mr27 { margin-right: 27%; } .mr28 { margin-right: 28%; } .mr29 { margin-right: 29%; } .mr30 { margin-right: 30%; } .mr31 { margin-right: 31%; } .mr32 { margin-right: 32%; } .mr33 { margin-right: 33%; } .mr34 { margin-right: 34%; } .mr35 { margin-right: 35%; } .mr36 { margin-right: 36%; } .mr37 { margin-right: 37%; } .mr38 { margin-right: 38%; } .mr39 { margin-right: 39%; } .mr40 { margin-right: 40%; } .mr41 { margin-right: 41%; } .mr42 { margin-right: 42%; } .mr43 { margin-right: 43%; } .mr44 { margin-right: 44%; } .mr45 { margin-right: 45%; } .mr46 { margin-right: 46%; } .mr47 { margin-right: 47%; } .mr48 { margin-right: 48%; } .mr49 { margin-right: 49%; } .mr50 { margin-right: 50%; } /* margin top only pc **********************/ .mt5_pc { margin-top: 5px; } .mt10_pc { margin-top: 10px; } .mt15_pc { margin-top: 15px; } .mt20_pc { margin-top: 20px; } .mt25_pc { margin-top: 25px; } .mt30_pc { margin-top: 30px; } .mt35_pc { margin-top: 35px; } .mt40_pc { margin-top: 40px; } .mt45_pc { margin-top: 45px; } .mt50_pc { margin-top: 50px; } .mt55_pc { margin-top: 55px; } .mt60_pc { margin-top: 60px; } .mt65_pc { margin-top: 65px; } .mt70_pc { margin-top: 70px; } .mt75_pc { margin-top: 75px; } .mt80_pc { margin-top: 80px; } .mt85_pc { margin-top: 85px; } .mt90_pc { margin-top: 90px; } .mt95_pc { margin-top: 95px; } .mt100_pc { margin-top: 100px; } .mt105_pc { margin-top: 105px; } .mt110_pc { margin-top: 110px; } .mt115_pc { margin-top: 115px; } .mt120_pc { margin-top: 120px; } .mt125_pc { margin-top: 125px; } .mt130_pc { margin-top: 130px; } .mt135_pc { margin-top: 135px; } .mt140_pc { margin-top: 140px; } .mt145_pc { margin-top: 145px; } .mt150_pc { margin-top: 150px; } .mt155_pc { margin-top: 155px; } .mt160_pc { margin-top: 160px; } .mt165_pc { margin-top: 165px; } .mt170_pc { margin-top: 170px; } .mt175_pc { margin-top: 175px; } .mt180_pc { margin-top: 180px; } .mt185_pc { margin-top: 185px; } .mt190_pc { margin-top: 190px; } .mt195_pc { margin-top: 195px; } .mt200_pc { margin-top: 200px; } @media only screen and (max-width: 979px) { .t-default .mt5_pc, .t-default .mt10_pc, .t-default .mt15_pc, .t-default .mt20_pc, .t-default .mt25_pc, .t-default .mt30_pc, .t-default .mt35_pc, .t-default .mt40_pc, .t-default .mt45_pc, .t-default .mt50_pc, .t-default .mt55_pc, .t-default .mt60_pc, .t-default .mt65_pc, .t-default .mt70_pc, .t-default .mt75_pc, .t-default .mt80_pc, .t-default .mt85_pc, .t-default .mt90_pc, .t-default .mt95_pc, .t-default .mt100_pc, .t-default .mt105_pc, .t-default .mt110_pc, .t-default .mt115_pc, .t-default .mt120_pc, .t-default .mt125_pc, .t-default .mt130_pc, .t-default .mt135_pc, .t-default .mt140_pc, .t-default .mt145_pc, .t-default .mt150_pc, .t-default .mt155_pc, .t-default .mt160_pc, .t-default .mt165_pc, .t-default .mt170_pc, .t-default .mt175_pc, .t-default .mt180_pc, .t-default .mt185_pc, .t-default .mt190_pc, .t-default .mt190_pc, .t-default .mt195_pc, .t-default .mt200_pc { margin-top: 0; } } @media only screen and (max-width: 979px) { .mt5_pc, .mt10_pc, .mt15_pc, .mt20_pc, .mt25_pc, .mt30_pc, .mt35_pc, .mt40_pc, .mt45_pc, .mt50_pc, .mt55_pc, .mt60_pc, .mt65_pc, .mt70_pc, .mt75_pc, .mt80_pc, .mt85_pc, .mt90_pc, .mt95_pc, .mt100_pc, .mt105_pc, .mt110_pc, .mt115_pc, .mt120_pc, .mt125_pc, .mt130_pc, .mt135_pc, .mt140_pc, .mt145_pc, .mt150_pc, .mt155_pc, .mt160_pc, .mt165_pc, .mt170_pc, .mt175_pc, .mt180_pc, .mt185_pc, .mt190_pc, .mt190_pc, .mt195_pc, .mt200_pc { margin-top: 0; } } /* margin bottom only pc **********************/ .t-default .m5_pc { margin-bottom: 5px; } .t-default .m10_pc { margin-bottom: 10px; } .t-default .m15_pc { margin-bottom: 15px; } .t-default .m20_pc { margin-bottom: 20px; } .t-default .m25_pc { margin-bottom: 25px; } .t-default .m30_pc { margin-bottom: 30px; } .t-default .m35_pc { margin-bottom: 35px; } .t-default .m40_pc { margin-bottom: 40px; } .t-default .m45_pc { margin-bottom: 45px; } .t-default .m50_pc { margin-bottom: 50px; } .t-default .m55_pc { margin-bottom: 55px; } .t-default .m60_pc { margin-bottom: 60px; } .t-default .m65_pc { margin-bottom: 65px; } .t-default .m70_pc { margin-bottom: 70px; } .t-default .m75_pc { margin-bottom: 75px; } .t-default .m80_pc { margin-bottom: 80px; } .t-default .m85_pc { margin-bottom: 85px; } .t-default .m90_pc { margin-bottom: 90px; } .t-default .m95_pc { margin-bottom: 95px; } .t-default .m100_pc { margin-bottom: 100px; } .t-default .m105_pc { margin-bottom: 105px; } .t-default .m110_pc { margin-bottom: 110px; } .t-default .m115_pc { margin-bottom: 115px; } .t-default .m120_pc { margin-bottom: 120px; } .t-default .m125_pc { margin-bottom: 125px; } .t-default .m130_pc { margin-bottom: 130px; } .t-default .m135_pc { margin-bottom: 135px; } .t-default .m140_pc { margin-bottom: 140px; } .t-default .m145_pc { margin-bottom: 145px; } .t-default .m150_pc { margin-bottom: 150px; } .t-default .m155_pc { margin-bottom: 155px; } .t-default .m160_pc { margin-bottom: 160px; } .t-default .m165_pc { margin-bottom: 165px; } .t-default .m170_pc { margin-bottom: 170px; } .t-default .m175_pc { margin-bottom: 175px; } .t-default .m180_pc { margin-bottom: 180px; } .t-default .m185_pc { margin-bottom: 185px; } .t-default .m190_pc { margin-bottom: 190px; } .t-default .m195_pc { margin-bottom: 195px; } .t-default .m200_pc { margin-bottom: 200px; } .t-default .m210_pc { margin-bottom: 210px; } .t-default .m220_pc { margin-bottom: 220px; } .t-default .m230_pc { margin-bottom: 230px; } .t-default .m240_pc { margin-bottom: 240px; } .t-default .m250_pc { margin-bottom: 250px; } .t-default .m260_pc { margin-bottom: 260px; } .t-default .m270_pc { margin-bottom: 270px; } .t-default .m280_pc { margin-bottom: 280px; } .t-default .m290_pc { margin-bottom: 290px; } .t-default .m300_pc { margin-bottom: 300px; } @media only screen and (max-width: 979px) { .t-default .m5_pc, .t-default .m10_pc, .t-default .m15_pc, .t-default .m20_pc, .t-default .m25_pc, .t-default .m30_pc, .t-default .m35_pc, .t-default .m40_pc, .t-default .m45_pc, .t-default .m50_pc, .t-default .m55_pc, .t-default .m60_pc, .t-default .m65_pc, .t-default .m70_pc, .t-default .m75_pc, .t-default .m80_pc, .t-default .m85_pc, .t-default .m80_pc, .t-default .m95_pc, .t-default .m100_pc.m105_pc, .t-default .m110_pc, .t-default .m115_pc, .t-default .m120_pc, .t-default .m125_pc, .t-default .m130_pc, .t-default .m135_pc, .t-default .m140_pc, .t-default .m145_pc, .t-default .m150_pc, .t-default .m155_pc, .t-default .m160_pc, .t-default .m165_pc, .t-default .m170_pc, .t-default .m175_pc, .t-default .m180_pc, .t-default .m185_pc, .t-default .m190_pc, .t-default .m195_pc, .t-default .m200_pc, .t-default .m210_pc, .t-default .m220_pc, .t-default .m230_pc, .t-default .m240_pc, .t-default .m250_pc, .t-default .m260_pc, .t-default .m270_pc, .t-default .m270_pc, .t-default .m280_pc, .t-default .m280_pc, .t-default .m290_pc, .t-default .m300_pc { margin-bottom: 0; } } .m5_pc { margin-bottom: 5px; } .m10_pc { margin-bottom: 10px; } .m15_pc { margin-bottom: 15px; } .m20_pc { margin-bottom: 20px; } .m25_pc { margin-bottom: 25px; } .m30_pc { margin-bottom: 30px; } .m35_pc { margin-bottom: 35px; } .m40_pc { margin-bottom: 40px; } .m45_pc { margin-bottom: 45px; } .m50_pc { margin-bottom: 50px; } .m55_pc { margin-bottom: 55px; } .m60_pc { margin-bottom: 60px; } .m65_pc { margin-bottom: 65px; } .m70_pc { margin-bottom: 70px; } .m75_pc { margin-bottom: 75px; } .m80_pc { margin-bottom: 80px; } .m85_pc { margin-bottom: 85px; } .m90_pc { margin-bottom: 90px; } .m95_pc { margin-bottom: 95px; } .m100_pc { margin-bottom: 100px; } .m105_pc { margin-bottom: 105px; } .m110_pc { margin-bottom: 110px; } .m115_pc { margin-bottom: 115px; } .m120_pc { margin-bottom: 120px; } .m125_pc { margin-bottom: 125px; } .m130_pc { margin-bottom: 130px; } .m135_pc { margin-bottom: 135px; } .m140_pc { margin-bottom: 140px; } .m145_pc { margin-bottom: 145px; } .m150_pc { margin-bottom: 150px; } .m155_pc { margin-bottom: 155px; } .m160_pc { margin-bottom: 160px; } .m165_pc { margin-bottom: 165px; } .m170_pc { margin-bottom: 170px; } .m175_pc { margin-bottom: 175px; } .m180_pc { margin-bottom: 180px; } .m185_pc { margin-bottom: 185px; } .m190_pc { margin-bottom: 190px; } .m195_pc { margin-bottom: 195px; } .m200_pc { margin-bottom: 200px; } .m210_pc { margin-bottom: 210px; } .m220_pc { margin-bottom: 220px; } .m230_pc { margin-bottom: 230px; } .m240_pc { margin-bottom: 240px; } .m250_pc { margin-bottom: 250px; } .m260_pc { margin-bottom: 260px; } .m270_pc { margin-bottom: 270px; } .m280_pc { margin-bottom: 280px; } .m290_pc { margin-bottom: 290px; } .m300_pc { margin-bottom: 300px; } @media only screen and (max-width: 979px) { .m5_pc, .m10_pc, .m15_pc, .m20_pc, .m25_pc, .m30_pc, .m35_pc, .m40_pc, .m45_pc, .m50_pc, .m55_pc, .m60_pc, .m65_pc, .m70_pc, .m75_pc, .m80_pc, .m85_pc, .m80_pc, .m95_pc, .m100_pc.m105_pc, .m110_pc, .m115_pc, .m120_pc, .m125_pc, .m130_pc, .m135_pc, .m140_pc, .m145_pc, .m150_pc, .m155_pc, .m160_pc, .m165_pc, .m170_pc, .m175_pc, .m180_pc, .m185_pc, .m190_pc, .m195_pc, .m200_pc, .m210_pc, .m220_pc, .m230_pc, .m240_pc, .m250_pc, .m260_pc, .m270_pc, .m270_pc, .m280_pc, .m280_pc, .m290_pc, .m300_pc { margin-bottom: 0; } } @media only screen and (max-width: 979px) { /* margin top only tablet **********************/ .t-default { /* margin bottom only tablet **********************/ } .t-default .mt5_tablet { margin-top: 5px; } .t-default .mt10_tablet { margin-top: 10px; } .t-default .mt15_tablet { margin-top: 15px; } .t-default .mt20_tablet { margin-top: 20px; } .t-default .mt25_tablet { margin-top: 25px; } .t-default .mt30_tablet { margin-top: 30px; } .t-default .mt35_tablet { margin-top: 35px; } .t-default .mt40_tablet { margin-top: 40px; } .t-default .mt45_tablet { margin-top: 45px; } .t-default .mt50_tablet { margin-top: 50px; } .t-default .mt55_tablet { margin-top: 55px; } .t-default .mt60_tablet { margin-top: 60px; } .t-default .mt65_tablet { margin-top: 65px; } .t-default .mt70_tablet { margin-top: 70px; } .t-default .mt75_tablet { margin-top: 75px; } .t-default .mt80_tablet { margin-top: 80px; } .t-default .mt85_tablet { margin-top: 85px; } .t-default .mt90_tablet { margin-top: 90px; } .t-default .mt95_tablet { margin-top: 95px; } .t-default .mt100_tablet { margin-top: 100px; } .t-default .m5_tablet { margin-bottom: 5px; } .t-default .m10_tablet { margin-bottom: 10px; } .t-default .m15_tablet { margin-bottom: 15px; } .t-default .m20_tablet { margin-bottom: 20px; } .t-default .m25_tablet { margin-bottom: 25px; } .t-default .m30_tablet { margin-bottom: 30px; } .t-default .m35_tablet { margin-bottom: 35px; } .t-default .m40_tablet { margin-bottom: 40px; } .t-default .m45_tablet { margin-bottom: 45px; } .t-default .m50_tablet { margin-bottom: 50px; } .t-default .m55_tablet { margin-bottom: 55px; } .t-default .m60_tablet { margin-bottom: 60px; } .t-default .m65_tablet { margin-bottom: 65px; } .t-default .m70_tablet { margin-bottom: 70px; } .t-default .m75_tablet { margin-bottom: 75px; } .t-default .m80_tablet { margin-bottom: 80px; } .t-default .m85_tablet { margin-bottom: 85px; } .t-default .m90_tablet { margin-bottom: 90px; } .t-default .m95_tablet { margin-bottom: 95px; } .t-default .m100_tablet { margin-bottom: 100px; } .t-default .m110_tablet { margin-bottom: 110px; } .t-default .m120_tablet { margin-bottom: 120px; } .t-default .m130_tablet { margin-bottom: 130px; } .t-default .m140_tablet { margin-bottom: 140px; } .t-default .m150_tablet { margin-bottom: 150px; } .t-default .m160_tablet { margin-bottom: 160px; } .t-default .m170_tablet { margin-bottom: 170px; } .t-default .m180_tablet { margin-bottom: 180px; } .t-default .m190_tablet { margin-bottom: 190px; } .t-default .m200_tablet { margin-bottom: 200px; } .mt5_tablet { margin-top: 5px; } .mt10_tablet { margin-top: 10px; } .mt15_tablet { margin-top: 15px; } .mt20_tablet { margin-top: 20px; } .mt25_tablet { margin-top: 25px; } .mt30_tablet { margin-top: 30px; } .mt35_tablet { margin-top: 35px; } .mt40_tablet { margin-top: 40px; } .mt45_tablet { margin-top: 45px; } .mt50_tablet { margin-top: 50px; } .mt55_tablet { margin-top: 55px; } .mt60_tablet { margin-top: 60px; } .mt65_tablet { margin-top: 65px; } .mt70_tablet { margin-top: 70px; } .mt75_tablet { margin-top: 75px; } .mt80_tablet { margin-top: 80px; } .mt85_tablet { margin-top: 85px; } .mt90_tablet { margin-top: 90px; } .mt95_tablet { margin-top: 95px; } .mt100_tablet { margin-top: 100px; } /* margin bottom only tablet **********************/ .m5_tablet { margin-bottom: 5px; } .m10_tablet { margin-bottom: 10px; } .m15_tablet { margin-bottom: 15px; } .m20_tablet { margin-bottom: 20px; } .m25_tablet { margin-bottom: 25px; } .m30_tablet { margin-bottom: 30px; } .m35_tablet { margin-bottom: 35px; } .m40_tablet { margin-bottom: 40px; } .m45_tablet { margin-bottom: 45px; } .m50_tablet { margin-bottom: 50px; } .m55_tablet { margin-bottom: 55px; } .m60_tablet { margin-bottom: 60px; } .m65_tablet { margin-bottom: 65px; } .m70_tablet { margin-bottom: 70px; } .m75_tablet { margin-bottom: 75px; } .m80_tablet { margin-bottom: 80px; } .m85_tablet { margin-bottom: 85px; } .m90_tablet { margin-bottom: 90px; } .m95_tablet { margin-bottom: 95px; } .m100_tablet { margin-bottom: 100px; } .m110_tablet { margin-bottom: 110px; } .m120_tablet { margin-bottom: 120px; } .m130_tablet { margin-bottom: 130px; } .m140_tablet { margin-bottom: 140px; } .m150_tablet { margin-bottom: 150px; } .m160_tablet { margin-bottom: 160px; } .m170_tablet { margin-bottom: 170px; } .m180_tablet { margin-bottom: 180px; } .m190_tablet { margin-bottom: 190px; } .m200_tablet { margin-bottom: 200px; } } @media only screen and (max-width: 690px) { /* margin top only tablet **********************/ .t-default .mt5_tablet { margin-top: 0; } .t-default .mt10_tablet { margin-top: 0; } .t-default .mt15_tablet { margin-top: 0; } .t-default .mt20_tablet { margin-top: 0; } .t-default .mt25_tablet { margin-top: 0; } .t-default .mt30_tablet { margin-top: 0; } .t-default .mt35_tablet { margin-top: 0; } .t-default .mt40_tablet { margin-top: 0; } .t-default .mt45_tablet { margin-top: 0; } .t-default .mt50_tablet { margin-top: 0; } .t-default .mt55_tablet { margin-top: 0; } .t-default .mt60_tablet { margin-top: 0; } .t-default .mt65_tablet { margin-top: 0; } .t-default .mt70_tablet { margin-top: 0; } .t-default .mt75_tablet { margin-top: 0; } .t-default .mt80_tablet { margin-top: 0; } .t-default .mt85_tablet { margin-top: 0; } .t-default .mt90_tablet { margin-top: 0; } .t-default .mt95_tablet { margin-top: 0; } .t-default .mt100_tablet { margin-top: 0; } .mt5_tablet { margin-top: 0; } .mt10_tablet { margin-top: 0; } .mt15_tablet { margin-top: 0; } .mt20_tablet { margin-top: 0; } .mt25_tablet { margin-top: 0; } .mt30_tablet { margin-top: 0; } .mt35_tablet { margin-top: 0; } .mt40_tablet { margin-top: 0; } .mt45_tablet { margin-top: 0; } .mt50_tablet { margin-top: 0; } .mt55_tablet { margin-top: 0; } .mt60_tablet { margin-top: 0; } .mt65_tablet { margin-top: 0; } .mt70_tablet { margin-top: 0; } .mt75_tablet { margin-top: 0; } .mt80_tablet { margin-top: 0; } .mt85_tablet { margin-top: 0; } .mt90_tablet { margin-top: 0; } .mt95_tablet { margin-top: 0; } .mt100_tablet { margin-top: 0; } /* margin bottom only tablet **********************/ .t-default .m5_tablet { margin-bottom: 0; } .t-default .m10_tablet { margin-bottom: 0; } .t-default .m15_tablet { margin-bottom: 0; } .t-default .m20_tablet { margin-bottom: 0; } .t-default .m25_tablet { margin-bottom: 0; } .t-default .m30_tablet { margin-bottom: 0; } .t-default .m35_tablet { margin-bottom: 0; } .t-default .m40_tablet { margin-bottom: 0; } .t-default .m45_tablet { margin-bottom: 0; } .t-default .m50_tablet { margin-bottom: 0; } .t-default .m55_tablet { margin-bottom: 0; } .t-default .m60_tablet { margin-bottom: 0; } .t-default .m65_tablet { margin-bottom: 0; } .t-default .m70_tablet { margin-bottom: 0; } .t-default .m75_tablet { margin-bottom: 0; } .t-default .m80_tablet { margin-bottom: 0; } .t-default .m85_tablet { margin-bottom: 0; } .t-default .m90_tablet { margin-bottom: 0; } .t-default .m95_tablet { margin-bottom: 0; } .t-default .m100_tablet { margin-bottom: 0; } .t-default .m110_tablet { margin-bottom: 0; } .t-default .m120_tablet { margin-bottom: 0; } .t-default .m130_tablet { margin-bottom: 0; } .t-default .m140_tablet { margin-bottom: 0; } .t-default .m150_tablet { margin-bottom: 0; } .t-default .m160_tablet { margin-bottom: 0; } .t-default .m170_tablet { margin-bottom: 0; } .t-default .m180_tablet { margin-bottom: 0; } .t-default .m190_tablet { margin-bottom: 0; } .t-default .m200_tablet { margin-bottom: 0; } .m5_tablet { margin-bottom: 0; } .m10_tablet { margin-bottom: 0; } .m15_tablet { margin-bottom: 0; } .m20_tablet { margin-bottom: 0; } .m25_tablet { margin-bottom: 0; } .m30_tablet { margin-bottom: 0; } .m35_tablet { margin-bottom: 0; } .m40_tablet { margin-bottom: 0; } .m45_tablet { margin-bottom: 0; } .m50_tablet { margin-bottom: 0; } .m55_tablet { margin-bottom: 0; } .m60_tablet { margin-bottom: 0; } .m65_tablet { margin-bottom: 0; } .m70_tablet { margin-bottom: 0; } .m75_tablet { margin-bottom: 0; } .m80_tablet { margin-bottom: 0; } .m85_tablet { margin-bottom: 0; } .m90_tablet { margin-bottom: 0; } .m95_tablet { margin-bottom: 0; } .m100_tablet { margin-bottom: 0; } .m110_tablet { margin-bottom: 0; } .m120_tablet { margin-bottom: 0; } .m130_tablet { margin-bottom: 0; } .m140_tablet { margin-bottom: 0; } .m150_tablet { margin-bottom: 0; } .m160_tablet { margin-bottom: 0; } .m170_tablet { margin-bottom: 0; } .m180_tablet { margin-bottom: 0; } .m190_tablet { margin-bottom: 0; } .m200_tablet { margin-bottom: 0; } } @media only screen and (max-width: 690px) { /* margin top only smartphone **********************/ .t-default { /* margin bottom only tablet **********************/ } .t-default .mt5_sp { margin-top: 5px; } .t-default .mt10_sp { margin-top: 10px; } .t-default .mt15_sp { margin-top: 15px; } .t-default .mt20_sp { margin-top: 20px; } .t-default .mt25_sp { margin-top: 25px; } .t-default .mt30_sp { margin-top: 30px; } .t-default .mt35_sp { margin-top: 35px; } .t-default .mt40_sp { margin-top: 40px; } .t-default .mt45_sp { margin-top: 45px; } .t-default .mt50_sp { margin-top: 50px; } .t-default .mt55_sp { margin-top: 55px; } .t-default .mt60_sp { margin-top: 60px; } .t-default .mt65_sp { margin-top: 65px; } .t-default .mt70_sp { margin-top: 70px; } .t-default .mt75_sp { margin-top: 75px; } .t-default .mt80_sp { margin-top: 80px; } .t-default .mt85_sp { margin-top: 85px; } .t-default .mt90_sp { margin-top: 90px; } .t-default .mt95_sp { margin-top: 95px; } .t-default .mt100_sp { margin-top: 100px; } .t-default .m5_sp { margin-bottom: 5px; } .t-default .m10_sp { margin-bottom: 10px; } .t-default .m15_sp { margin-bottom: 15px; } .t-default .m20_sp { margin-bottom: 20px; } .t-default .m25_sp { margin-bottom: 25px; } .t-default .m30_sp { margin-bottom: 30px; } .t-default .m35_sp { margin-bottom: 35px; } .t-default .m40_sp { margin-bottom: 40px; } .t-default .m45_sp { margin-bottom: 45px; } .t-default .m50_sp { margin-bottom: 50px; } .t-default .m55_sp { margin-bottom: 55px; } .t-default .m60_sp { margin-bottom: 60px; } .t-default .m65_sp { margin-bottom: 65px; } .t-default .m70_sp { margin-bottom: 70px; } .t-default .m75_sp { margin-bottom: 75px; } .t-default .m80_sp { margin-bottom: 80px; } .t-default .m85_sp { margin-bottom: 85px; } .t-default .m90_sp { margin-bottom: 90px; } .t-default .m95_sp { margin-bottom: 95px; } .t-default .m100_sp { margin-bottom: 100px; } .t-default .m110_sp { margin-bottom: 110px; } .t-default .m120_sp { margin-bottom: 120px; } .t-default .m130_sp { margin-bottom: 130px; } .t-default .m140_sp { margin-bottom: 140px; } .t-default .m150_sp { margin-bottom: 150px; } .t-default .m160_sp { margin-bottom: 160px; } .t-default .m170_sp { margin-bottom: 170px; } .t-default .m180_sp { margin-bottom: 180px; } .t-default .m190_sp { margin-bottom: 190px; } .t-default .m200_sp { margin-bottom: 200px; } /* margin top only smartphone **********************/ .mt5_sp { margin-top: 5px; } .mt10_sp { margin-top: 10px; } .mt15_sp { margin-top: 15px; } .mt20_sp { margin-top: 20px; } .mt25_sp { margin-top: 25px; } .mt30_sp { margin-top: 30px; } .mt35_sp { margin-top: 35px; } .mt40_sp { margin-top: 40px; } .mt45_sp { margin-top: 45px; } .mt50_sp { margin-top: 50px; } .mt55_sp { margin-top: 55px; } .mt60_sp { margin-top: 60px; } .mt65_sp { margin-top: 65px; } .mt70_sp { margin-top: 70px; } .mt75_sp { margin-top: 75px; } .mt80_sp { margin-top: 80px; } .mt85_sp { margin-top: 85px; } .mt90_sp { margin-top: 90px; } .mt95_sp { margin-top: 95px; } .mt100_sp { margin-top: 100px; } /* margin bottom only tablet **********************/ .m5_sp { margin-bottom: 5px; } .m10_sp { margin-bottom: 10px; } .m15_sp { margin-bottom: 15px; } .m20_sp { margin-bottom: 20px; } .m25_sp { margin-bottom: 25px; } .m30_sp { margin-bottom: 30px; } .m35_sp { margin-bottom: 35px; } .m40_sp { margin-bottom: 40px; } .m45_sp { margin-bottom: 45px; } .m50_sp { margin-bottom: 50px; } .m55_sp { margin-bottom: 55px; } .m60_sp { margin-bottom: 60px; } .m65_sp { margin-bottom: 65px; } .m70_sp { margin-bottom: 70px; } .m75_sp { margin-bottom: 75px; } .m80_sp { margin-bottom: 80px; } .m85_sp { margin-bottom: 85px; } .m90_sp { margin-bottom: 90px; } .m95_sp { margin-bottom: 95px; } .m100_sp { margin-bottom: 100px; } .m110_sp { margin-bottom: 110px; } .m120_sp { margin-bottom: 120px; } .m130_sp { margin-bottom: 130px; } .m140_sp { margin-bottom: 140px; } .m150_sp { margin-bottom: 150px; } .m160_sp { margin-bottom: 160px; } .m170_sp { margin-bottom: 170px; } .m180_sp { margin-bottom: 180px; } .m190_sp { margin-bottom: 190px; } .m200_sp { margin-bottom: 200px; } } /****************************************************************/ /* padding */ /****************************************************************/ .pr1 { padding-right: 1%; } .pr2 { padding-right: 2%; } .pr3 { padding-right: 3%; } .pr4 { padding-right: 4%; } .pr5 { padding-right: 5%; } .pr6 { padding-right: 6%; } .pr7 { padding-right: 7%; } .pr8 { padding-right: 8%; } .pr9 { padding-right: 9%; } .pr10 { padding-right: 10%; } .pr11 { padding-right: 11%; } .pr12 { padding-right: 12%; } .pr13 { padding-right: 13%; } .pr14 { padding-right: 14%; } .pr15 { padding-right: 15%; } .pr16 { padding-right: 16%; } .pr17 { padding-right: 17%; } .pr18 { padding-right: 18%; } .pr19 { padding-right: 19%; } .pr20 { padding-right: 20%; } .pr21 { padding-right: 21%; } .pr22 { padding-right: 22%; } .pr23 { padding-right: 23%; } .pr24 { padding-right: 24%; } .pr25 { padding-right: 25%; } /* padding right **********************/ .pl1 { padding-left: 1%; } .pl2 { padding-left: 2%; } .pl3 { padding-left: 3%; } .pl4 { padding-left: 4%; } .pl5 { padding-left: 5%; } .pl6 { padding-left: 6%; } .pl7 { padding-left: 7%; } .pl8 { padding-left: 8%; } .pl9 { padding-left: 9%; } .pl10 { padding-left: 10%; } .pl11 { padding-left: 11%; } .pl12 { padding-left: 12%; } .pl13 { padding-left: 13%; } .pl14 { padding-left: 14%; } .pl15 { padding-left: 15%; } .pl16 { padding-left: 16%; } .pl17 { padding-left: 17%; } .pl18 { padding-left: 18%; } .pl19 { padding-left: 19%; } .pl20 { padding-left: 20%; } .pl21 { padding-left: 21%; } .pl22 { padding-left: 22%; } .pl23 { padding-left: 23%; } .pl24 { padding-left: 24%; } .pl25 { padding-left: 25%; } /* padding top **********************/ .pt5 { padding-top: 5px; } .pt10 { padding-top: 10px; } .pt15 { padding-top: 15px; } .pt20 { padding-top: 20px; } .pt25 { padding-top: 25px; } .pt30 { padding-top: 30px; } .pt35 { padding-top: 35px; } .pt40 { padding-top: 40px; } .pt45 { padding-top: 45px; } .pt50 { padding-top: 50px; } .pt55 { padding-top: 55px; } .pt60 { padding-top: 60px; } .pt65 { padding-top: 65px; } .pt70 { padding-top: 70px; } .pt75 { padding-top: 75px; } .pt80 { padding-top: 80px; } .pt85 { padding-top: 85px; } .pt90 { padding-top: 90px; } .pt95 { padding-top: 95px; } .pt100 { padding-top: 100px; } .pt105 { padding-top: 105px; } .pt110 { padding-top: 110px; } .pt115 { padding-top: 115px; } .pt120 { padding-top: 120px; } .pt125 { padding-top: 125px; } .pt130 { padding-top: 130px; } .pt135 { padding-top: 135px; } .pt140 { padding-top: 140px; } .pt145 { padding-top: 145px; } .pt150 { padding-top: 150px; } /* padding top only PC **********************/ .pt5_pc { padding-top: 5px; } .pt10_pc { padding-top: 10px; } .pt15_pc { padding-top: 15px; } .pt20_pc { padding-top: 20px; } .pt25_pc { padding-top: 25px; } .pt30_pc { padding-top: 30px; } .pt35_pc { padding-top: 35px; } .pt40_pc { padding-top: 40px; } .pt45_pc { padding-top: 45px; } .pt50_pc { padding-top: 50px; } .pt55_pc { padding-top: 55px; } .pt60_pc { padding-top: 60px; } .pt65_pc { padding-top: 65px; } .pt70_pc { padding-top: 70px; } .pt75_pc { padding-top: 75px; } .pt80_pc { padding-top: 80px; } .pt85_pc { padding-top: 85px; } .pt90_pc { padding-top: 90px; } .pt95_pc { padding-top: 95px; } .pt100_pc { padding-top: 100px; } .pt105_pc { padding-top: 105px; } .pt110_pc { padding-top: 110px; } .pt115_pc { padding-top: 115px; } .pt120_pc { padding-top: 120px; } .pt125_pc { padding-top: 125px; } .pt130_pc { padding-top: 130px; } .pt135_pc { padding-top: 135px; } .pt140_pc { padding-top: 140px; } .pt145_pc { padding-top: 145px; } .pt150_pc { padding-top: 150px; } @media only screen and (max-width: 979px) { .pt5_pc, .pt10_pc, .pt15_pc, .pt20_pc, .pt25_pc, .pt30_pc, .pt35_pc, .pt40_pc, .pt45_pc, .pt50_pc, .pt55_pc, .pt60_pc, .pt65_pc, .pt70_pc, .pt75_pc, .pt80_pc, .pt85_pc, .pt90_pc, .pt95_pc, .pt100_pc, .pt105_pc, .pt110_pc, .pt115_pc, .pt120_pc, .pt125_pc, .pt130_pc, .pt135_pc, .pt140_pc, .pt145_pc, .pt150_pc { padding-top: 0; } } /* padding top only tablet **********************/ @media only screen and (min-width: 691px) and (max-width: 979px) { .pt5_tablet { padding-top: 5px; } .pt10_tablet { padding-top: 10px; } .pt15_tablet { padding-top: 15px; } .pt20_tablet { padding-top: 20px; } .pt25_tablet { padding-top: 25px; } .pt30_tablet { padding-top: 30px; } .pt35_tablet { padding-top: 35px; } .pt40_tablet { padding-top: 40px; } .pt45_tablet { padding-top: 45px; } .pt50_tablet { padding-top: 50px; } .pt55_tablet { padding-top: 55px; } .pt60_tablet { padding-top: 60px; } .pt65_tablet { padding-top: 65px; } .pt70_tablet { padding-top: 70px; } .pt75_tablet { padding-top: 75px; } .pt80_tablet { padding-top: 80px; } .pt85_tablet { padding-top: 85px; } .pt90_tablet { padding-top: 90px; } .pt95_tablet { padding-top: 95px; } .pt100_tablet { padding-top: 100px; } .pt105_tablet { padding-top: 105px; } .pt110_tablet { padding-top: 110px; } .pt115_tablet { padding-top: 115px; } .pt120_tablet { padding-top: 120px; } .pt125_tablet { padding-top: 125px; } .pt130_tablet { padding-top: 130px; } .pt135_tablet { padding-top: 135px; } .pt140_tablet { padding-top: 140px; } .pt145_tablet { padding-top: 145px; } .pt150_tablet { padding-top: 150px; } } /* padding top only sp **********************/ @media only screen and (max-width: 690px) { .pt5_sp { padding-top: 5px; } .pt10_sp { padding-top: 10px; } .pt15_sp { padding-top: 15px; } .pt20_sp { padding-top: 20px; } .pt25_sp { padding-top: 25px; } .pt30_sp { padding-top: 30px; } .pt35_sp { padding-top: 35px; } .pt40_sp { padding-top: 40px; } .pt45_sp { padding-top: 45px; } .pt50_sp { padding-top: 50px; } .pt55_sp { padding-top: 55px; } .pt60_sp { padding-top: 60px; } .pt65_sp { padding-top: 65px; } .pt70_sp { padding-top: 70px; } .pt75_sp { padding-top: 75px; } .pt80_sp { padding-top: 80px; } .pt85_sp { padding-top: 85px; } .pt90_sp { padding-top: 90px; } .pt95_sp { padding-top: 95px; } .pt100_sp { padding-top: 100px; } .pt105_sp { padding-top: 105px; } .pt110_sp { padding-top: 110px; } .pt115_sp { padding-top: 115px; } .pt120_sp { padding-top: 120px; } .pt125_sp { padding-top: 125px; } .pt130_sp { padding-top: 130px; } .pt135_sp { padding-top: 135px; } .pt140_sp { padding-top: 140px; } .pt145_sp { padding-top: 145px; } .pt150_sp { padding-top: 150px; } } /* padding bottom **********************/ .pb5 { padding-bottom: 5px; } .pb10 { padding-bottom: 10px; } .pb15 { padding-bottom: 15px; } .pb20 { padding-bottom: 20px; } .pb25 { padding-bottom: 25px; } .pb30 { padding-bottom: 30px; } .pb35 { padding-bottom: 35px; } .pb40 { padding-bottom: 40px; } .pb45 { padding-bottom: 45px; } .pb50 { padding-bottom: 50px; } .pb55 { padding-bottom: 55px; } .pb60 { padding-bottom: 60px; } .pb65 { padding-bottom: 65px; } .pb70 { padding-bottom: 70px; } .pb75 { padding-bottom: 75px; } .pb80 { padding-bottom: 80px; } .pb85 { padding-bottom: 85px; } .pb90 { padding-bottom: 90px; } .pb95 { padding-bottom: 95px; } .pb100 { padding-bottom: 100px; } .pb105 { padding-bottom: 105px; } .pb110 { padding-bottom: 110px; } .pb115 { padding-bottom: 115px; } .pb120 { padding-bottom: 120px; } .pb125 { padding-bottom: 125px; } .pb130 { padding-bottom: 130px; } .pb135 { padding-bottom: 135px; } .pb140 { padding-bottom: 140px; } .pb145 { padding-bottom: 145px; } .pb150 { padding-bottom: 150px; } /* padding bottom only PC **********************/ .pb5_pc { padding-bottom: 5px; } .pb10_pc { padding-bottom: 10px; } .pb15_pc { padding-bottom: 15px; } .pb20_pc { padding-bottom: 20px; } .pb25_pc { padding-bottom: 25px; } .pb30_pc { padding-bottom: 30px; } .pb35_pc { padding-bottom: 35px; } .pb40_pc { padding-bottom: 40px; } .pb45_pc { padding-bottom: 45px; } .pb50_pc { padding-bottom: 50px; } .pb55_pc { padding-bottom: 55px; } .pb60_pc { padding-bottom: 60px; } .pb65_pc { padding-bottom: 65px; } .pb70_pc { padding-bottom: 70px; } .pb75_pc { padding-bottom: 75px; } .pb80_pc { padding-bottom: 80px; } .pb85_pc { padding-bottom: 85px; } .pb90_pc { padding-bottom: 90px; } .pb95_pc { padding-bottom: 95px; } .pb100_pc { padding-bottom: 100px; } .pb105_pc { padding-bottom: 105px; } .pb110_pc { padding-bottom: 110px; } .pb115_pc { padding-bottom: 115px; } .pb120_pc { padding-bottom: 120px; } .pb125_pc { padding-bottom: 125px; } .pb130_pc { padding-bottom: 130px; } .pb135_pc { padding-bottom: 135px; } .pb140_pc { padding-bottom: 140px; } .pb145_pc { padding-bottom: 145px; } .pb150_pc { padding-bottom: 150px; } @media only screen and (max-width: 979px) { .pb5_pc, .pb10_pc, .pb15_pc, .pb20_pc, .pb25_pc, .pb30_pc, .pb35_pc, .pb40_pc, .pb45_pc, .pb50_pc, .pb55_pc, .pb60_pc, .pb65_pc, .pb70_pc, .pb75_pc, .pb80_pc, .pb85_pc, .pb90_pc, .pb95_pc, .pb100_pc, .pb105_pc, .pb110_pc, .pb115_pc, .pb120_pc, .pb125_pc, .pb130_pc, .pb135_pc, .pb140_pc, .pb145_pc, .pb150_pc { padding-bottom: 0; } } /* padding bottom only tablet **********************/ @media only screen and (min-width: 691px) and (max-width: 979px) { .pb5_tablet { padding-bottom: 5px; } .pb10_tablet { padding-bottom: 10px; } .pb15_tablet { padding-bottom: 15px; } .pb20_tablet { padding-bottom: 20px; } .pb25_tablet { padding-bottom: 25px; } .pb30_tablet { padding-bottom: 30px; } .pb35_tablet { padding-bottom: 35px; } .pb40_tablet { padding-bottom: 40px; } .pb45_tablet { padding-bottom: 45px; } .pb50_tablet { padding-bottom: 50px; } .pb55_tablet { padding-bottom: 55px; } .pb60_tablet { padding-bottom: 60px; } .pb65_tablet { padding-bottom: 65px; } .pb70_tablet { padding-bottom: 70px; } .pb75_tablet { padding-bottom: 75px; } .pb80_tablet { padding-bottom: 80px; } .pb85_tablet { padding-bottom: 85px; } .pb90_tablet { padding-bottom: 90px; } .pb95_tablet { padding-bottom: 95px; } .pb100_tablet { padding-bottom: 100px; } .pb105_tablet { padding-bottom: 105px; } .pb110_tablet { padding-bottom: 110px; } .pb115_tablet { padding-bottom: 115px; } .pb120_tablet { padding-bottom: 120px; } .pb125_tablet { padding-bottom: 125px; } .pb130_tablet { padding-bottom: 130px; } .pb135_tablet { padding-bottom: 135px; } .pb140_tablet { padding-bottom: 140px; } .pb145_tablet { padding-bottom: 145px; } .pb150_tablet { padding-bottom: 150px; } } /* padding bottom only sp **********************/ @media only screen and (max-width: 690px) { .pb5_sp { padding-bottom: 5px; } .pb10_sp { padding-bottom: 10px; } .pb15_sp { padding-bottom: 15px; } .pb20_sp { padding-bottom: 20px; } .pb25_sp { padding-bottom: 25px; } .pb30_sp { padding-bottom: 30px; } .pb35_sp { padding-bottom: 35px; } .pb40_sp { padding-bottom: 40px; } .pb45_sp { padding-bottom: 45px; } .pb50_sp { padding-bottom: 50px; } .pb55_sp { padding-bottom: 55px; } .pb60_sp { padding-bottom: 60px; } .pb65_sp { padding-bottom: 65px; } .pb70_sp { padding-bottom: 70px; } .pb75_sp { padding-bottom: 75px; } .pb80_sp { padding-bottom: 80px; } .pb85_sp { padding-bottom: 85px; } .pb90_sp { padding-bottom: 90px; } .pb95_sp { padding-bottom: 95px; } .pb100_sp { padding-bottom: 100px; } .pb105_sp { padding-bottom: 105px; } .pb110_sp { padding-bottom: 110px; } .pb115_sp { padding-bottom: 115px; } .pb120_sp { padding-bottom: 120px; } .pb125_sp { padding-bottom: 125px; } .pb130_sp { padding-bottom: 130px; } .pb135_sp { padding-bottom: 135px; } .pb140_sp { padding-bottom: 140px; } .pb145_sp { padding-bottom: 145px; } .pb150_sp { padding-bottom: 150px; } } /************************************************/ /* slide */ /************************************************/ @media only screen and (max-width: 979px) { .slide .slick-slide { padding: 0 10px; } } /************************************************ SNS ************************************************/ /*--- twitter -----*/ .fl_tw { text-decoration: none; display: inline-block; text-align: center; color: #1da1f3; font-size: 16px; text-decoration: none; } .fl_tw:hover { color: #88daff; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; text-decoration: none; } .fl_tw .twicon { border-radius: 6px; position: relative; display: inline-block; width: 30px; height: 30px; font-size: 20px; line-height: 30px; vertical-align: middle; color: #FFF; background: #1da1f3; margin-right: 5px; } .fl_tw .twicon .fa { line-height: 50px; } /*--- facebook -----*/ .fl_fb { text-decoration: none; display: inline-block; text-align: center; color: #4966a0; font-size: 16px; text-decoration: none; } .fl_fb:hover { color: #668ad8; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; text-decoration: none; } .fl_fb .fbicon { border-radius: 6px; position: relative; display: inline-block; width: 30px; height: 30px; font-size: 18px; line-height: 30px; vertical-align: middle; color: #FFF; background: #4966a0; margin-right: 5px; } .fl_fb .fbicon .fa-facebook { position: absolute; bottom: -3px; right: 6px; font-size: 42px; } /*--- instagram -----*/ .fl_inst { text-decoration: none; display: inline-block; text-align: center; color: #2e6ca5; font-size: 16px; text-decoration: none; } .fl_inst:hover { color: #668ad8; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; text-decoration: none; } .fl_inst .insta { border-radius: 6px; position: relative; display: inline-block; width: 30px; height: 30px; font-size: 22px; line-height: 30px; vertical-align: middle; background: -webkit-linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; background: -webkit-linear-gradient(315deg, #427eff 0%, #f13f79 70%) no-repeat; background: -o-linear-gradient(315deg, #427eff 0%, #f13f79 70%) no-repeat; background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; overflow: hidden; margin-right: 5px; } .fl_inst .insta:before { content: ''; position: absolute; top: 18px; left: -15px; width: 50px; height: 50px; background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); background: -o-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); } .fl_inst .fa-instagram { color: #ffffff; line-height: 30px; position: relative; z-index: 2; } /*-----------------------------------------*/ .circle_fl { display: inline-block; position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; text-decoration: none; color: #FFF; width: 50px; height: 50px; line-height: 30px; padding: 5px; font-size: 25px; border-radius: 50%; text-align: center; vertical-align: middle; font-weight: bold; -webkit-box-shadow: inset 0 2px 0px rgba(255, 255, 255, 0.25), inset 0 -2px 0px rgba(0, 0, 0, 0.18); box-shadow: inset 0 2px 0px rgba(255, 255, 255, 0.25), inset 0 -2px 0px rgba(0, 0, 0, 0.18); -webkit-transition: .2s; -o-transition: .2s; transition: .2s; } .circle_fl .fa { line-height: 30px; } .circle_fl:hover { -webkit-box-shadow: none; box-shadow: none; } .circle_fl.ftw { background: #1da1f3; border: solid 5px #1da1f3; } .circle_fl.ffb { background: #3b75d4; border: solid 5px #3b75d4; } .circle_fl.fpkt { background: #ef4d4d; border: solid 5px #ef4d4d; } .circle_fl.ffdly { background: #7ece46; border: solid 5px #7ece46; } .circle_fl.insta { background: -webkit-linear-gradient(315deg, #427eff 0%, #f13f79 70%) no-repeat; background: -o-linear-gradient(315deg, #427eff 0%, #f13f79 70%) no-repeat; background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; overflow: hidden; } .circle_fl.insta::before { content: ''; position: absolute; top: 18px; left: -15px; width: 60px; height: 60px; background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); background: -o-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); } .circle_fl.insta .fa-instagram { position: relative; z-index: 2; font-size: 31px; line-height: 40px; -webkit-box-shadow: 0 1px 0px 1px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 0px 1px rgba(0, 0, 0, 0.2); border-radius: 50%; width: 100%; } .circle_fl:hover .fa-instagram { -webkit-box-shadow: 0 1px 0px 1px rgba(0, 0, 0, 0); box-shadow: 0 1px 0px 1px rgba(0, 0, 0, 0); } /*---------------------------------------*/ .share_btn2 { display: inline-block; text-decoration: none; width: 50px; margin: 2px; height: 50px; line-height: 50px; font-size: 23px; color: #ffffff; border-radius: 12px; text-align: center; vertical-align: middle; overflow: hidden; font-weight: bold; -webkit-transition: .3s; -o-transition: .3s; transition: .3s; } .share_btn2 .fa { line-height: 50px; } .share_btn2:hover { -webkit-transform: translateY(-5px); -ms-transform: translateY(-5px); transform: translateY(-5px); } .share_btn2.shtw { background: #22b8ff; } .share_btn2.shfb { background: #6680d8; } .share_btn2.shhtb { background: #49a8fb; } .share_btn2.shpkt { background: #ff6d82; } .share_btn2.shfdly { background: #7bda72; } .share_btn2.shgp { background: #fd6969; } .share_btn2.shig { background: -webkit-linear-gradient(315deg, #427eff 0%, #f13f79 70%) no-repeat; background: -o-linear-gradient(315deg, #427eff 0%, #f13f79 70%) no-repeat; background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; position: relative; overflow: hidden; } .share_btn2.shig::after { content: ''; position: absolute; top: 20px; left: -25px; width: 70px; height: 70px; background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); background: -o-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); } .fab.fa-instagram { position: relative; z-index: 2; } /*------------------------------------------*/ .fl_tw2 { color: #FFF; border-radius: 7px; display: inline-block; height: 50px; width: 100%; text-align: center; font-size: 25px; line-height: 50px; vertical-align: middle; background: #1da1f3; overflow: hidden; text-decoration: none; } .fl_tw2 .fa-twitter { text-shadow: 2px 2px 0px #4287d6; font-size: 26px; } .fl_tw2 span { display: inline-block; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; font-size: 16px; margin-left: 10px; } .fl_tw2:hover span { -webkit-transform: rotateX(360deg); transform: rotateX(360deg); } .fl_fb2 { color: #FFF; border-radius: 7px; display: inline-block; height: 50px; width: 100%; text-align: center; font-size: 25px; line-height: 50px; vertical-align: middle; background: #4966a0; overflow: hidden; text-decoration: none; } .fl_fb2 .fa-facebook { text-shadow: 2px 2px 1px #224282; font-size: 26px; } .fl_fb2 span { display: inline-block; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; font-size: 16px; margin-left: 10px; } .fl_fb2:hover span { -webkit-transform: rotateX(360deg); transform: rotateX(360deg); } .fl_inst2 { color: #FFF; border-radius: 7px; position: relative; display: inline-block; height: 50px; width: 100%; text-align: center; font-size: 25px; line-height: 50px; vertical-align: middle; background: -webkit-linear-gradient(315deg, #427eff 0%, #f13f79 70%) no-repeat; background: -o-linear-gradient(315deg, #427eff 0%, #f13f79 70%) no-repeat; background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; overflow: hidden; text-decoration: none; } .fl_inst2:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: -webkit-linear-gradient(75deg, #ffdb2c, #f9764c 25%, rgba(255, 77, 64, 0) 50%) no-repeat; background: -o-linear-gradient(75deg, #ffdb2c, #f9764c 25%, rgba(255, 77, 64, 0) 50%) no-repeat; background: linear-gradient(15deg, #ffdb2c, #f9764c 25%, rgba(255, 77, 64, 0) 50%) no-repeat; } .fl_inst2 .fa-instagram { font-size: 30px; position: relative; top: 4px; } .fl_inst2 span { display: inline-block; position: relative; -webkit-transition: .5s; -o-transition: .5s; transition: .5s; font-size: 16px; margin-left: 10px; } .fl_inst2:hover span { -webkit-transform: rotateX(360deg); transform: rotateX(360deg); } /*--------------------------------------------------------------------*/ .flat_ss { display: -webkit-box; display: -ms-flexbox; display: flex; height: 50px; font-size: 25px; line-height: 50px; vertical-align: middle; background: #eaeef1; text-decoration: none; } .flat_ss .iconback { display: inline-block; width: 50px; height: 50px; text-align: center; color: #ffffff; } .flat_ss .iconback .fa { font-size: 25px; line-height: 50px; } .flat_ss .btnttl { display: block; width: calc(100% - 50px); text-align: center; vertical-align: middle; font-size: 20px; } .flat_ss .tw { background: #1da1f3; } .flat_ss .fb { background: #3b75d4; } .flat_ss .fdly { background: #7ece46; } .flat_ss .pkt { background: #fd7171; } .flat_ss .insta { background: -webkit-linear-gradient(315deg, #427eff 0%, #f13f79 70%) no-repeat; background: -o-linear-gradient(315deg, #427eff 0%, #f13f79 70%) no-repeat; background: linear-gradient(135deg, #427eff 0%, #f13f79 70%) no-repeat; position: relative; overflow: hidden; } .flat_ss .insta::after { content: ''; position: absolute; top: 20px; left: -25px; width: 70px; height: 70px; background: -webkit-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); background: -o-radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); background: radial-gradient(#ffdb2c 10%, rgba(255, 105, 34, 0.65) 55%, rgba(255, 88, 96, 0) 70%); } .flat_ss:hover span.iconback .fab, .flat_ss:hover span.iconback .fas { -webkit-transition: .3s; -o-transition: .3s; transition: .3s; -webkit-transform: rotateX(360deg); transform: rotateX(360deg); } .flat_ss:hover { text-decoration: none; } /*---- jc ai -----*/ .jc_sb { -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; } .jc_start{ -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } .jc_c{ -webkit-box-pack: center; -ms-flex-pack: unset; justify-content: center; } .jc_end{ -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; } .ai_start { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .ai_c { -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .ai_b { -webkit-box-align: baseline; -ms-flex-align: baseline; align-items: baseline; } .ai_end { -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; }