/* CSS Document */ .popup.image::after { display: none;} /* flow --------------------------------------- */ .flow { margin-bottom: 60px;} .flow ul { width: 100%; display: table; padding-bottom: 15px;} .flow ul li { width: 31%; float: left; border: 1px solid #dec4b6; padding: 13px 2% 28px 2%; margin-right: 3.5%; box-sizing: border-box;} .flow ul li:last-child{ margin-right: 0;} .flow ul li+li{ position: relative;} .flow ul li+li:before{ position: absolute; top: 0; bottom: 0; left: 0; margin: auto; content: ""; vertical-align: middle; } .flow ul li+li:before{ left: -7%; box-sizing: border-box; width: 16px; height: 16px; border: 16px solid transparent; border-left: 12px solid #dec4b6; } .flow ul li .smallTitle { font-size: 14px; font-size: 1.4rem; font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro," メイリオ", Meiryo, Osaka," ＭＳ Ｐゴシック", MS PGothic," sans-serif"; margin-bottom: 5px;} .flow ul li .smallTitle span { font-size: 20px; font-size: 2.0rem; margin-right: 10px; padding: 0; vertical-align: middle;} @media screen and (max-width: 800px){ .outerWrap { padding: 0;} } /* openLink --------------------------------------- */ .openLink a { padding-left: 10px; text-decoration: underline;} .openLink i::before { color: #4b4b4b;} /* banner --------------------------------------- */ .bnrBox { text-align: center;} .bnrBox ul{ display: inline-block; max-width: 710px; margin: 0 auto;} .bnrBox ul li{ display: inline-block; width: 335px; margin: 0px 10px 20px;} .bnrBox .bnr { display: inline-block; width: 335px;} .bnrBox ul li:last-child{ margin-bottom: 0;} @media screen and (max-width: 800px){ .bnrBox ul{ max-width: 100%; padding: 0 4%;} .bnrBox ul li{ margin: 0 auto 10px;} .bnrBox ul li,.bnrBox .bnr,.bnrBox .bnr img{ width: 100%;} } /* copyright --------------------------------------- */ #container .copyright{ margin: 30px auto 60px; overflow: hidden; zoom: 1; } #container .copyright p{ font-size: 12px; font-size: 1.2rem; float: right;} #container .copyright .mitsumaru{ width: 16px; height: auto; position: relative; top: -2px; margin-right: 20px; } /* localNav --------------------------------------- */ .localNav { margin: 0 auto 60px; width: 100%; max-width: 840px; } .localNav li { border-bottom: 1px dotted #737373; float: left; margin-right: 2%; text-align: center; width: 32%; } .localNav li:nth-child(-n+3) { border-top: 1px dotted #737373;} .localNav li:nth-child(3n) { margin-right: 0;} .localNav li a { display: block; padding: 8px 0; position: relative; } .localNav li a:before { border-bottom: 1px solid #4b4b4b; border-left: 1px solid #4b4b4b; content: ""; height: 13px; width: 13px; position: absolute; right: 10px; top: 8px; transform: rotate(-45deg); } /***** ■■SP■■ ****/ @media screen and (max-width: 800px) { body { font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; } .pc_center{ text-align: left;} .sp_center{ text-align: center;} .attention{ font-size: 12px; font-size: 1.2rem;} /* layout --------------------------------------- */ #container { padding: 0 0px;} .wrap{ max-width: 800px;} #container .sp { display: block !important;} #container .pc { display: none !important;} #pankuzu { display: none;} /* flow --------------------------------------- */ .flow { margin: 0 4%; margin-bottom: 20px;} .flow ul { width: 100%; display: block; padding-bottom: 15px;} .flow ul li { width: 100%; border: none; margin-right: 0; padding: 0;} .flow ul li+li{ position: static;} .flow ul li+li:before{ display: inline-block; position: relative; top: auto; bottom: auto; left: 50%; margin: 0 auto; margin-left: -16px; content: ""; vertical-align: middle; } .flow ul li+li:before{ box-sizing: border-box; width: 16px; height: 16px; border: 16px solid transparent; border-top: 12px solid #dec4b6; } .flow ul li .smallTitle { border: 1px solid #dec4b6; box-sizing: border-box; padding: 3px 5px 2px;} .flow ul li .smallTitle span { position: relative; top: -1px;} .flow ul li .txt { padding: 10px 0;} /* copyright --------------------------------------- */ #container .copyright p{ float: none; padding: 0 4%;} /* localNav --------------------------------------- */ .localNav { margin: 0 0 40px; text-align: center; width: auto; } .localNav li { display: block; width: auto; margin-right: 0; float: none; } .localNav li:nth-child(3n) { margin-right: 0;} .localNav li:nth-child(-n+3) { border-top: 0;} .localNav li:nth-child(1) { border-top: 1px dotted #4b4b4b;} .localNav li a { padding: 5px 0;} .localNav li a:before { height: 12px; width: 12px; position: absolute; right: 15px; top: 6px; } } /******************* #watch_top *********************/ /* mainBox --------------------------------------- */ #watch_top .mainBox{ margin-bottom: 20px;} /* box01 --------------------------------------- */ #watch_top .box01 { margin-bottom: 20px; padding: 100px 3.125% 90px 48%; background: url(../img/watch/bg_index_sec01.jpg) no-repeat left center; background-size: cover;} #watch_top .box01 .box01_img { display: none;} #watch_top .box01 .txt{ color: #fff; margin-bottom: 30px;} #watch_top .box01 ul { width: 100%;} #watch_top .box01 ul li { float: left; width: 48%; /* box-shadow:1px 1px 1px 1px rgba(255,255,255,0.2),-1px -1px 1px 1px rgba(255,255,255,0.2);*/ border: 1px solid rgba(255,255,255,0.1);} #watch_top .box01 ul li:last-child { float: right; width: 48%;} #watch_top .box01 .largeTitle { color: #fff;} /* box02 --------------------------------------- */ #watch_top .box02 { margin-bottom: 10px;} #watch_top .box02 ul { width: 100%;} #watch_top .box02 ul li { float: left; width: 49.5%; margin-bottom: 10px;} #watch_top .box02 ul li:nth-child(2n) { float: right; width: 49.5%;} /* box03 --------------------------------------- */ #watch_top .box03 { margin-bottom: 60px; background: url(../img/watch/bg_index_sec03.jpg) no-repeat left center; background-size: cover; padding: 95px 46.875% 80px 4.6875%;} #watch_top .box03 .txt { margin-bottom: 30px;} /* box04 --------------------------------------- */ #watch_top .box04 { margin: 60px auto 100px; } #watch_top .box04 img { margin: 20px auto 0; max-width: 640px; } /* box05 --------------------------------------- */ #watch_top .box05 { margin-bottom: 100px;} #watch_top .box05 .txt01 { margin-bottom: 30px; text-align: center;} #watch_top .box05 ul { display: block; width: 100%; padding: 30px; background: #EFEFEF; margin-bottom: 20px;} #watch_top .box05 ul li { float: left; width: 50%;} #watch_top .box05 .box05_img { margin-bottom: 30px;} /***** ■■SP■■ ****/ @media screen and (max-width: 800px) { /* mainBox --------------------------------------- */ #watch_top .mainBox{ margin-bottom: 30px;} /* box01 --------------------------------------- */ #watch_top .box01 { margin-top: 0; margin-bottom: 40px; padding: 0px 15px 0px; background: none;} #watch_top .box01 .largeTitle, #watch_top .box01 .txt{ color: #4b4b4b;} #watch_top .box01 .imgArea{ height: 100%;} #watch_top .box01 .box01_img { display: block; width: 49%; float: left;} #watch_top .box01 ul { width: 49.5%; float: right;} #watch_top .box01 ul li { float: none; width: 100%; margin-bottom: 4%; border: none;} #watch_top .box01 ul li:last-child { float: none; width: 100%; margin-bottom: 0;} /* box02 --------------------------------------- */ #watch_top .box02 { margin-bottom: 40px; background: none; } #watch_top .box02 ul { width: 100%;} #watch_top .box02 ul li { float: none; width: 100%; margin-bottom: 5px;} #watch_top .box02 ul li:nth-child(2n) { float: none; width: 100%;} /* box03 --------------------------------------- */ #watch_top .box03 { margin-bottom: 0; padding: 0; background: none;} #watch_top .box03 .cellBox { background: #fff; padding: 0px 15px 15px;} #watch_top .box03 .txt { margin-bottom: 15px;} #watch_top .box03 .txt:last-of-type { margin-bottom: 20px;} #watch_top .box03 .box03_img { display: block; width: 100%; margin: 0;} /* box04 --------------------------------------- */ #watch_top .box04{ margin-bottom: 0; padding: 0 15px 70px; } /* box05 --------------------------------------- */ #watch_top .box05 { margin-bottom: 0px; padding: 0 15px 70px; background: none;} #watch_top .box05 .txt01 { margin-bottom: 15px; text-align: left;} #watch_top .box05 .txt02 { margin-bottom: 30px; text-align: left;} #watch_top .box05 ul { display: block; width: 100%; padding: 15px; box-sizing: border-box;} #watch_top .box05 ul li { float: none; width: 100%; font-size: 14px; line-height: 28px; margin-bottom: 30px;} } /******************* #fullorder *********************/ /* mainbox --------------------------------------- */ #watch_fullorder .mainBox { position: relative;} #watch_fullorder .mainBox .mainTitle { position: absolute; top:240px; left: 0; width: 40%; text-align: center; color: #fff;padding-top: 0;} #watch_fullorder .mainBox .mainTitle span{ margin-top: 0;} /* box01 --------------------------------------- */ #watch_fullorder .box01 { background: #000; margin-bottom: 60px; padding-bottom: 30px;} #watch_fullorder .box01 .largeTitle, #watch_fullorder .box01 .midTitle, #watch_fullorder .box01 .read{ text-align: center;} #watch_fullorder .box01 .largeTitle, #watch_fullorder .box01 .box01_inner01 .midTitle, #watch_fullorder .box01 .read{ color: #fff;} #watch_fullorder .box01 .read{ margin-bottom: 20px;} #watch_fullorder .box01 .txt{ color: #fff;} #watch_fullorder .box01 .txt01{ margin: 0px 6.25% 30px;} #watch_fullorder .box01 .slider01 ul { margin-bottom: 30px;} #watch_fullorder .box01 .slider01 .slick-slide { margin: 0 10px;} #watch_fullorder .box01 .box01_inner01 { margin: 0 2% 60px;} #watch_fullorder .box01 .box01_inner01 li { float: left; width: 49%;} #watch_fullorder .box01 .box01_inner01 li:last-child { float: right; width: 49%;} #watch_fullorder .box01 .box01_inner01 li img { margin-bottom: 20px;} #watch_fullorder .box01 .box01_inner01 li .txt03{ margin-bottom: 10px;} #watch_fullorder .box01 .box01_inner01 li ul.parts{ margin: 0px 10px; font-size: 0; line-height: 0;} #watch_fullorder .box01 .box01_inner01 li ul.parts li { float: left; width: 32%; height: 30px; margin: 0 2% 10px 0; line-height: 30px; border: 1px dashed #fff; text-align: center; color: #fff; font-size: 16px; font-family: "ヒラギノ角ゴ Pro W3", Hiragino Kaku Gothic Pro," メイリオ", Meiryo, Osaka," ＭＳ Ｐゴシック", MS PGothic," sans-serif"; box-sizing: border-box;} #watch_fullorder .box01 .box01_inner01 li ul.parts li:nth-child(3n){ margin-right: 0;} #watch_fullorder .box01 .box01_inner02 { margin: 0px 2% 0px; padding: 40px 2% 40px; background: #fff; } #watch_fullorder .box01 .box01_inner02 ul li { float: left; width: 49%;} #watch_fullorder .box01 .box01_inner02 ul li:last-child { float: right; width: 49%;} #watch_fullorder .box01 .box01_inner02 ul li img { margin-bottom: 10px;} #watch_fullorder .box01 .box01_inner02 .txt { color: #4b4b4b;} /* box02 --------------------------------------- */ #watch_fullorder .box02 .story { margin-bottom: 20px; padding: 45px 53.125% 55px 3.125%;} #watch_fullorder .box02 .story.s_01 {background: url(../img/watch/bg_story01.jpg) no-repeat right center; background-size: auto;} #watch_fullorder .box02 .story.s_02 {background: url(../img/watch/bg_story02.jpg) no-repeat right center; background-size: auto;} #watch_fullorder .box02 .story.s_03 {background: url(../img/watch/bg_story03.jpg) no-repeat right center; background-size: auto; margin-bottom: 100px; padding: 155px 53.125% 170px 3.125%;} #watch_fullorder .box02 .story.s_04 {background: url(../img/watch/bg_story04.jpg) no-repeat right top; background-size: auto;} #watch_fullorder .box02 .story .midTitle { color: #fff; text-align: center; text-shadow:1px 3px 3px rgba(0,0,0,0.7);} #watch_fullorder .box02 .story .txtWrap { margin-bottom: 10px;} #watch_fullorder .box02 .story ul li { float: left; width: 48%; /* box-shadow:1px 1px 1px 1px rgba(255,255,255,0.2),-1px -1px 1px 1px rgba(255,255,255,0.2);*/ border: 1px solid rgba(255,255,255,0.1);} #watch_fullorder .box02 .story ul li:last-child { float: right; width: 48%;} /* box03 --------------------------------------- */ #watch_fullorder .box03{ margin-bottom: 60px;} #watch_fullorder .box03 .slider02 .slick-slide { margin: 0 10px 35px;} #watch_fullorder .box03 .slider02 .slick-slide .imgBox{ margin-bottom: 15px;} #watch_fullorder .box03 .attention { margin: 0px 6.25% 30px;} /* box05 --------------------------------------- */ #watch_fullorder .box05 { margin-bottom: 90px;} /***** ■■SP■■ ****/ @media screen and (max-width: 800px) { /* mainBox --------------------------------------- */ #watch_fullorder .mainBox .mainTitle { position: absolute; top: 82%; left: 0; width: 100%; color: #fff;} /* box01 --------------------------------------- */ #watch_fullorder .box01 { background: #000; margin-bottom: 40px; padding-bottom: 30px;} #watch_fullorder .box01 .read{ font-size: 16px; font-size: 1.6rem;} #watch_fullorder .box01 .txt { margin: 0px 0px 30px;} #watch_fullorder .box01 .txt01{ margin: 0px 4% 30px;} #watch_fullorder .box01 .box01_inner01{ margin: 0;} #watch_fullorder .box01 .box01_inner01 ul { margin: 0 4% 0px;} #watch_fullorder .box01 .box01_inner01 ul li, #watch_fullorder .box01 .box01_inner01 ul li:last-child{ float: none; width: 100%;} #watch_fullorder .box01 .box01_inner01 ul li{ margin-bottom: 50px;} #watch_fullorder .box01 .box01_inner01 ul li img { margin-bottom: 15px;} #watch_fullorder .box01 .box01_inner01 li ul.parts{ margin: 0px;} #watch_fullorder .box01 .box01_inner01 ul li ul.parts li { height: 24px; line-height: 24px;} #watch_fullorder .box01 .box01_inner02{ margin: 0px 4% 0px; padding: 30px 4% 0px; background: #fff;} #watch_fullorder .box01 .box01_inner02 ul li, #watch_fullorder .box01 .box01_inner02 ul li:last-child{ float: none; width: 100%;} #watch_fullorder .box01 .box01_inner02 ul li { margin-bottom: 30px;} #watch_fullorder .box01 .box01_inner02 ul li ul li { float: left; width: 49%; margin-bottom: 0;} #watch_fullorder .box01 .box01_inner02 ul li ul li:last-child { float: right; width: 49%; margin-bottom: 0;} #watch_fullorder .box01 .box01-inner02 ul li img { margin-bottom: 20px;} /* box02 --------------------------------------- */ #watch_fullorder .box02 { margin-bottom: 0;} #watch_fullorder .box02 .story { display: flex; justify-content: space-between; flex-wrap: wrap; display: -webkit-flex; display: -ms-flex; -ms-flex-pack: justify; -webkit-justify-content: space-between; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap;} #watch_fullorder .box02 .story.s_01 , #watch_fullorder .box02 .story.s_02, #watch_fullorder .box02 .story.s_03, #watch_fullorder .box02 .story.s_04{ background: none; padding: 0px 4% 20px;} #watch_fullorder .box02 .story.s_03 { margin-bottom: 0px;} #watch_fullorder .box02 .story .midTitle { color: #4b4b4b; font-size: 14px; font-size: 1.4rem; font-weight: bold; font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; text-shadow:none; order: 2;} #watch_fullorder .box02 .story .txtWrap { order: 3;} #watch_fullorder .box02 .story .imgArea { order: 1; width: 100%;} #watch_fullorder .box02 .story .story_img { margin-bottom: 5px;} #watch_fullorder .box02 .story.s_03 .story_img { margin-bottom: 20px;} #watch_fullorder .box02 .story ul { width: 100%; margin-bottom: 20px;} #watch_fullorder .box02 .story ul li { float: left; width: 49%;} #watch_fullorder .box02 .story ul li:last-child { float: right; width: 49%;} /* box03 --------------------------------------- */ #watch_fullorder .box03{ margin-bottom: 40px;} #watch_fullorder .box03 .slider02 { margin: 0 4%;} #watch_fullorder .box03 .slider02 .slick-slide { margin: 0 30px 35px;} #watch_fullorder .box03 .attention { margin: 0px 4% 30px;} /* modal --------------------------------------- */ .md-spec { padding: 10px; display: block; box-sizing: border-box; } .md-spec .leftCont { width: 100%; display: block; } .md-spec .leftCont img{ width: 100%;} .md-spec .rightCont { width: 100%; display: block; margin: 0; padding: 20px 0 30px 0; } .md-spec .rightCont .txt {margin: 0 0 15px 0;} .md-spec .rightCont .txt h3{ margin: 0 0 5px 0;} .md-spec .rightCont .txt h3,.md-spec .rightCont .txt p{ margin: 0;} .md-spec .rightCont .txt p{ padding: 0 0 0 5px;} /* box05 --------------------------------------- */ #watch_fullorder .box05 { margin-bottom: 0; padding: 30px 15px 50px;} } /******************* #watch_customorder *********************/ /* mainbox --------------------------------------- */ #watch_customorder .mainBox { margin-bottom: 20px; position: relative; } #watch_customorder .mainBox .mainTitle { position: absolute; top:240px; left: 0; width: 40%; text-align: center; color: #ffffff;padding-top: 0;} #watch_customorder .mainBox .mainTitle span{ margin-top: 0;} /* box01 --------------------------------------- */ #watch_customorder .box01{ margin-bottom: 20px;} #watch_customorder .box01 .read{ margin-bottom: 10px;} /* box02 --------------------------------------- */ #watch_customorder .box02{ margin-bottom: 60px;} #watch_customorder .box02 .box02-inner{ position: relative; padding-top: 56.25%; margin-bottom: 20px;} #watch_customorder .box02 .box02-inner .imgBox{ position: absolute; top: 0; left: 0;width: 100%;} #watch_customorder .box02 .box02-inner .largeTitle{ text-align: center; font-size: 24px; font-size: 2.4rem;} #watch_customorder .box02 .box02-inner .largeTitle span{ font-size: 18px; font-size: 1.8rem; display: block;} #watch_customorder .box02 .box02-inner .txtBox{ margin-bottom: 10px; position: absolute; top: 100px; right: 3.125%; width: 40%;} #watch_customorder .box02 .box02-inner .txtBox .txt { margin-bottom: 10px;} #watch_customorder .box02 .slick-dots{ bottom: 70px; width: 50%;} #watch_customorder .box02 .box02-inner .txtBox .btn{ background: none; border: 1px solid #4b4b4b; max-width: 120px; padding: 8px 0; margin: 0 auto; display: block;} /* box03 --------------------------------------- */ #watch_customorder .box03{ margin-bottom: 60px;} /***** ■■SP■■ ****/ @media screen and (max-width: 800px) { #watch_customorder .mainBox .mainTitle { position: absolute; top: auto; bottom: 0; left: 0; width: 100%; height: 70px; color: #ffffff; } /* box01 --------------------------------------- */ #watch_customorder .box01{ padding: 0 4%;} /* box02 --------------------------------------- */ #watch_customorder .box02 .box02-inner{ margin-bottom: 5px;} #watch_customorder .box02 .box02-inner .largeTitle{ font-size: 20px; font-size: 2.0rem;} #watch_customorder .box02 .box02-inner .largeTitle span{ font-size: 16px; font-size: 1.6rem; margin-top: 0;} #watch_customorder .box02 .box02-inner .txtBox{ top: 24%;} } /******************* #customorder automatic *********************/ #customorder_automatic .imgBox{ margin-bottom: 15px;} /* mainbox --------------------------------------- */ #customorder_automatic .mainBox { position: relative; margin-bottom: 30px;} #customorder_automatic .mainBox .mainTitle { position: absolute; top:240px; left: 0; width: 40%; text-align: center;padding-top: 0;} #customorder_automatic .mainBox .mainTitle span{ margin-top: 0;} /* columnBox --------------------------------------- */ #customorder_automatic .columnBox{ font-size: 0; line-height: 0;} #customorder_automatic .columnBox .columnCell{ display: inline-block; vertical-align: top; width: 48.95%; } /* #customorder_automatic .columnBox .columnCell:nth-child(even) { margin-left: 2%;} */ #customorder_automatic .columnBox .columnCell:nth-child(even) { margin-left: 1.8%;} /* box01 --------------------------------------- */ #customorder_automatic .box01 .read{ margin-top: 20px; margin-bottom: 20px;} #customorder_automatic .box01 .largeTitle{ margin-bottom: 40px;} #customorder_automatic .box01 .txt01 {margin-bottom: 20px;} #customorder_automatic .box01 > .flexBox2 > .flexCell{ margin-bottom: 60px;} #customorder_automatic .box01 > .flexBox2:last-child > .flexCell { margin-bottom: 0;} #customorder_automatic .box01 > .flexBox2 > .flexCell:nth-child(3) .flexBox2{ margin-bottom: 0;} /* box02 --------------------------------------- */ #customorder_automatic .box02 .slider01{ margin-bottom: 40px;} #customorder_automatic .box02 .slider01 .slick-slide { margin: 0 10px;} /* box03 --------------------------------------- */ #customorder_automatic .box03{ margin-bottom: 60px;} #customorder_automatic .box03 .box03-inner { margin-bottom: 40px;} #customorder_automatic .box03 .box03-inner .midTitle { background: #ede4dd; color: #4b4b4b; padding: 6px 0; font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; text-align: center; line-height: 1.2; } #customorder_automatic .box03 .box03-inner .txt, #customorder_automatic .box03 .box03-inner .imgBox{ text-align: center;} #customorder_automatic .box03 .box03-inner#index .imgBox img.adjust{ width: 75%;} #customorder_automatic .box03 .box03-inner#casecolor img{ max-width: 470px;} #customorder_automatic .box03 .box03-inner#belt img{ max-width: 640px;} #customorder_automatic .box03 .box03-inner#mojiban .flexBox2 .flexCell .t_center{ margin-bottom: 5px;} /* box04 --------------------------------------- */ #customorder_automatic .box04{ margin-bottom: 60px; padding-top:75px; margin-top: -75px;} #customorder_automatic .box04 .slider02 .slick-slide{ margin: 0px 10px;} #customorder_automatic .box04 .slider02 .slick-slide img{ margin-bottom: 15px;} /* box05 --------------------------------------- */ #customorder_automatic .box05{ margin-bottom: 60px;} #customorder_automatic .box05 .txt01{ margin-bottom: 20px;} #customorder_automatic .box05 .story { margin-bottom: 20px;} #customorder_automatic .box05 .story.s_01 {background: url(../img/watch/custom-order/img_custom_15_pc.jpg) no-repeat right center; background-size: auto; padding: 60px 53.125% 80px 3.125%;} #customorder_automatic .box05 .story.s_02 {background: url(../img/watch/custom-order/img_custom_16_pc.jpg) no-repeat right center; background-size: auto; padding: 80px 53.125% 80px 3.125%;} #customorder_automatic .box05 .story .midTitle { text-align: center;} #customorder_automatic .box05 .story .txtWrap { margin-bottom: 10px;} #customorder_automatic .box05 .story ul li { float: left; width: 48%; /* box-shadow:1px 1px 1px 1px rgba(255,255,255,0.2),-1px -1px 1px 1px rgba(255,255,255,0.2);*/ border: 1px solid rgba(255,255,255,0.1);} #customorder_automatic .box05 .story ul li:last-child { float: right; width: 48%;} /* box06 --------------------------------------- */ #customorder_automatic .box06{ margin-bottom: 60px;} #customorder_automatic .box06 .slider03 .slick-slide{ margin: 0px 10px;} #customorder_automatic .box06 .slider03 .slick-slide img{ margin-bottom: 15px;} /* box07 --------------------------------------- */ #customorder_automatic .box07 { padding: 30px 0;} #customorder_automatic .box07 .box07-inner{ background: #fff; box-sizing: border-box; margin: 0 auto 30px; padding: 34px 32px; width: auto; max-width: 1024px; } #customorder_automatic .box07.flow ul li{ min-height: 175px;} /* box09 --------------------------------------- */ #customorder_automatic .box09{ border: 1px solid #d9bcac; padding: 30px 60px; margin: 0 0 60px; } #customorder_automatic .box09 .txt01, #customorder_automatic .box09 .imgBox, #customorder_automatic .box09 .txt02{ margin-bottom: 20px;} /***** ■■SP■■ ****/ @media screen and (max-width: 800px) { /* layout --------------------------------------- */ #customorder_automatic .boxWrap{ padding: 0 4%;} /* flexBox --------------------------------------- */ #customorder_automatic .flexBox2 { display: block;} #customorder_automatic .flexBox2 .flexCell{ width: 100%;} #customorder_automatic .flexBox2 .flexCell:nth-child(even){ margin-left: 0;} /* mainBox --------------------------------------- */ #customorder_automatic .mainBox .mainTitle { padding: 7px 0; position: absolute; top: auto; bottom: 8px;left: 0; width: 100%;} /* box01 --------------------------------------- */ #customorder_automatic .box01 .read{ margin-top: 0;} #customorder_automatic .box01 .largeTitle{ margin-bottom: 20px;} #customorder_automatic .box01 > .flexBox2 > .flexCell{ margin-bottom: 40px;} #customorder_automatic .box01 > .flexBox2 > .flexCell.box01-img01{ margin-bottom: 20px;} /* box03 --------------------------------------- */ #customorder_automatic .box03 .box03-inner .flexCell{ margin-bottom: 40px;} #customorder_automatic .box03 .box03-inner#belt_ryuzu .txt{ min-height: inherit;} #customorder_automatic .box03 .box03-inner#openwork .flexCell{ margin-bottom: 0;} #customorder_automatic .box03 .box03-inner#casecolor, #customorder_automatic .box03 .box03-inner#openwork { margin-bottom: 40px;} #customorder_automatic .box03 .box03-inner#index .imgBox img.adjust, #customorder_automatic .box03 .box03-inner#byoshin .imgBox img.adjust{ width: 100%; max-width: 480px;} /* box04 --------------------------------------- */ #customorder_automatic .box04{ margin-bottom: 30px; padding-top: 90px; margin-top: -90px;} /* box05 --------------------------------------- */ #customorder_automatic .box05 { margin-bottom: 30px;} #customorder_automatic .box05 .story { display: flex; justify-content: space-between; flex-wrap: wrap; display: -webkit-flex; display: -ms-flex; -ms-flex-pack: justify; -webkit-justify-content: space-between; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap;} #customorder_automatic .box05 .story.s_01 , #customorder_automatic .box05 .story.s_02{ background: none; padding: 0px 0px 20px;} #customorder_automatic .box05 .story.s_02 { margin-bottom: 0px;} #customorder_automatic .box05 .story .midTitle { color: #4b4b4b; font-size: 14px; font-size: 1.4rem; font-weight: bold; font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; text-shadow:none; order: 2;} #customorder_automatic .box05 .story .txtWrap { order: 3;} #customorder_automatic .box05 .story .imgArea { order: 1; width: 100%;} #customorder_automatic .box05 .story .story_img { margin-bottom: 5px;} #customorder_automatic .box05 .story ul { width: 100%; margin-bottom: 20px;} #customorder_automatic .box05 .story ul li { float: left; width: 49%;} #customorder_automatic .box05 .story ul li:last-child { float: right; width: 49%;} /* box06 --------------------------------------- */ #customorder_automatic .box06{ margin-bottom: 30px;} /* box07 --------------------------------------- */ #customorder_automatic .box07 { padding: 0; margin: 0; margin-bottom: 60px; padding: 20px 20px 30px;} #customorder_automatic .box07 .box07-inner{ margin: 0 auto 20px; padding: 15px 10px; width: auto; } #customorder_automatic .box07.flow ul li{ min-height: inherit;} /* box09 --------------------------------------- */ #customorder_automatic .box09 { margin: 0 4% 60px; padding: 30px 4%;} } /******************* #customorder quartz *********************/ /* flexBox --------------------------------------- */ #customorder_quartz .flexBox2 .flexCell{ display: inline-block; vertical-align: top; width: 48.95%; } #customorder_quartz .flexBox2 .flexCell:nth-child(even) { margin-left: 2%;} #customorder_quartz .flexBox2 .flexCell .imgBox{ margin-bottom: 15px;} /* mainbox --------------------------------------- */ #customorder_quartz .mainBox { position: relative; margin-bottom: 30px;} #customorder_quartz .mainBox .mainTitle { position: absolute; top:240px; left: 0; width: 40%; text-align: center;padding-top: 0;} #customorder_quartz .mainBox .mainTitle span{ margin-top: 0;} /* columnBox --------------------------------------- */ #customorder_quartz .columnBox{ font-size: 0; line-height: 0;} #customorder_quartz .columnBox .columnCell{ display: inline-block; vertical-align: top; width: 48.95%; } /* #customorder_quartz .columnBox .columnCell:nth-child(even) { margin-left: 2%;} */ #customorder_quartz .columnBox .columnCell:nth-child(even) { margin-left: 1.7%;} /* box01 --------------------------------------- */ #customorder_quartz .box01 .read{ margin-top: 20px; margin-bottom: 20px;} #customorder_quartz .box01 .largeTitle{ margin-bottom: 40px;} #customorder_quartz .box01 .txt01 {margin-bottom: 20px;} #customorder_quartz .box01 > .flexBox2 > .flexCell{ margin-bottom: 60px;} #customorder_quartz .box01 > .flexBox2 > .flexCell:nth-child(3) .flexBox2{ margin-bottom: 0;} /* box02,box03 --------------------------------------- */ #customorder_quartz .box02, #customorder_quartz .box03{ margin-bottom: 60px;} #customorder_quartz .box02{ text-align: center;} #customorder_quartz .box03 .slider01{ margin-bottom: 40px;} #customorder_quartz .box02 img.adjust{ max-width: 690px; margin: 0 auto;} /* box04 --------------------------------------- */ #customorder_quartz .box04{ margin-bottom: 60px;} #customorder_quartz .box04 .box04-inner { margin-bottom: 40px;} #customorder_quartz .box04 .box04-inner .midTitle { background: #ede4dd; color: #4b4b4b; padding: 6px 0; font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; text-align: center; line-height: 1.2; } #customorder_quartz .box04 .box04-inner .txt, #customorder_quartz .box04 .box04-inner .imgBox{ margin-bottom: 15px;} #customorder_quartz .box04 .box04-inner .imgBox{ text-align: center;} #customorder_quartz .box04 .box04-inner#index .imgBox img.adjust{ width: 75%; margin: 0 auto;} #customorder_quartz .box04 .box04-inner#belt img{ max-width: 840px; margin: 0 auto;} /* box07 --------------------------------------- */ #customorder_quartz .box05 { padding: 30px 0;} #customorder_quartz .box05 .box05-inner{ background: #fff; box-sizing: border-box; margin: 0 auto 30px; padding: 34px 32px; width: auto; max-width: 1024px; } #customorder_quartz .box05.flow ul li{ min-height: 175px;} /***** ■■SP■■ ****/ @media screen and (max-width: 800px) { /* layout --------------------------------------- */ #customorder_quartz .boxWrap{ padding: 0 4%;} /* flexBox --------------------------------------- */ #customorder_quartz .flexBox2 { display: block;} #customorder_quartz .flexBox2 .flexCell{ width: 100%;} #customorder_quartz .flexBox2 .flexCell:nth-child(even){ margin-left: 0;} /* mainBox --------------------------------------- */ #customorder_quartz .mainBox .mainTitle { background: #efefef; padding: 7px 0; position: absolute; top: auto; bottom: 8px;left: 0; width: 100%;} /* box01 --------------------------------------- */ #customorder_quartz .box01 .read{ margin-top: 0;} #customorder_quartz .box01 .largeTitle{ margin-bottom: 20px;} #customorder_quartz .box01 > .flexBox2 > .flexCell{ margin-bottom: 40px;} #customorder_quartz .box01 > .flexBox2 > .flexCell.box01-img01{ margin-bottom: 20px;} /* box04 --------------------------------------- */ #customorder_quartz .box04 .box04-inner{ margin-bottom: 0;} #customorder_quartz .box04 .box04-inner .flexCell{ margin-bottom: 40px;} #customorder_quartz .box04 .box04-inner#belt .txt{ min-height: inherit;} #customorder_quartz .box04 .box04-inner#index .imgBox img.adjust{ width: 100%; max-width: 480px;} /* box07 --------------------------------------- */ #customorder_quartz .box05 { padding: 0; margin: 0; margin-bottom: 60px; padding: 20px 20px 30px;} #customorder_quartz .box05 .box05-inner{ margin: 0 auto 60px; padding: 15px 10px; width: auto; } #customorder_quartz .box05.flow ul li{ min-height: inherit;} } /******************* #disney *********************/ /* flexBox --------------------------------------- */ #watch_disney .flexBox2 .flexCell-left{ float: left;} #watch_disney .flexBox2 .flexCell-right{ float: right;} #watch_disney .flexBox2 .flexCell-right { margin-left: 2%;} /* columnBox --------------------------------------- */ #watch_disney .columnBox{ font-size: 0; line-height: 0;} #watch_disney .columnBox .columnCell{ display: inline-block; vertical-align: top; width: 48.95%; } #watch_disney .columnBox .columnCell:nth-child(even) { margin-left: 2%;} /* mainbox --------------------------------------- */ #watch_disney .mainBox { position: relative; margin-bottom: 30px;} #watch_disney .mainBox .mainTitle { position: absolute; top:240px; left: 0; width: 40%; text-align: center; color: #fff;padding-top: 0;} #watch_disney .mainBox .mainTitle span{ margin-top: 0;} /* box01 --------------------------------------- */ #watch_disney .box01 .read{ margin-bottom: 20px;} #watch_disney .box01 .txt{ margin-bottom: 30px;} /* box02 --------------------------------------- */ #watch_disney .box02{ margin-bottom: 60px;} #watch_disney .box02 .storyWrap{ margin-bottom: 60px;} #watch_disney .box02 .txt01{ margin-bottom: 20px;} #watch_disney .box02 .story { margin-bottom: 20px;} #watch_disney .box02 .story.s_01 {background: url(../img/watch/bg_disney_story01.jpg) no-repeat right center; background-size: auto; padding: 50px 53.125% 50px 3.125%;} #watch_disney .box02 .story.s_02 {background: url(../img/watch/bg_disney_story02.jpg) no-repeat right center; background-size: auto; padding: 50px 53.125% 50px 3.125%;} #watch_disney .box02 .story.s_03 {background: url(../img/watch/bg_disney_story03.jpg) no-repeat right center; background-size: auto; padding: 50px 53.125% 50px 3.125%;} #watch_disney .box02 .story .midTitle { text-align: center;} #watch_disney .box02 .story .txtWrap { margin-bottom: 10px;} #watch_disney .box02 .story ul li { float: left; width: 48%; /* box-shadow:1px 1px 1px 1px rgba(255,255,255,0.2),-1px -1px 1px 1px rgba(255,255,255,0.2);*/ border: 1px solid rgba(0,0,0,0.1);} #watch_disney .box02 .story ul li:last-child { float: right; width: 48%;} #watch_disney .box02 .slider01 .slick-slide { margin: 0 10px;} #watch_disney .box02 .slider01 ul li .imgBox{ margin-bottom: 15px;} /* box03 --------------------------------------- */ #watch_disney .box03 .imgBox01 { margin-bottom: 20px;} #watch_disney .box03 .txt01 { margin-bottom: 40px;} #watch_disney .box03 .box03-inner01 { margin-bottom: 60px;} #watch_disney .box03 .box03-inner01 .imgBox02{ background: url(../img/watch/img_disney_sec04_02_180924_pc.jpg) no-repeat right center; background-size: cover; margin-bottom: 40px; padding: 65px 53.125% 80px 3.125%;} #watch_disney .box03 .box03-inner01 .imgBox02 .txt02{ margin-bottom: 20px;} #watch_disney .box03 .box03-inner01 .flexBox2 .flexCell-left{ width: 45%;} #watch_disney .box03 .box03-inner01 .flexBox2 .flexCell-right{ width: 53%;} #watch_disney .box03 .box03-inner01 .flexBox2 .flexCell-right .midTitle{ margin-top: 20px;} #watch_disney .box03 .box03-inner01 .txt03{ margin: 30px 0 0;} #watch_disney .box03 .box03-inner02 { margin-bottom: 60px;} #watch_disney .box03 .box03-inner02 .slider02 .slick-slide{ margin: 0 10px;} #watch_disney .box03 .box03-inner02 .slider02 .imgBox{ margin-bottom: 15px;} #watch_disney .box03 .box03-inner02 .attention { margin-bottom: 30px;} #watch_disney .box04 .box04-inner03 .slider03 .slick-slide{ margin: 0 10px;} #watch_disney .box04 .box04-inner03 .slider03 .slick-slide .imgBox{ margin-bottom: 15px;} /* box04 --------------------------------------- */ #watch_disney .box04{ padding-top: 80px; margin-top: -80px; margin-bottom: 60px; } #watch_disney .box04 .imgBox01{ margin-bottom: 20px;} #watch_disney .box04 .txt02{ text-align: center; padding: 15px 0 30px;} #watch_disney .box04 .box04-inner01{ margin-bottom: 30px;} #watch_disney .box04 .box04-inner02{ margin-bottom: 60px;} #watch_disney .box04 .box04-inner02 .imgBox02, #watch_disney .box04 .box04-inner02 .txt03{ margin-bottom: 40px;} #watch_disney .box04 .box04-inner02 .openLink{ padding: 15px 0; text-align: center;} #watch_disney .box04 .box04-inner03{ margin-bottom: 60px;} #watch_disney .box04 .box04-inner03 .slider03 .slick-slide{ margin: 0 10px;} #watch_disney .box04 .box04-inner03 .slider03 .slick-slide .imgBox{ margin-bottom: 15px;} #watch_disney .box04 .box04-inner04{ background: #faf3ee; padding: 30px 3.125% 30px; margin-bottom: 30px; } #watch_disney .box04 .box04-inner04 .flexBox2 { margin-bottom: 40px;} #watch_disney .box04 .box04-inner04 .slider04 .slick-slide, #watch_disney .box04 .box04-inner04 .slider04-nav .slick-slide{ margin: 0 10px;} #watch_disney .box04 .box04-inner04 .slider04-nav { margin-bottom: 0;} #watch_disney .box04 .box04-inner04 .slider05 { margin: 0 20px;} #watch_disney .box04 .box04-inner04 .slider05 .slick-slide{ margin: 0 10px;} /* box05 --------------------------------------- */ #watch_disney .box05 { margin-bottom: 90px;} #watch_disney .box05 .box05-inner01 .item{ margin-bottom: 40px;} #watch_disney .box05 .box05-inner01 .item .imgBox{ margin-bottom: 20px;} #watch_disney .box05 .box05-inner01 .item .flexBox2 .flexCell-left{ order: 1; width: 45%;} #watch_disney .box05 .box05-inner01 .item .flexBox2 .flexCell-right{ order: 2; width: 53%;} #watch_disney .box05 .box05-inner01 .item .flexBox2 .midTitle{ margin-top: 20px;} #watch_disney .box05 .box05-inner01 .item .flexBox2 .txt02{ margin-top: 10px;} #watch_disney .box05 .box05-inner01 .item .columnBox li .txt{ padding: 15px 0 0;} #watch_disney .box05 .box05-inner02 .slider06 .slick-slide{ margin: 0 10px;} #watch_disney .box05 .box05-inner02 .slider06 .imgBox{ margin-bottom: 15px;} /* character --------------------------------------- */ .wrap.character { width: 90%; padding: 100px 5%;} .wrap.character ul { width: 100%; margin-bottom: 50px;} .wrap.character ul:after { content: "."; display: block; clear: both; height: 0; visibility: hidden;} .wrap.character ul li { float: left; width: 33.333%;} .wrap.character ul li img { width: 100%; } /***** ■■SP■■ ****/ @media screen and (max-width: 800px) { /* layout --------------------------------------- */ #watch_disney .boxWrap { padding: 0 4%;} /* flexBox --------------------------------------- */ #watch_disney .flexBox2 .flexCell-left, #watch_disney .flexBox2 .flexCell-right{ float: none;} #watch_disney .flexBox2 .flexCell-right { margin-left: 0;} /* mainbox --------------------------------------- */ #watch_disney .mainBox .mainTitle { position: absolute; top: 82%; left: 0; width: 100%; color: #fff; } /* box02 --------------------------------------- */ #watch_disney .box02 { margin-bottom: 40px;} #watch_disney .box02 .storyWrap{ margin-bottom: 20px;} #watch_disney .box02 .story { display: flex; justify-content: space-between; flex-wrap: wrap; display: -webkit-flex; display: -ms-flex; -ms-flex-pack: justify; -webkit-justify-content: space-between; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap;} #watch_disney .box02 .story.s_01 , #watch_disney .box02 .story.s_02, #watch_disney .box02 .story.s_03{ background: none; padding: 0px 0px 20px;} #watch_disney .box02 .story.s_03 { margin-bottom: 0px;} #watch_disney .box02 .story .midTitle { color: #4b4b4b; font-size: 14px; font-size: 1.4rem; font-weight: bold; font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; text-shadow:none; order: 2;} #watch_disney .box02 .story .txtWrap { order: 3;} #watch_disney .box02 .story .imgArea { order: 1; width: 100%;} #watch_disney .box02 .story .story_img { margin-bottom: 5px;} #watch_disney .box02 .story.s_03 .story_img { margin-bottom: 20px;} #watch_disney .box02 .story ul { width: 100%; margin-bottom: 20px;} #watch_disney .box02 .story ul li { float: left; width: 49%; border: none;} #watch_disney .box02 .story ul li:last-child { float: right; width: 49%;} #watch_disney .box02 .story ul:nth-child(1) { margin-bottom: 5px;} #watch_disney .box02 .story.s_03 .imgArea .story_img { display: block; width: 49%; float: left;} #watch_disney .box02 .story.s_03 .imgArea .story_img img { width: 100%;} #watch_disney .box02 .story.s_03 .imgArea ul { width: 49%; float: right;} #watch_disney .box02 .story.s_03 .imgArea ul li { float: none; width: 100%; margin-bottom: 3.5%;} #watch_disney .box02 .story.s_03 .imgArea ul li:last-child { float: none; width: 100%; margin-bottom: 0;} #watch_disney .box02 .slider01.attention { margin: 0px 4% 30px;} /* box03 --------------------------------------- */ #watch_disney .box03 { margin-bottom: 0;} #watch_disney .box03 .box03-inner01 .imgBox02 { display: flex; justify-content: space-between; flex-wrap: wrap; display: -webkit-flex; display: -ms-flex; -ms-flex-pack: justify; -webkit-justify-content: space-between; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; background: none; padding: 0px 4% 20px;} #watch_disney .box03 .box03-inner01 .imgBox02{ padding: 0px 0 20px;} #watch_disney .box03 .box03-inner01 .imgBox02 .imgBox02-img{ margin-bottom: 15px;} #watch_disney .box03 .box03-inner01 .flexBox2 .flexCell-left, #watch_disney .box03 .box03-inner01 .flexBox2 .flexCell-right{ width: 100%;} /* box04 --------------------------------------- */ #watch_disney .box04 .box04-inner01 .flexBox22 .flexCell:nth-child(1) { margin-bottom: 30px;} #watch_disney .box04 .box04-inner04 .slider05{ margin: 0;} #watch_disney .box04{ padding-top: 60px; margin-top: -60px; } /* box05 --------------------------------------- */ #watch_disney .box05 .box05-inner01 .item .flexBox2 .flexCell-left, #watch_disney .box05 .box05-inner01 .item .flexBox2 .flexCell-right{ width: 100%;} #watch_disney .box05 .box05-inner01 .item .flexCell-right{ margin-bottom: 15px;} #watch_disney .box05 .box05-inner01 .item .flexBox2 .flexCell-left{ order: 2;} #watch_disney .box05 .box05-inner01 .item .flexBox2 .flexCell-right{ order: 1;} /* character --------------------------------------- */ .wrap.character { width: 100%; padding: 20px 4%; box-sizing: border-box;} .wrap.character ul li { float: none; width: 100%;} } /******************* #kuno *********************/ /* flexBox --------------------------------------- */ #watch_kuno .flexBox2 .flexCell-left{ float: left;} #watch_kuno .flexBox2 .flexCell-right{ float: right;} #watch_kuno .flexBox2 .flexCell-right { margin-left: 2%;} /* columnBox --------------------------------------- */ #watch_kuno .columnBox{ font-size: 0; line-height: 0;} #watch_kuno .columnBox .columnCell{ display: inline-block; vertical-align: top; width: 48.95%; } #watch_kuno .columnBox .columnCell:nth-child(even) { margin-left: 2%;} /* mainbox --------------------------------------- */ #watch_kuno .mainBox { position: relative; margin-bottom: 30px;} #watch_kuno .mainBox .mainTitle { position: absolute; top:240px; left: 0; width: 40%; text-align: center; color: #fff;padding-top: 0;} #watch_kuno .mainBox .mainTitle span{ margin-top: 0;} /* box01 --------------------------------------- */ #watch_kuno .box01 .read{ margin-bottom: 20px;} #watch_kuno .box01 .txt01{ margin-bottom: 30px;} #watch_kuno .box01 .txt02{ margin-bottom: 20px;} #watch_kuno .box01 .itemWrap .item{ margin-bottom: 60px;} #watch_kuno .box01 .itemWrap .item .columnBox{ margin-top: 10px;} #watch_kuno .box01 .itemWrap .item01.flexBox2 .flexCell-left{ width: 45%;} #watch_kuno .box01 .itemWrap .item01.flexBox2 .flexCell-left .txt{ margin-top: 20px;} #watch_kuno .box01 .itemWrap .item01.flexBox2 .flexCell-right{ width: 53%;} #watch_kuno .box01 .itemWrap .item01.flexBox2 .flexCell-right .midTitle{ margin-top: 20px;} #watch_kuno .box01 .itemWrap .item01.flexBox2 .flexCell-right .txt{ margin-bottom: 10px;} #watch_kuno .box01 .itemWrap .item01.flexBox2 .flexCell-left{ order: 1;} #watch_kuno .box01 .itemWrap .item01.flexBox2 .flexCell-right{ order: 2;} #watch_kuno .box01 .itemWrap .item02.flexBox2 .flexCell-left{ order: 1;} #watch_kuno .box01 .itemWrap .item02.flexBox2 .flexCell-right{ order: 2;} #watch_kuno .box01 .itemWrap .item02.flexBox2 .flexCell-right{ width: 45%;} #watch_kuno .box01 .itemWrap .item02.flexBox2 .flexCell-right .txt{ margin-top: 20px;} #watch_kuno .box01 .itemWrap .item02.flexBox2 .flexCell-left{ width: 53%;} #watch_kuno .box01 .itemWrap .item02.flexBox2 .flexCell-left .midTitle{ margin-top: 20px;} #watch_kuno .box01 .itemWrap .item02.flexBox2 .flexCell-left .txt{ margin-bottom: 10px;} #watch_kuno .box01 .itemWrap .item02.flexBox2 .flexCell-left .smallTitle { background: #7f2218; color: #fff; padding: 6px 0; font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; text-align: center; line-height: 1.2; } #watch_kuno .box01 .disc01 { background: url(../img/watch/bg_kuno_sec03.jpg) no-repeat right center; background-size: cover; padding: 50px 53.125% 50px 3.125%; margin-bottom: 60px;} #watch_kuno .box01 .disc01 .midTitle { text-align: center;} #watch_kuno .box01 .disc01 .txt { margin-bottom: 10px;} #watch_kuno .box01 .disc01 ul { margin-bottom: 20px;} #watch_kuno .box01 .disc01 ul li { float: left; width: 48%; /* box-shadow:1px 1px 1px 1px rgba(255,255,255,0.2),-1px -1px 1px 1px rgba(255,255,255,0.2);*/} #watch_kuno .box01 .disc01 ul li:last-child { float: right; width: 48%;} /* box02 --------------------------------------- */ #watch_kuno .box02{ margin-bottom: 60px;} #watch_kuno .box02 .txt01{ margin-bottom: 20px;} #watch_kuno .box02 .itemWrap{ margin-bottom: 60px;} #watch_kuno .box02 .itemWrap .flexBox2 { margin-bottom: 40px;} #watch_kuno .box02 .itemWrap .flexBox2 .flexCell-left{ width: 45%;} #watch_kuno .box02 .itemWrap .flexBox2 .flexCell-left .txt{ margin-top: 20px;} #watch_kuno .box02 .itemWrap .flexBox2 .flexCell-right{ width: 53%;} #watch_kuno .box02 .itemWrap .flexBox2 .flexCell-right .midTitle{ margin-top: 20px;} #watch_kuno .box02 .itemWrap .flexBox2 .flexCell-right .txt{ margin-bottom: 10px;} #watch_kuno .box02 .disc01 { background: url(../img/watch/bg_kuno_sec04.jpg) no-repeat right center; background-size: cover; padding: 85px 3.125% 85px 53.125%;} #watch_kuno .box02 .disc01 .midTitle { text-align: center;} #watch_kuno .box02 .disc01 .txt { margin-bottom: 10px;} #watch_kuno .box02 .disc01 ul { margin-bottom: 20px;} #watch_kuno .box02 .disc01 ul li { float: left; width: 48%; /* box-shadow:1px 1px 1px 1px rgba(255,255,255,0.2),-1px -1px 1px 1px rgba(255,255,255,0.2);*/} #watch_kuno .box02 .disc01 ul li:last-child { float: right; width: 48%;} /* box03 --------------------------------------- */ #watch_kuno .box03{ margin-bottom: 60px;} #watch_kuno .box03 .itemWrap .item{ margin-bottom: 40px;} #watch_kuno .box03 .itemWrap .flexBox2 .flexCell-right{ width: 45%;} #watch_kuno .box03 .itemWrap .flexBox2 .flexCell-right .txt{ margin-top: 20px;} #watch_kuno .box03 .itemWrap .flexBox2 .flexCell-left{ width: 53%;} #watch_kuno .box03 .itemWrap .flexBox2 .flexCell-left .midTitle{ margin-top: 20px;} #watch_kuno .box03 .itemWrap .flexBox2 .flexCell-left .txt{ margin-bottom: 10px;} #watch_kuno .box03 .disc01 { background: url(../img/watch/bg_kuno_sec05.jpg) no-repeat right center; background-size: cover; padding: 85px 3.125% 85px 53.125%; margin-bottom: 60px;} #watch_kuno .box03 .disc01 .midTitle { text-align: center;} #watch_kuno .box03 .disc01 .txt { margin-bottom: 10px; color: #fff;} #watch_kuno .box03 .disc01 ul { margin-bottom: 20px;} #watch_kuno .box03 .disc01 ul li { float: left; width: 48%; /* box-shadow:1px 1px 1px 1px rgba(255,255,255,0.2),-1px -1px 1px 1px rgba(255,255,255,0.2);*/ border: 1px solid rgba(255,255,255,0.1);} #watch_kuno .box03 .disc01 ul li:last-child { float: right; width: 48%;} /* box04 --------------------------------------- */ #watch_kuno .box04{ margin-bottom: 60px;} /***** ■■SP■■ ****/ @media screen and (max-width: 800px) { /* layout --------------------------------------- */ #watch_kuno .boxWrap { padding: 0 4%;} /* flexBox --------------------------------------- */ #watch_kuno .flexBox2 .flexCell-left, #watch_kuno .flexBox2 .flexCell-right{ float: none;} #watch_kuno .flexBox2 .flexCell-right { margin-left: 0;} /* mainbox --------------------------------------- */ #watch_kuno .mainBox .mainTitle { position: absolute; top: 82%; left: 0; width: 100%; color: #fff; } /* box01 --------------------------------------- */ #watch_kuno .box01 .itemWrap .item01.flexBox2 .flexCell-left, #watch_kuno .box01 .itemWrap .item01.flexBox2 .flexCell-right, #watch_kuno .box01 .itemWrap .item02.flexBox2 .flexCell-left, #watch_kuno .box01 .itemWrap .item02.flexBox2 .flexCell-right{ width: 100%;} #watch_kuno .box01 .itemWrap .item02.flexBox2 .flexCell-left{ order: 2;} #watch_kuno .box01 .itemWrap .item02.flexBox2 .flexCell-right{ order: 1;} #watch_kuno .box01 .itemWrap .item{display: flex; justify-content: space-between; flex-wrap: wrap; display: -webkit-flex; display: -ms-flex; -ms-flex-pack: justify; -webkit-justify-content: space-between; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap;} #watch_kuno .box01 .disc01 { padding: 30px 4%; background: #faf3ee; background-size: 100%; } #watch_kuno .box01 .disc01 .disc_img { margin-bottom: 20px;} #watch_kuno .box01 .disc01 ul { width: 100%; margin-bottom: 20px;} #watch_kuno .box01 .disc01 ul li { float: left; width: 49%;} #watch_kuno .box01 .disc01 ul li:last-child { float: right; width: 49%;} /* box02 --------------------------------------- */ #watch_kuno .box02 .itemWrap{ margin-bottom: 40px;} #watch_kuno .box02 .itemWrap .item.flexBox2 .flexCell-left, #watch_kuno .box02 .itemWrap .item.flexBox2 .flexCell-right{ width: 100%;} #watch_kuno .box02 .disc01 { padding: 30px 4%; background: #faf3ee; background-size: 100%; } #watch_kuno .box02 .disc01 .disc_img { margin-bottom: 20px;} #watch_kuno .box02 .disc01 ul { width: 100%; margin-bottom: 20px;} #watch_kuno .box02 .disc01 ul li { float: left; width: 49%;} #watch_kuno .box02 .disc01 ul li:last-child { float: right; width: 49%;} /* box03 --------------------------------------- */ #watch_kuno .box03 .itemWrap .item{display: flex; justify-content: space-between; flex-wrap: wrap; display: -webkit-flex; display: -ms-flex; -ms-flex-pack: justify; -webkit-justify-content: space-between; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap;} #watch_kuno .box03 .itemWrap .item.flexBox2 .flexCell-left, #watch_kuno .box03 .itemWrap .item.flexBox2 .flexCell-right{ width: 100%;} #watch_kuno .box03 .itemWrap .item.flexBox2 .flexCell-left{ order: 2;} #watch_kuno .box03 .itemWrap .item.flexBox2 .flexCell-right{ order: 1;} #watch_kuno .box03 .disc01 { background: none;} #watch_kuno .box03 .disc01{ margin-bottom: 0; background: none; padding: 0;} #watch_kuno .box03 .disc01 .disc_img { margin-bottom: 5px;} #watch_kuno .box03 .disc01 .txt{ color: #4b4b4b;} #watch_kuno .box03 .disc01 ul { width: 100%; margin-bottom: 20px;} #watch_kuno .box03 .disc01 ul li { float: left; width: 49%;} #watch_kuno .box03 .disc01 ul li:last-child { float: right; width: 49%;} }