@charset "utf-8"; /* common */ .all_wrapper h1, .all_wrapper h2, .all_wrapper h3, .all_wrapper h4, .all_wrapper h5, .all_wrapper h6, .all_wrapper p { margin: 0; } .all_wrapper ul { margin: 0; padding: 0; } @media only screen and (min-width: 768px) { .all_wrapper .sp_only { display: none!important; } } @media only screen and (max-width: 767px) { .all_wrapper .pc_only { display: none!important; } } .all_wrapper { font-feature-settings: "palt"; font-family: "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", "MS PGothic", sans-serif; overflow: hidden; } .cont_mv { text-align: center; position: relative; max-width: 1440px; margin: auto; } @media only screen and (min-width: 767px) { .cont_mv { height: 640px; } .all_wrapper .cont_mv_img { position: absolute; top: 0; left: 50%; margin-left: -720px; } } .cont_inner { max-width: 1052px; margin: auto; padding-left: 20px; padding-right: 20px; } /* cont_01 */ .cont_01 { padding-top: 81px; padding-bottom: 73px; text-align: center; max-width: 1214px; margin: auto; } .cont_01_bg { padding: 5.2% 0 5.8%; background: url(/-/media/cojp/product/home/img/bg_cont_01) no-repeat center top; background-size: 100% auto; } p.cont_01_subttl { font-size: 24px; line-height: 1.5; letter-spacing: 0.1em; margin: auto; width: 35.66%; } p.cont_01_ttl { margin-top: 17px; margin: 1.4% auto 0; width: 36.73%; } p.cont_01_txt { font-size: 16px; line-height: 1.75; margin-top: 33px; } @media only screen and (max-width: 1214px) { .cont_01 { padding-top: 5%; padding-bottom: 5%; } p.cont_01_txt { font-size: 1.317vw; } } @media only screen and (max-width: 767px) { .cont_01 { padding-top: 40px; padding-bottom: 36px; } .cont_01_bg { padding-top: 14.9vw; padding-bottom: 148%; background-image: url(/-/media/cojp/product/home/img/bg_cont_01_sp); background-size: 100% auto; } p.cont_01_subttl { width: 77.0666%; margin: auto; } p.cont_01_ttl { width: 69.466%; margin: 4.4vw auto 0; } p.cont_01_txt { font-size: 3.7333vw; margin-top: 6.8vw; letter-spacing: 0.06em; } } /* cont_02 */ .cont_02 { padding-top: 72px; padding-bottom: 80px; background-color: #fff2e9; } .cont_02_ttl { font-size: 28px; font-weight: 700; text-align: center; } .cont_02_ttl > span { color: #ff842a; } .all_wrapper .cont_02_product_list { list-style-type: none; margin-top: 28px; } .cont_02_product_listitem { background-color: #fff; } .cont_02_product_listitem + .cont_02_product_listitem { margin-top: 40px; } .product_item_box { display: flex; align-items: center; } .product_txtbox { order: 0; width: 50%; padding: 35px 0px 24px 40px; } .product_txt_ttl { font-size: 24px; font-weight: 700; line-height: 1.5; } p.product_txt { font-size: 14px; line-height: 1.75; min-height: 5em; margin-top: 10px; } .product_btn { background-color: #ff842a; display: block; color: #fff; width: 324px; height: 40px; line-height: 40px; text-align: center; margin-top: 24px; font-weight: 700; box-sizing: border-box; border-radius: 8px; } p.product_btn_note { font-size: 12px; margin-top: 4px; } .product_btn[target="_blank"] { background-image: url(/-/media/cojp/product/home/img/icon_tab); background-repeat: no-repeat; background-position: right 25px center; background-size: 14px auto; } .product_imgbox { order: 1; width: 50%; text-align: center; padding: 10px; min-height: 0%; } .product_imgbox > img { flex-shrink: 0; max-width: 100%; } .product_cat_ttl { background-color: #666; color: #fff; padding: 8px 40px; font-size: 18px; font-weight: 700; line-height: 1; } .product_index_link { font-weight: 700; background-color: #333; color: #fff; display: block; width: 324px; margin: 40px auto 0; text-align: center; font-size: 14px; line-height: 1; height: 40px; line-height: 40px; border-radius: 8px; box-sizing: border-box; } @media only screen and (max-width: 767px) { .cont_02 { padding-top: 33px; padding-bottom: 40px; } .cont_02_ttl { font-size: 20px; } .all_wrapper .cont_02_product_list { margin-top: 12px; } .cont_02_product_listitem + .cont_02_product_listitem { margin-top: 20px; } .product_item_box { flex-direction: column; } .product_imgbox { order: 0; width: 100%; padding: 20px; box-sizing: border-box; } .product_cat_ttl { padding: 5px 20px; font-size: 16px; } .product_txtbox { order: 1; width: 100%; padding: 0 20px 20px; box-sizing: border-box; } .product_txt_ttl { font-size: 18px; line-height: 1.2777; } .product_index_link { width: 100%; max-width: 240px; margin-top: 20px; height: auto; line-height: 1.2; padding: 12px 0; } .product_btn { width: 100%; max-width: 240px; margin: 14px auto 0; height: auto; line-height: 1.2; padding: 12px 0; } p.product_btn_note { text-align: center; } .product_btn[target="_blank"] { background-position: right 12px center; } }