@charset "utf-8"; /* --- ページ全体に関わる指定 ---------------------------------------------------------- */ html { font-size: 62.5%; } body { box-sizing: border-box; font-size: 1.6rem; /*color: #333333;*/ } div,p img { max-width: 100%; vertical-align: bottom; } /*ゴシック体指定*/ .f-Gothic { font-family: ' メイリオ, Meiryo, ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro',Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif; } /* 明朝体指定 */ .f-mincho { font-family: '游明朝','Yu Mincho',YuMincho,'Hiragino Mincho Pro',serif; } /* Google Fonts Body Class指定 */ .wf-notosansjapanese { font-family: "Noto Sans JP"; } /* レスポンシブ表示/非表示切り替え */ .pc { display:block; } .pc-i { display:inline; } .pc_menu { display:block; } .sp { display:none; } .menu { display:none; } @media screen and (max-width: 980px) { .pc_menu { display:none; } .menu { display:block } } @media screen and (max-width: 768px) { .pc { display:none; } .pc-i { display:none; } .sp { display:block; } } /* --- コンテンツ部分全体 --------------------------------------------------------------- */ main { position: relative; } section { width: 100%; } .wrapper { margin: 0 auto; } .container { width: 100%; } .flex { display: flex; flex-flow: row wrap; justify-content: flex-start; } .flex-btw { display: flex; flex-flow: row wrap; justify-content: space-between; } .box-stretch { align-items: stretch; } .box-center { align-items: center; } @media screen and (max-width: 768px) { .wrapper { width: 94%; margin: 0 auto; } .flex { display: block; } .flex-btw { display: block; } } /* --- コンテンツ部分全体(個別設定) --------------------------------------------------------------- */ main { top: 60px; } .wrapper { max-width: 1200px; } #content-position { top: 60px; } /* --- 素材のみのCSS --------------------------------------------------------------- */ .wrapper { max-width: 1200px; margin: 0 auto; } .container { width: 100%; } .fs-36 { font-size: 3.6rem; } .fs-30 { font-size: 3.0rem; } .fs-28 { font-size: 2.8rem; } .fs-24 { font-size: 2.4rem; } .fs-20 { font-size: 2.0rem; } .fs-18 { font-size: 1.8rem; } .fs-16 { font-size: 1.6rem; } .fs-14 { font-size: 1.4rem; } .fs-12 { font-size: 1.2rem; } .fs-10 { font-size: 1.0rem; } .fs-08 { font-size: 0.8rem; } .bold { font-weight: 600; padding: 0 2px; } .dott-border_w { height: 1px; position: relative; margin-top: 10px; } .dott-border_w::before { content: ""; background-image: linear-gradient(to right, #FFFFFF, #FFFFFF 3px, transparent 3px, transparent 8px); background-size: 8px 1px; background-repeat: repeat-x; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .dott-border_b { height: 1px; position: relative; margin-top: 10px; } .dott-border_b::before { content: ""; background-image: linear-gradient(to right, #222222, #222222 3px, transparent 3px, transparent 8px); background-size: 8px 1px; background-repeat: repeat-x; position: absolute; top: 0; bottom: 0; left: 0; right: 0; } @media screen and (max-width: 768px) { .fs-30 { font-size: 2.6rem; } } /* パーツ */ .imgfix { max-width: 100%; } .ap-blue { background-color: #1b4c75; } .ap-orange { background-color: #d39a12; } .bg_paleblue { background-color: #ccddf0; } .bg-darkblue { background-color: #ccddf0; } .arrow-line { border-bottom: solid 2px #ccddf0; width: calc(565/1200 * 100%); height: 20px; } .mark-yellow { display: inline; background-color: #e9e052; padding: 0 5px; } .f-g { color: #222222; } .f-w { color: #FFFFFF; } /* 共通項目 */ .tel-area_w { display: flex; flex-flow: row wrap; justify-content: space-between; border: 1px solid #FFFFFF; padding: 10px; margin-bottom: 120px; } .tel-area_txt_w { text-align: center; width: 50%; color: #FFFFFF; font-size: 24px; font-weight: 600; } .tel-area_no_w { background-color: #FFFFFF; width: 50%; padding: 20px; color: #07536f; font-size: 24px; font-weight: 600; background-image: url(../images/inq_tel.png); background-position: 5% 50%; background-size: 10%; background-repeat: no-repeat; text-align: center; line-height: 0.7; } .tel-area_no_b { font-size: 32px; padding-top: 3px; color: #1b4c75; } .tel-area_nobox_s { font-size: 16px; font-weight: 400; } @media screen and (max-width: 768px) { .tel-area_w { display: block; } .tel-area_txt_w { width: 100%; margin-bottom: 10px; } .tel-area_no_w { width: 100%; padding: 20px; background-position: 5% 50%; background-size: 10%; line-height: 0.7; } .tel-area_no_b { padding-left: 20px; } } /* ヘッダ */ #header_box { position: fixed; width: 100%; height: 60px; z-index: 10; box-shadow: 0px 5px 20px 10px #666666; } #wrapper_header{ max-width: 1200px; margin: 0 auto; } #header_area { position: relative; width: 100%; text-align: right; } .flexbox_menu { display: flex; width: 100%; flex-wrap: wrap; flex-direction: column; justify-content: center; } #mainlogo_box { position: absolute; top: 15px; left: 0px; } #navigation_box { width: auto; height: 60px; margin-left: 0px; margin-right: 280px; font-size: 18px; color: #FFFFFF; } #tel_box{ width: 220px; height: 60px; padding: 7px 10px 0 40px; background-color: #FFFFFF; background-image: url(../images/inq_tel.png); background-size: 12%; background-position: 7% 50%; background-repeat: no-repeat; font-size: 21px; color: #1b4c75; position: absolute; top: 0px; right: 60px; text-align: center; line-height: 0.8; } #tel_box02{ width: 220px; height: 60px; padding: 7px 10px 0 40px; background-color: #FFFFFF; background-image: url(../images/inq_tel.png); background-size: 12%; background-position: 7% 50%; background-repeat: no-repeat; font-size: 21px; color: 1b4c75; position: absolute; top: 0px; right: 60px; text-align: center; line-height: 1.1; } #tel_box_txt { color: #07536f; font-weight: 600; } .tel_box_txt_sub { font-size: 12px; } #tel_box_sp { width: 60px; height: 60px; background-color: #07536f; position: absolute; top: 0px; right: 60px; } #inq_box { width: 60px; height: 60px; background-color: #07536f; position: absolute; top: 0px; right: 0px; } /* メインビジュアル */ #mainvisual-area { position: relative; background-image: url(../images/main1.png); height: 650px; background-position: 50% 30%; background-size: 100% auto; background-repeat: no-repeat; } #mainvisual-inrarea{ position: absolute; height: 210px; background-color: rgba(27, 76, 117, 0.8); bottom: 0px; } #mainvisual-title_copy { position: absolute; width: 100%; text-align: center; letter-spacing: 10px; top: 250px; } #mainvisual-title_title { width: 98%; padding: 10px 0; margin: 0 auto; } @media screen and (max-width: 1200px) { #mainlogo_box { margin-left: 10px; } #mainvisual-area { background-position: 50% 20%; background-size: auto 120%; } } @media screen and (max-width: 1085px) { #mainlogo_box { margin-top: 5px; margin-left: -50px; } #mainlogo_size { width: 80% } } @media screen and (max-width: 768px) { #mainlogo_box { margin-top: 5px; margin-left: -110px; } #mainlogo_size { width: 60%; } #mainvisual-area { background-image: url(../images/main1.png); height: 300px; background-position: 50% 30%; background-size: auto 100%; } #mainvisual-inrarea{ height: 140px; } #mainvisual-title_copy { position: absolute; width: 100%; text-align: center; letter-spacing: 10px; top: 60px; } #mainvisual-title_title { width: 98%; padding: 20px 0; margin: 0 auto; } } /* 帯タイトル */ .maintitle-area { padding: 20px; margin-bottom: 0px; color: #FFFFFF; text-align: center; font-size: 3.6rem; } @media screen and (max-width: 768px) { .maintitle-area { font-size: 2.0rem; } } /* リード部分 */ #lead-area { padding: 120px 0; background-color: #EEEEEE; } .lead-area_txt { width: 90%; margin: 0 auto; text-align: center; line-height: 1.4; } .lead-area_txt_left { width: 75%; margin: 0 auto; text-align: left; line-height: 1.4; } .lead-area_casearea { width: 90%; margin: 80px auto; } .lead-area_casebox { width: 24%; } .lead-area_casearea_img { width: 80%; margin: 0 auto 20px auto; } .lead-area_casearea_txt { width: 100%; text-align: center; } .lead-area_servicestartbox { background-color: #FFFFFF; padding: 20px; margin: 80px auto 0 auto; text-align: center; line-height: 1.3; } .lead-area_moviebnr { width: 90%; margin: 60px auto 0 auto; } .lead-area_callcenterbnr { width: 90%; margin: 0 auto 100px auto; } @media screen and (max-width: 768px) { #lead-area { padding: 60px 0; background-color: #EEEEEE; } .lead-area_casearea { width: 90%; margin: 40px auto 80px auto; } .lead-area_txt_left { width: 90%; margin: 0 auto; text-align: left; line-height: 1.4; } } @media screen and (max-width: 768px) { .lead-area_casebox { width: 80%; margin: 0 auto 60px auto; } .lead-area_casebox:last-child { margin: 0 auto 0 auto; } .lead-area_casearea_img { width: 60%; } } /* サービス部分 */ #service-area { padding: 1px 0 1px 0; color: #FFFFFF; } .service-area_leadbox { position: relative; } .service-area_leadtextbox { width: 100%; } .service-area_aboutarea { width: 100%; margin: 0 auto 20px auto; } .service-area_aboutarea02 { width: 75%; margin: 0 auto 120px auto; } .service-area_aboutbox { width: 23%; padding: 10px 10px 20px 10px; margin: 0px auto 20px auto; background-color: #FFFFFF; } .service-area_aboutbox03 { width: 31%; padding: 10px 10px 20px 10px; margin: 0px auto 20px auto; background-color: #FFFFFF; } .service-area_aboutttl { width: 100%; padding: 10px; margin: 0 auto; background-color: #bed2da; color: #222222; text-align: center; line-height: 1.3; } .service-area_aboutimg { width: 50%; margin: 10px auto; } .service-area_abouttxt { width: 100%; text-align: center; color: #222222; } .service-area_aboutbox:hover { background-color: #f2f2cf; } .service-area_aboutbox03:hover { background-color: #f2f2cf; } .service-area_howtoarea { width: 80%; margin: 0 auto 60px auto; } .service-area_howtoarea-txt { width: 90%; margin: 0 auto 20px auto; color: #FFFFFF; text-align: left; line-height: 1.4; } .service-area_howtoarea-txt_desc { width: 90%; margin: 0 auto 120px auto; } .service-area_feebox_ttl02 { text-align: center; padding: 10px; color: #FFFFFF; text-align: center; background-color: #07536f; line-height: 1.4; } .service-area_feebox { width: 100%; border: 4px solid #07536f; margin: 0 auto 60px auto; padding: 40px 20px; background-color: #FFFFFF; } .service-area_m-feeinrbox { padding: 8px 0; background-color: #86a8b4; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; } .service-area_feeinrbox { margin: 0 auto 0px auto; padding: 10px; background-color: #FFFFFF; display: flex; justify-content: space-between; align-items: center; } .service-area_feeinrbox:nth-child(2n) { background-color: #DDDDDD; } .service-area_feebox_m-ttl { width: 50%; text-align: center; border-right: 2px solid #FFFFFF; color: #FFFFFF; } .service-area_feebox_m-fee { width: 50%; text-align: center; color: #FFFFFF; } .service-area_feebox_ttl { width: 50%; text-align: center; border-right: 2px solid #222222; color: #222222; } .service-area_feebox_fee { width: 50%; text-align: center; color: #d20000; font-size: 3.0rem; } #service-area_feebox_feecolor { color: #222222; font-size: 2.4rem; } .service-area_feebox_desc { margin-top: 20px; color: #222222; text-align: center; } .service-area_plan_linkbox_top { width: 80%; margin: 40px auto 20px auto; } .service-area_plan_linkbox { width: 80%; margin: 40px auto 0px auto; } .service-area_helpdeskarea { width: 100%; margin: 0 auto; background-color: #FFFFFF; padding: 40px 20px; text-align: center; } .service-area_helpdeskarea_img { width: 90%; margin: 0 auto 60px auto; } .service-area_helpdeskarea_txt { width: 90%; margin: 0 auto 60px auto; line-height: 1.3; } .service-area_plan_optionbox { width: 100%; padding: 0px; margin: 20px auto 0px auto; } .service-area_plan_optioninrbox { width: 48%; padding: 10px; } .service-area_plan_optioninrbox_ttl { padding: 8px; background-color: #86a8b4; color: #FFFFFF; text-align: center; margin-bottom: 20px; } .service-area_plan_optioninrbox_img { width: 100%; text-align: center; margin: 0 auto 0px auto; background-color: #FFFFFF; } .service-area_plan_optioninrbox_img img { width: 75%; } .service-area_plan_optioninrbox_txt { border-top: 2px dotted #222222; padding-top: 20px; margin-bottom: 20px; color: #222222; } .service-area_plan_optioninrbox_link { display: inline-block; width: 30%; margin: 0 27.5%; border: 1px solid #07536f; color: #07536f; padding: 10px 10px 8px 10px; background-image: url(../images/arrow_b.png); background-size: auto 35%; background-position: 95% 50%; background-repeat: no-repeat; } .service-area_txt { text-align: center; margin: 120px auto 60px auto; line-height: 1.3; } .service-area_txt02 { text-align: center; margin: 0px auto 120px auto; line-height: 1.3; } .service-area_txt_bold { font-size: 3.6rem; font-weight: 600; padding: 0 5px; background:linear-gradient(transparent 90%, #e9e052 0%); } .service-area_txt_bold02 { font-weight: 400; padding: 0 5px; background:linear-gradient(transparent 90%, #e9e052 0%); } .service-area_midashi { width: 100%; text-align: center; margin: 0 auto 40px auto; color: #FFFFFF; line-height: 1.3; } .service-area_undermidashi_b { width: 100%; text-align: center; margin: 20px auto 40px auto; color: #222222; line-height: 1.3; } .service-area_midashi_b { width: 100%; text-align: center; margin: 0 auto 40px auto; color: #222222; line-height: 1.3; } .service-area_plan_htlinkbox { width: 70%; text-align: center; margin: 0 auto 20px auto; } .service-area_plan_htlink { display: inline-block; width: 100%; padding: 15px; border: 1px solid #07536f; color: #07536f; } .service-area_plan_htlink:hover { background-color: #3f8ee5; color: #FFFFFF; } .service-area_plan_linkbox_inq { width: 48%; display: inline-block; padding: 10px 10px 10px 10px; background-color: #07536f; text-align: center; color: #FFFFFF; } .service-area_plan_linkbox_order { width: 48%; display: inline-block; padding: 10px 10px 10px 10px; background-color: #d39a12; text-align: center; color: #FFFFFF; } .service-area_plan_linkbox_desc { text-align: center; color: #222222; margin-bottom: 120px; } .service-area_plan_linkbox_desc03 { text-align: center; color: #222222; margin-top: 20px; margin-bottom: 120px; } .service-area_startflowbox { width: 90%; margin: 40px auto 60px auto; } .service-area_startflowboxbtm { width: 90%; margin: 40px auto 40px auto; } .service-area_startflowinrbox { width: 32%; background-color: #DDDDDD; padding: 10px 10px 20px 10px; } .service-area_startflowinrbox-img { width: 100%; } .service-area_startflowinrbox-txt { width: 100%; background-color: #DDDDDD; padding: 10px; text-align: center; } .service-area_startflowinrbox-txtttl { margin-bottom: 10px; } .service-area_plan_optionbox { } @media screen and (max-width: 768px) { .service-area_aboutarea02 { width: 100%; margin: 0 auto 120px auto; } .service-area_aboutbox { width: 90%; } .service-area_aboutbox03 { width: 90%; } .service-area_aboutttl { width: 100%; padding: 10px; margin: 0 auto; background-color: #bed2da; color: #222222; text-align: center; line-height: 1.3; } .service-area_aboutimg { width: 50%; margin: 10px auto; } .service-area_abouttxt { width: 100%; text-align: center; color: #222222; } .service-area_feebox_m-ttl { width: 32%; text-align: center; border-right: 2px solid #FFFFFF; color: #FFFFFF; } .service-area_feebox_m-fee { width: 68%; text-align: center; color: #FFFFFF; } .service-area_feebox_ttl { width: 32%; text-align: center; border-right: 2px solid #222222; color: #222222; } .service-area_feebox_fee { width: 68%; text-align: center; color: #d20000; font-size: 2.4rem; } #service-area_feebox_feecolor { color: #222222; font-size: 1.8rem; } .service-area_startflowinrbox { width: 100%; background-color: #DDDDDD; padding: 10px 10px 20px 10px; margin-bottom: 20px; } .service-area_plan_optioninrbox { width: 100%; padding: 10px; } .service-area_plan_optioninrbox_link { display: inline-block; width: 50%; margin: 0 25%; border: 1px solid #07536f; color: #07536f; padding: 10px 10px 8px 10px; background-image: url(../images/arrow_b.png); background-size: auto 35%; background-position: 95% 50%; background-repeat: no-repeat; } .service-area_txt_bold { font-size: 2.8rem; line-height: 1.5; } .service-area_plan_htlinkbox { width: 100%; text-align: center; } .service-area_plan_linkbox { width: 90%; margin: 60px auto 20px auto; } .service-area_plan_linkbox_inq { width: 100%; margin-bottom: 20px; } .service-area_plan_linkbox_order { width: 100%; } } .plantop_howtolink { width: 100%; margin: 0 auto 40px auto; display: inline-block; border: 1px solid #07536f; padding: 15px; font-size: 22px; font-weight: 600; color: #07536f; background-color: #FFFFFF; text-align: center; } .plantop_howtolink:hover { color: #FFFFFF; background-color: #07536f; transition: 0.5s; } /* 特徴 */ #feature-area { padding: 120px 0; color: #222222; } .feature-area_box { position: relative; border: 0px solid #999999; padding: 20px 40px 40px 40px; box-shadow: 9px 9px 19px 2px #999999; border-radius: 0px; margin-bottom: 120px; } .feature-area_icon { position: absolute; width: 12%; top: -30px; left: 50px; z-index: 2; } .feature-area_icon02 { position: absolute; width: 20%; top: -30px; left: 50px; z-index: 2; } .feature-area_midashi { width: 100%; padding-left: 16%; margin: 0 auto 5px auto; color: #222222; line-height: 1.3; font-weight: 600; } .feature-area_midashi_sub { width: 100%; padding-left: 16%; margin: 0 auto 20px auto; color: #222222; line-height: 1.3; } .feature-area_midashi_lead { width: 100%; margin: 20px auto 0 auto; color: #222222; line-height: 1.3; } .feature-area_screenimg { width: 90%; margin: 40px auto; } .feature-area_inrbox { margin-top: 40px; text-align: left; } .feature-leadtxt_lead { width: 100%; text-align: left; line-height: 1.2; } .feature-area_optionbox { position: relative; padding: 40px; border: dashed 2px #999999; margin-bottom: 80px; } .feature_optinrbox02 { width: 46%; text-align: center; margin-bottom: 0px; } .feature_optinrbox02:nth-child(n+3) { margin-bottom: 0px; } .feature-optimg { width: 60%; margin: 0 auto 20px auto; } .feature-leadtxt_opttitle { width: 100%; } .feature-optfee { width: 100%; margin: 5px auto 20px auto; padding-bottom: 10px; } @media screen and (max-width: 768px) { .feature-area_box { width: 90%; margin: 0 auto; position: relative; border: 0px solid #999999; padding: 80px 40px 40px 40px; box-shadow: 9px 9px 19px 2px #999999; border-radius: 0px; margin-bottom: 120px; } .feature-area_icon { position: absolute; width: 30%; top: -40px; left: 38%; z-index: 2; } .feature-area_icon02 { position: absolute; width: 50%; top: -30px; left: 25%; z-index: 2; } .feature-area_midashi { width: 100%; padding-left: 0%; margin: 0 auto 5px auto; color: #222222; line-height: 1.3; font-weight: 600; text-align: center; } .feature-area_midashi_sub { width: 100%; padding-left: 0%; margin: 0 auto 20px auto; color: #222222; line-height: 1.3; text-align: center; } .feature-optimg { width: 80%; margin: 0 auto 20px auto; } .feature-area_optionbox { padding: 20px; } .feature_optinrbox02 { width: 100%; text-align: center; margin-bottom: 80px; } .feature_optinrbox02:nth-child(n+3) { margin-bottom: 80px; } .feature_optinrbox2:last-child { margin-bottom: 0px; } } /* 下部プラン */ #plan_btm-area { padding: 120px 0 40px 0; } #service-area_planarea_btm { margin-bottom: 80px; } /* レポート録画 */ .report-area { padding: 40px 0; background-color: #07536f; color: #FFFFFF; } .report-area_box { width: 90%; margin: 0 auto 120px auto; text-align: left; line-height: 1.3; padding: 30px; } .report-area_box_btm { width: 90%; margin: 0 auto 0px auto; text-align: left; line-height: 1.3; padding: 30px; } .report-area_txt { width: 100%; margin: 0 auto; text-align: left; line-height: 1.3; font-size: 2.8rem; } @media screen and (max-width: 768px) { .report-area_box { padding: 20px; } .report-area_txt { font-size: 2.0rem; } } /* 店舗 */ #test { background-color: #666666; } #shop_area { padding: 100px 0 0px 0; } #shop_area a { color: #FFFFFF; } #shopinr_area { margin-bottom: 40px; } .shop_bg { background-color: #333333; color: #FFFFFF; } .shop-title_box { width: 15%; color: #FFFFFF; font-size: 1.4rem; } .shop_box{ width: 25%; } summary { text-align: left; margin-left: 20px; font-size: 1.6rem; outline: none; } .sub-sum { margin-bottom: 20px; } .shop_subttl { margin: 10px 0 20px 25px; font-size: 1.4rem; } .shop_subsum { margin: 10px 0 10px 45px; font-size: 1.4rem; } .shop_subsum a { color: #FFFFFF; } .shop_shoptxt { margin: 0 0 10px 70px; font-size: 1.4rem; } .shop_subsum02 { margin: 10px 0 20px 45px; font-size: 1.4rem; } #copyright { width: 100%; background-color: #333333; text-align: center; font-size: 1.0rem; padding: 40px 0 20px 0; } @media screen and (max-width: 768px) { .shop-title_box { width: 100%; text-align: center color: #FFFFFF; font-size: 2.0rem; margin-bottom: 8%; } .shop_box{ width: 100%; margin-bottom: 40px; } summary { margin-bottom: 4%; } } /*リンクの形状*/ #page-top a{ display: flex; justify-content:center; align-items:center; background-image: url(../images/pagetop_link.png); background-size: 100%; width: 100px; height: 100px; transition:all 0.3s; } #page-top a:hover{ background-image: url(../images/pagetop_link_on.png); } @media screen and (max-width: 420px) { #page-top a{ display: flex; justify-content:center; align-items:center; background-image: url(../images/pagetop_link.png); background-size: 100%; width: 75px; height: 75px; transition:all 0.3s; } } /*リンクを右下に固定*/ #page-top { position: fixed; right: 10px; bottom:10px; z-index: 2; /*はじめは非表示*/ opacity: 1; transform: translateY(100px); } /*　上に上がる動き　*/ #page-top.UpMove{ animation: UpAnime 0.5s forwards; } @keyframes UpAnime{ from { opacity: 0; transform: translateY(100px); } to { opacity: 1; transform: translateY(0); } } /*　下に下がる動き　*/ #page-top.DownMove{ animation: DownAnime 0.5s forwards; } @keyframes DownAnime{ from { opacity: 1; transform: translateY(0); } to { opacity: 1; transform: translateY(100px); } } /* --- ここから How To ページのCSS --- */ /* メインビジュアル */ #ht-mainvisual-area { position: relative; background-image: url(../images/main1.); height: 400px; background-position: 50% 30%; background-size: 100% auto; background-repeat: no-repeat; } #ht-mainvisual-inrarea{ position: absolute; height: 160px; background-color: rgba(255, 255, 255, 0.8); bottom: 0px; } #ht-mainvisual-title_copy { position: absolute; width: 100%; text-align: center; letter-spacing: 10px; top: 80px; } #ht-mainvisual-title_title { width: 98%; padding: 20px 0; margin: 0 auto; } @media screen and (max-width: 1200px) { #ht-mainvisual-area { background-position: 50% 20%; background-size: 100% auto; } } @media screen and (max-width: 1085px) { #ht-mainlogo_box { margin-top: 5px; margin-left: -50px; } #ht-mainlogo_size { width: 80% } } @media screen and (max-width: 768px) { #ht-mainlogo_box { margin-top: 5px; margin-left: -110px; } #ht-mainlogo_size { width: 60%; } #ht-mainvisual-area { width: 100%; height: 400px; background-position: 50% 20%; background-size: 120% auto; } #ht-mainvisual-inrarea{ position: absolute; height: 140px; background-color: rgba(255, 255, 255, 0.8); bottom: 0px; } #ht-mainvisual-title_copy { top: 50px; } #ht-mainvisual-title_title { width: 98%; padding: 20px 0; margin: 0 auto; } } @media screen and (max-width: 420px) { #ht-mainvisual-area { width: 100%; height: 250px; background-position: 50% 20%; background-size: 120% auto; } #ht-mainvisual-title_circle_sp{ display: block; position: absolute; width: 25%; right: 10px; bottom: 50%; } } /* サブキャッチ帯 */ .ht-section { padding: 30px 0; } #ht-step1area { padding: 120px 0 30px 0; } .ht-area { width: 90%; margin: 0 auto; padding: 40px; } #ht-area04 { padding: 30px 0 120px 0; } .ht-lead-area_midashi { font-size: 30px; margin-bottom: 20px; text-align: center; } .ht-lead-area_ptxt { width: 100%; font-size: 18px; margin-bottom: 15px; line-height: 1.5; text-align: left; } .ht-lead-area_txt { width: 100%; font-size: 18px; /*padding-bottom: 20px; margin-bottom: 20px;*/ line-height: 1.5; text-align: left; /*border-bottom: 1px dotted #666666;*/ } .ht-imgbox { max-width: 100%; padding: 15px; } .ht-step5 { width: 50%; } .ht-main-inq_box { background-color: #FFFFFF; width: 90%; margin: 0 auto; padding: 40px; } .ht-span { padding: 5px 0; } @media screen and (max-width: 768px) { #ht-step1area { padding: 60px 0; } .ht-area { width: 96%; margin: 0 auto; padding: 20px; } .ht-step5 { width: 100%; } } /* お問い合わせフォーム */ #inq-leadtxt-area { padding: 30px; } #inq-leadtxt-area_txt { color: #FFFFFF; text-align: center; } .inq-lead-area_txt { width: 100%; margin: 80px 0; padding-bottom: 80px; text-align: center; border-bottom: 2px dashed; #666666; } .inq-area { width: 80%; margin: 0 auto; } .inq-inrarea { width: 100%; /*background-color: #E0E0E0;*/ padding: 10px 20px; margin-bottom: 20px; align-items: flex-start; } .inq-inrarea:last-child { margin-bottom: 60px; } .inq-inrarea:hover { background-color: #f7edd4; } .inq-area_ttl { display: flex; flex-flow: row wrap; justify-content: space-between; width: 28%; } .inq-area_lavel { width: 75%; font-size: 20px; text-align: left; } .inq-area_must { font-size: 16px; color: #FFFFFF; background-color: #b81c22; padding: 5px 10px; } .inq-area_form { width: 68%; text-align: left; } .inq-area_form input { width: 100%; height: 30px; font-size: 18px; } .inq-area_form select { height: 30px; font-size: 18px; } .inq-area_form textarea { width: 100%; height: 150px; font-size: 18px; } input[type=text]:focus, input[type=email]:focus, textarea:focus { background-color: #edf2f6; } .inq-policy_area { width: 100%; padding: 15px; } .inq-policy_txt { width: 40%; margin: 0 auto; font-size: 18px; padding-bottom: 10px; margin-bottom: 20px; line-height: 1.5; text-align: center; border-bottom: 1px dotted #666666; } .inq-policy_detail { width: 100%; height: 200px; overflow-y: scroll; border: 1px dotted #666666; padding: 10px; text-align: left; font-size: 14px; background-color: #FFFFFF; margin-bottom: 20px; } .inq-agree_txt { width: 40%; margin: 0 auto; font-size: 14px; margin-bottom: 20px; text-align: center; } .inq-submit_area { width: 100%; text-align: center; margin: 60px 0; } .inq-submit_area input { padding: 10px 50px; font-size: 24px; font-weight: 600; color: #FFFFFF; text-align: center; background-color: #07536f; border: 1px dotted #FFFFFF; } .inq-submit_area input:hover { color: #07536f; background-color: #FFFFFF; border: 1px solid #07536f; } .order-submit_area { width: 100%; text-align: center; margin: 60px 0; } .order-submit_area input { padding: 10px 50px; font-size: 24px; font-weight: 600; color: #FFFFFF; text-align: center; background-color: #d39a12; border: 1px dotted #FFFFFF; } .order-submit_area input:hover { color: #d39a12; background-color: #FFFFFF; border: 1px solid #d39a12; } @media screen and (max-width: 768px) { .inq-area { width: 96%; margin: 0 auto; } /* .inq-inrarea { width: 100%; padding: 10px 20px; margin-bottom: 40px; } .inq-inrarea:last-child { margin-bottom: 60px; }*/ .inq-area_ttl { width: 100%; margin-bottom: 5px; } .inq-area_lavel { width: 75%; font-size: 20px; text-align: left; } .inq-area_must { font-size: 16px; color: #FFFFFF; background-color: #b81c22; padding: 5px 10px; } .inq-area_form { width: 100%; text-align: left; } .inq-area_form select { width: 100%; height: 30px; font-size: 18px; } .inq-policy_area { width: 100%; padding: 15px; } .inq-policy_txt { width: 80%; } .inq-policy_detail { width: 100%; height: 200px; overflow-y: scroll; border: 1px dotted #666666; padding: 10px; text-align: left; font-size: 14px; background-color: #FFFFFF; margin-bottom: 20px; } .inq-agree_txt { width: 80%; } .inq-submit_area { width: 100%; text-align: center; margin-top: 30px; } .inq-submit_area input { padding: 10px 30px; font-size: 20px; } } /* お問い合わせフォーム */ .inq-php_area { width: 80%; margin: 0 auto; font-size: 18px; } .inq-php_table { width: 100%; margin: 0 auto; font-size: 18px; padding: 0 10px; text-align: left; } .inq-php_table td { padding: 10px; text-align: left; } .inq-submit-flow_area { width: 100%; text-align: center; margin-top: 30px; margin-bottom: 80px; } .inq-submit-flow_area_s { width: 100%; text-align: center; } .order-submit-flow_area_s { width: 100%; text-align: center; } .inq-submit-flow_area input { padding: 10px 50px; font-size: 24px; font-weight: 600; color: #FFFFFF; text-align: center; background-color: #07536f; border: 1px dotted #FFFFFF; } .inq-submit-flow_area input:hover { color: #07536f; background-color: #FFFFFF; border: 1px dotted #666666; } .order-submit-flow_area { width: 100%; text-align: center; margin-top: 30px; } .order-submit-flow_area input { padding: 10px 50px; font-size: 24px; font-weight: 600; color: #FFFFFF; text-align: center; background-color: #d39a12; border: 1px dotted #FFFFFF; } .order-submit-flow_area input:hover { color: #d39a12; background-color: #FFFFFF; border: 1px dotted #666666; } .order-submit-flow_area_s input { padding: 5px 30px; margin-top: 30px; margin-bottom: 80px; font-size: 20px; font-weight: 600; text-align: center; color: #d39a12; background-color: #FFFFFF; border: 1px dotted #d39a12; } .order-submit-flow_area_s input:hover { color: #FFFFFF; background-color: #d39a12; border: 1px dotted #FFFFFF; } .inq-confirm_text { width: 100%; font-size: 28px; margin-top: 80px; margin-bottom: 10px; text-align: center; } .inq-submit-button_area { width: 80%; margin: 30px auto 0 auto; } .inq-submit-button_l { width: 48%; text-align: center; } .inq-submit-button_r { width: 48%; text-align: center; } .inq-submit-flow_area_s input { padding: 5px 30px; margin-top: 30px; margin-bottom: 80px; font-size: 20px; font-weight: 600; text-align: center; color: #07536f; background-color: #FFFFFF; border: 1px dotted #666666; } .inq-submit-flow_area_s input:hover { color: #FFFFFF; background-color: #07536f; border: 1px dotted #FFFFFF; } .inq-top_area{ width: 100%; text-align: center; margin-top: 30px; margin-bottom: 80px; } .inq-top_area a { display: inline-block; padding: 10px 30px; font-size: 20px; font-weight: 600; text-align: center; color: #FFFFFF; background-color: #07536f; border: 1px dotted #FFFFFF; } .inq-top_area a:hover { color: #07536f; background-color: #FFFFFF; border: 1px dotted #666666; }