/*---------------------------------------《全体の設定》--------------------------------------------------- */ /*縦余白の設定 */ .space-400{padding:200px 0px ;} /* 1000px以下に適用されるCSS（タブレット用） */ @media screen and (max-width: 1000px){ .space-400{padding:150px 0px ;}} /* 500px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 500px){ .space-400{padding:100px 0px ;}} .space-200{padding:100px 0px ;} /* 1000px以下に適用されるCSS（タブレット用） */ @media screen and (max-width: 1000px){ .space-200{padding:100px 0px ;}} /* 500px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 500px){ .space-200{padding:50px 0px ;}} .space-100{padding:50px 0px ;} /* 1000px以下に適用されるCSS（タブレット用） */ @media screen and (max-width: 1000px){ .space-100{padding:50px 0px ;}} /* 900px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 900px){ .space-100{padding:30px 0px ;}} /* 500px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 500px){ .space-100{padding:5px 0px ;}} .space-80{padding:40px 0px ;} /* 1000px以下に適用されるCSS（タブレット用） */ @media screen and (max-width: 1000px){ .space-80{padding:40px 0px ;}} /* 500px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 500px){ .space-80{padding:20px 0px ;}} .space-50{padding:25px 0px ;} /* 1000px以下に適用されるCSS（タブレット用） */ @media screen and (max-width: 1000px){ .space-50{padding:25px 0px ;}} /* 500px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 500px){ .space-50{padding:25px 0px ;}} .space-30{padding:15px 0px ;} /* 1000px以下に適用されるCSS（タブレット用） */ @media screen and (max-width: 1000px){ .space-30{padding:15px 0px ;}} /* 500px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 500px){ .space-30{padding:15px 0px ;}} .space-20{padding:10px 0px ;} /* 1000px以下に適用されるCSS（タブレット用） */ @media screen and (max-width: 1000px){ .space-20{padding:10px 0px ;}} /* 500px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 500px){ .space-20{padding:10px 0px ;}} .space-10{padding:5px 0px ;} /* 1000px以下に適用されるCSS（タブレット用） */ @media screen and (max-width: 1000px){ .space-10{padding:5px 0px ;}} /* 500px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 500px){ .space-10{padding:5px 0px ;}} /*階層設定 */ .position-fixed{position:fixed;} .position-relative{position:relative;} .position-absolute{position:absolute;} .z-index-1{z-index:1 !important;} .z-index-2{z-index:2 !important;} .z-index-3{z-index:3 !important;} .z-index-4{z-index:4 !important;} .z-index-5{z-index:5 !important;} /*fixedヘッダー */ #fixed-header { position: fixed !important; top: -140px !important; width: 100% !important; box-sizing: border-box !important; transition: .8s !important; z-index:3 !important; padding-left:15px !important; padding-right:15px !important; padding-top:0px !important; background-color:rgba(255,255,255,0.9) ;} /* 900px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 900px) {#fixed-header {display:block !important; padding-top:0px !important ;}} /* 626px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 626px) {#fixed-header {display:block;}} /* 414px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 414px) {#fixed-header {background-size:cover !important; padding-left:0px !important; padding-right:0px !important; top:-105px !important; height:100px !important;}} #fixed-header a{ text-decoration:none !important;} #fixed-header a:hover{color:#ff8200 !important;} #fixed-header.is-show { top: 0 !important;} /* 667px以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 667px) {#fixed-header.is-show { top: -20px !important;}} .fixed-header-waku{padding-left:2% !important; padding-right:2% !important; background: rgba(251, 218, 224, 0.9) !important;} /* 1400px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 1400px) { .fixed-header-waku {padding-left:2% !important; padding-right:2% !important;}} /* 991px以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 991px) { .fixed-header-waku {padding-left:2% !important; padding-right:2% !important;}} /* 1177px以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 1177px) { .hd-link-text{padding-right:10px ;}} .header-fixed-title{width:70% ;} /* 1136以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 1136px) { .header-fixed-title{padding-top:10px ; width:60% !important;}} /* 984px以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 984px) { .header-fixed-title{padding-top:10px ; width:35% !important;}} /* 900.99px以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 900.99px) { .header-fixed-title{padding-top:10px ; width:35% !important;}} /* 900px以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 900px) { .header-fixed-title{width:50% !important;}} /* 800px以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 800px) { .header-fixed-title{padding-top:10px ; width:40% !important;}} /* 767px以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 767px) { .header-fixed-title{padding-top:10px ; width:40% !important; margin-right:-6% ;}} /* 530px以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 530px) { .header-fixed-title{padding-top:10px ; width:60% !important;}} /* 267px以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 267px) { .header-fixed-title{padding-top:10px ; width:90% !important;}} /* 530px以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 530px) { .hd-fixed-title{width:80% ; padding-top:4% ;}} /* 縦幅400px以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-height: 400px) { .hd-fixed-title{width:70% ;}} .header-fixed-link{width:100%; transform:scale(1) ;} /* 1400px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 1400px) { .header-fixed-link{transform:scale(0.9) ;}} /* 1177px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 1177px) { .header-fixed-link{transform:scale(0.85) ;}} /* 1160px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 1160px) { .header-fixed-link{transform:scale(0.8) ;}} /* 1094px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 1094px) { .header-fixed-link{width:110% ;}} /* 1053px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 1053px) { .header-fixed-link{width:110% ;}} /* 1033px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 1033px) { .header-fixed-link{width:115% ;}} /* 1008px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 1008px) { .header-fixed-link{width:120% ;}} /* 991px以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 991px) { .header-fixed-link{transform:scale(0.8) ;}} /* 984px以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 984px) { .header-fixed-link{display:none !important;}} /* 900px以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 900px) { .header-fixed-link{display:none !important;}} /* 767以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 767) { .header-fixed-link{display:none !important ;}} .header-fixed-link a{color:#5c5c5c !important;} .header-fixed-link a:hover{color:#eb90a2 !important;} .header-fixed-tel{width:100%;} /* 1094px以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 1094px) { .header-fixed-tel{width:100%;}} /* 984px以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 984px) { .header-fixed-tel{width:50%; margin-right:9%;}} /* 900px以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 900px) { .header-fixed-tel{width:130%; margin-right:-10% ;}} /* 767px以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 767px) { .header-fixed-tel{width:100%;}} /* 690px以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 690px) { .header-fixed-tel{width:100%; margin-right:-14% ;}} /* 900px以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 900px) { .hd-fixed-icon{width:60%;}} .hd-shopicon{padding-right:5px ;} /* 900px以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 900px) { .header-fixed-tel-icon{display:none !important;} .header-fixed-contact-icon{display:none !important;} } .mailbutton-orange{background-color:#003389 !important; border:#003389 2px solid !important; border-radius:20px; transition:0.5s !important;} /* 901px以上に適用されるCSS（iPhone XR 横用） */ @media screen and (min-width: 901px) { .mailbutton-orange{display:block !important ;}} /* 900.99px以下に適用されるCSS（iPhone XR 横用） */ @media screen and (max-width: 900.99px) { .mailbutton-orange{display:none !important ;}} .mailbutton-orange:hover{background-color:#e86100 !important; border:#e86100 2px solid !important; transition:0.5s !important;} /*横スクロール .scroll__wrapper { position: relative !important; overflow-x: auto !important; overflow: scroll !important; -webkit-overflow-scrolling: touch !important; overflow-y: hidden !important; padding: 0 0 2rem 0.5rem !important; width:110% !important; } .scroll__wrapper::-webkit-scrollbar { height: 10px !important; } .scroll__wrapper::-webkit-scrollbar-thumb { background: var(--primary-color) !important; border-radius: 10px; } .scroll__wrapper::-webkit-scrollbar-button { display: none !important; } .scroll__wrapper::-webkit-scrollbar-track-piece:start, .scroll__wrapper::-webkit-scrollbar-track-piece:end { background-color: transparent !important; } .scroll__wrapper__list { display: flex !important; gap: 3rem !important; } .scroll__wrapper__list::after { content: "" !important; width: 150px !important; display: block !important; position: relative !important; flex: 0 0 auto !important; } .scroll__wrapper__list__item { color: #000 !important; width: 40% !important; flex: 0 0 auto !important; border-radius: 0.5rem !important; transition: 0.3s !important; } .scroll__wrapper__list__item img { width: 100% !important; } .scroll__wrapper__list__item h3 { font-size: 1.25rem !important; margin: 0.5rem 0 !important; } .scroll__wrapper__list__item p { font-size: 0.9rem !important; margin-bottom: 0 !important; } .scroll__wrapper__list__item:hover { scale: 1.02 !important; opacity: 0.8 !important; }*/ /*はみ出る要素を非表示 */ body{overflow-x:hidden !important;} div.ccm-page{overflow-x:hidden !important;} /*波背景-a */ .back-nami-a{position:relative !important; margin-top:-9.5% !important; z-index:2 !important;} /*ホバーで半調設定 */ .opacity-90:hover{opacity:0.9;} .opacity-90 a:hover{opacity:0.9;} .opacity-80:hover{opacity:0.8;} .opacity-80 a:hover{opacity:0.8;} .opacity-70:hover{opacity:0.7;} .opacity-70 a:hover{opacity:0.7;} .opacity-0{transition:0.5s ;} .opacity-0 a{transition:0.5s ;} .opacity-0:hover{opacity:0; transition:0.5s;} .opacity-0 a:hover{opacity:0; transition:0.5s;} /*ホバーで乗算設定 */ .mix-blend-multiply:hover{mix-blend-mode: multiply;} /*ホバーでオーバーレイ設定 */ .mix-blend-overlay:hover{mix-blend-mode: overlay;} /*ドロップシャドウ */ .drop-shadow{filter:drop-shadow(2px 3px 2px #231815)} /*ドロップシャドウ-2 */ .drop-shadow-2{ filter:drop-shadow(-1px 1px 6px rgba(171,171,171,0.5));} /* スクロールしたらふわっとフェードイン */ .effect-fade { opacity: 0; transform: translate(0, 100px); /* フェードインで動く高さを指定 */ transition: all 1300ms; /* フェードインにかかる時間を指定 */ } #effect-fade { opacity: 0; transform: translate(0, 100px); /* フェードインで動く高さを指定 */ transition: all 1300ms; /* フェードインにかかる時間を指定 */ } .effect-fade-B { opacity: 0; transform: translate(0, 0px); /* フェードインで動く高さを指定 */ transition: all 2000ms; /* フェードインにかかる時間を指定 */ } .effect-fade-C { opacity: 0; transform: translate(0, -100px); /* フェードインで動く高さを指定 */ transition: all 1300ms; /* フェードインにかかる時間を指定 */ } .effect-fade-D { opacity: 0; transform: translate(0, -100px); /* フェードインで動く高さを指定 */ transition: all 3000ms; /* フェードインにかかる時間を指定 */ } .effect-scroll { opacity: 1; transform: translate(0, 0); } .fade-in{animation-name:fade-in; animation-duration:2s; animation-fill-mode:forwards; opacity:0; } @keyframes fade-in{ from {opacity: 0;} to { opacity: 1;}} /* スクロールで横からスライドインしてくるB-試し */ .fade-in-leftB{opacity: 0; transition-duration: 1s; transform: translateX(-300px);} .fade-in-leftB.effect{transform: translateX(0); opacity: 1;} .fade-in-rightB{opacity: 0; transition-duration: 1s; transform: translateX(300px); } .fade-in-rightB.effect{transform: translateX(0); opacity: 1;} .fade-in-leftC{opacity: 0; transition-duration: 1s; transform: translateX(-300px); } .fade-in-leftC.effect{transform: translateX(0); opacity: 1;} .fade-in-rightC{opacity: 0; transition-duration: 1s; transform: translateX(300px); } .fade-in-rightC.effect{transform: translateX(0); opacity: 1;} .fade-in-leftD{opacity: 0; transition-duration: 0.6s; transform: translateX(-300px); } .fade-in-leftD.effect{transform: translateX(0); opacity: 1;} .fade-in-rightD{opacity: 0; transition-duration: 0.6s; transform: translateX(300px); } .fade-in-leftD.effect{transform: translateX(0); opacity: 1;} /* スクロールで横からスライドインしてくる */ .fade-in-right { animation-name:fade-in-rightAnime; animation-duration:0.8s; animation-fill-mode:forwards; opacity: 0; } @keyframes fade-in-rightAnime{ from { opacity: 0; transform: translateX(100px); } to { opacity: 1; transform: translateX(0); } } /*さこうコンサルタント様採用サイト用ボタン */ .button-a-waku{align-items: center !important; display:flex ; justify-content:space-around ;} .button-arrow-a{width:fit-content ; font-size:1em ; font-weight:600 ; } .button-arrow-a a{color:#868686 !important; transition:0.1s} .button-arrow-a:hover{opacity:0.8 ; transition:0.1s ;} .button-arrow-a::before{position:relative ; display:inline ; content:"▶ "; color:#EAC945 ; left:0px ; transition:0.1s ;} .button-arrow-a:hover::before{color:#F6955C !important; transition:0.1s ;} /* さこうコンサルタント様採用サイト用ボタン */ .button-fd{font-family: 'Noto Sans JP', sans-serif !important;} .button-fd a { border:1px solid #fff; border-radius: 50px; position: relative; display: flex; justify-content: space-around; align-items: center; margin: 0 auto; max-width: 200px; padding: 4px 25px; color: #fff !important; transition: 0.3s ease-in-out; font-weight: 800; font-size:0.8em; text-decoration: none; } .button-fd a:hover { border:1px solid #ffcadb; background: #ffcadb; color: #eb90a2 !important;} /*.button-fd a:after { content: ''; width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg) translateY(-50%); position: absolute; top: 50%; right: 20px; border-radius: 1px; transition: 0.3s ease-in-out; text-decoration: none; } .button-fd a:hover:after { border-color: #FFF;} */ /* さこうコンサルタント様用ボタン-B */ .button-fd-b{font-family: 'Noto Sans JP', sans-serif !important;} .button-fd-b a { border:1px solid #0089d1; border-radius: 50px; position: relative; display: flex; justify-content: space-around; align-items: center; margin: 0 auto; max-width: 250px; padding: 4px 18px 4px 25px; color: #fff !important; background: #0089d1 !important; transition: 0.3s ease-in-out; font-weight: 800; font-size:0.8em; text-decoration: none; transition:0.3s; letter-spacing:0.5em; } .button-fd-b a:hover { background: #ff8143 !important; border:1px solid #ff8143; color: #fff !important; transition:0.3s;} /* .button-fd-b a:after { content: ''; width: 10px; height: 10px; border-top: 3px solid #fff; border-right: 3px solid #fff; transform: rotate(45deg) translateY(-50%); position: absolute; top: 50%; right: 30px; border-radius: 1px; transition: 0.3s ease-in-out; text-decoration: none; } .button-fd-b a:hover:after { border-color: #FFF; right:25px ; } */ /* さこうコンサルタント様用ボタン-C */ .button-fd-c{font-family: 'Noto Sans JP', sans-serif !important;} .button-fd-c a { border:1px solid #0089d1; border-radius: 50px; position: relative; display: flex; justify-content: space-around; align-items: center; margin: 0 auto; max-width: 260px; padding: 4px 18px 4px 25px; color: #fff !important; background: #0089d1 !important; transition: 0.3s ease-in-out; font-weight: 800; font-size:0.8em; text-decoration: none; transition:0.3s; letter-spacing:0.07em; } .button-fd-c a:hover { background: #ff8143 !important; border:1px solid #ff8143; color: #fff !important; transition:0.3s;} /* 角丸ボタン-青 */ .button-fd-blue{font-family: 'Noto Sans JP', sans-serif !important; transition:0.3s ;} .button-fd-blue a { background: #668CE6; border-radius: 50px; position: relative; display: flex; justify-content: space-around; align-items: center; margin: 0 auto; max-width: 300px; padding: 5px 25px; color: #fff !important; transition: 0.3s ease-in-out; font-weight: 500; font-size:0.8em; text-decoration: none; } /* 1199px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 1199px){ .button-fd-blue a {max-width:300px;}} /* 991px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 991px){ .button-fd-blue a {max-width:260px;}} .button-fd-blue a:hover {transition:0.3s ; background: #3A47BA; color: #FFF !important;} .button-fd-blue a:after { content: ''; width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg) translateY(-50%); position: absolute; top: 50%; right: 20px; border-radius: 1px; transition: 0.3s ease-in-out; text-decoration: none; } .button-fd-blue a:hover:after { border-color: #FFF;} /* 左から色が変わるボタン-共通 */ .btn-sc-left, a.btn-sc-left, button.btn-sc-left { font-size: 0.8em; font-weight: 600; line-height: 1.5; position: relative; display: inline-block; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; transition: all 0.3s; text-align: center; vertical-align: middle; text-decoration: none; letter-spacing: 0.1em; border-radius: 0.5rem; } /* 左から色が変わるボタン-青 */ a.btn-flat-blue { overflow: hidden; padding: 0.6rem 1rem; color: #fff !important; border-radius: 0; background: #668CE6; } a.btn-flat-blue:hover{color:#fff !important;} a.btn-flat-blue span { position: relative; } a.btn-flat-blue span:hover {color:#fff !important;} a.btn-flat-blue:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; -webkit-transform: translateX(-96%); transform: translateX(-96%); background: #4B5DEB; } a.btn-flat-blue:hover:before { -webkit-transform: translateX(0%); transform: translateX(0%); } /* 左から色が変わるボタン-オレンジ */ a.btn-flat-orange { overflow: hidden; padding: 0.6rem 1rem; color: #fff !important; border-radius: 0; background: #FAAA37; } a.btn-flat-orange:hover{color:#fff !important;} a.btn-flat-orange span { position: relative; } a.btn-flat-orange span:hover {color:#fff !important;} a.btn-flat-orange:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; -webkit-transform: translateX(-96%); transform: translateX(-96%); background: #EA7A3D; } a.btn-flat-orange:hover:before { -webkit-transform: translateX(0%); transform: translateX(0%); } /* 左から色が変わるボタン-緑 */ a.btn-flat-green { overflow: hidden; padding: 0.6rem 1rem; color: #fff !important; border-radius: 0; background: #5AC76D; } a.btn-flat-green:hover{color:#fff !important;} a.btn-flat-green span { position: relative; } a.btn-flat-green span:hover {color:#fff !important;} a.btn-flat-green:before { position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; -webkit-transition: all .5s ease-in-out; transition: all .5s ease-in-out; -webkit-transform: translateX(-96%); transform: translateX(-96%); background: #27A259; } a.btn-flat-green:hover:before { -webkit-transform: translateX(0%); transform: translateX(0%); } /* 左斜め下から色が変わるボタン-紺 */ .btn-flat-a-waku, a.btn-flat-a-waku, button.btn-flat-a-waku { font-size: 1.6rem !important; font-weight: 700 !important; line-height: 1.5 !important; position: relative !important; display: inline-block !important; padding: 1rem 4rem !important; cursor: pointer !important; -webkit-user-select: none !important; -moz-user-select: none !important; -ms-user-select: none !important; user-select: none !important; -webkit-transition: all 0.3s !important; transition: all 0.3s !important; text-align: center !important; vertical-align: middle !important; text-decoration: none !important; letter-spacing: 0.1em !important; color: #2236a0 !important; border-radius: 0.5rem !important;} a.btn-flat-a { overflow: hidden !important; padding: 1.5rem 6rem !important; color: #fff !important; border-radius: 0 !important; background: #2236a0 !important;} a.btn-flat-a span { position: relative !important;} a.btn-flat-a:before { position: absolute !important; top: 0 !important; left: 0 !important; width: 150% !important; height: 500% !important; content: "" ; -webkit-transition: all 0.5s ease-in-out !important; transition: all 0.5s ease-in-out !important; -webkit-transform: translateX(-98%) translateY(-25%) rotate(45deg) !important; transform: translateX(-98%) translateY(-25%) rotate(45deg) !important; background: #0089d1 !important;} a.btn-flat-a:hover:before { -webkit-transform: translateX(-9%) translateY(-25%) rotate(45deg) !important; transform: translateX(-9%) translateY(-25%) rotate(45deg) !important;} /* ボタンｰフッター用 */ .button-ft{font-family: 'Noto Sans JP', sans-serif !important;} .button-ft a { background: none; border-radius: 50px; position: relative; display: flex; justify-content: space-around; align-items: center; max-width: 80%; padding: 5px 25px 7px 25px; color: #fff !important; transition: 0.3s ease-in-out; font-weight: 500; font-size:0.8em; text-decoration: none; background-color:#00a0e9; border: #00a0e9 1px solid; } .button-ft a:hover { background: #fff; color: #00a0e9 !important; border-color:#fff !important;} .button-ft a:after { content: ''; width: 10px; height: 10px; border-top: 2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg) translateY(-50%); position: absolute; top: 50%; right: 20px; border-radius: 1px; transition: 0.3s ease-in-out; text-decoration: none; } .button-ft a:hover:after { border-color: #00a0e9;} /*Googleマップのレスポンシブ設定 */ .map{ height: 0; overflow: hidden; padding-bottom: 80.25%; position: relative; } .map iframe { position: absolute; left: 0; top: 0; height: 100%; width: 100%; } /*header-top-wakuのflex制御 */ .row3{display:flex !important; align-items:center !important; justify-content:space-between !important;} /* 991px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 991px){ .row3{display:flex !important;}} /* 800px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 800px){ .row3{display:flex !important;}} /* 767px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 767px){ .row3{display:flex !important;}} /* 615px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 615px){ .row3{display:flex !important;}} /* 500px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 500px){ .row3{display:flex !important;}} /* 480px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 480px){ .row3{display:flex !important;}} /*ヘッダーの採用情報・お問合せアイコンのflex制御 */ .row4{display:flex !important; align-items:center !important; justify-content:space-evenly !important;} /* 991px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 991px){ .row4{display:flex !important;}} /* 767px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 767px){ .row4{display:flex !important;}} /* 623px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 623px){ .row4{display:flex !important;}} .row5{display:flex !important; align-items:center !important; text-align:center !important; justify-content:space-evenly !important;} /* 991px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 991px){ .row5{display:flex !important;}} /* 767px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 767px){ .row5{display:flex !important;}} /* 623px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 623px){ .row5{display:block !important;}} .row6{display:flex !important; align-items:center !important; text-align:center !important; justify-content:space-evenly !important; width:100% !important; } /* 991px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 991px){ .row6{display:flex !important;}} /* 767px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 767px){ .row6{display:flex !important;}} /* 623px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 623px){ .row6{display:flex !important;}} .row7{display:flex !important; align-items:flex-start !important; text-align:center !important; justify-content:space-around !important; width:100% !important; } /* 991px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 991px){ .row7{display:flex !important;}} /* 767px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 767px){ .row7{display:flex !important;}} /* 627px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 627px){ .row7{display:block !important;}} /* 623px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 623px){ .row7{display:flex !important;}} /* 590px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 590px){ .row7{display:flex !important;}} /* 560px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 560px){ .row7{display:flex !important; transform:scale(0.95);}} /* 500px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 500px){ .row7{display:flex !important; transform:scale(0.95);}} /* 390px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 390px){ .row7{display:block !important;}} /*フッターのflex制御 */ .row8{display:flex !important; align-items:start !important; justify-content:space-between !important;} /* 991px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 991px){ .row8{display:flex !important;}} /* 800px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 800px){ .row8{display:flex !important;}} /* 767px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 767px){ .row8{display:flex !important;}} /* 615px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 615px){ .row8{display:flex !important;}} /* 500px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 500px){ .row8{display:block !important;}} /* 480px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 480px){ .row8{display:block !important;}} .ccm-custom-style-container .ccm-custom-style-main55268-1251 .row, .ccm-custom-style-container .ccm-custom-style-main55268-1252 .row, .ccm-custom-style-container .ccm-custom-style-main55-1253 .row, .ccm-custom-style-container .ccm-custom-style-main55268-1294 .row{ --bs-gutter-x: 5px !important; --bs-gutter-y: 5px !important; margin-top: calc(var(--bs-gutter-y)* +0) !important;} .ccm-custom-style-container .ccm-custom-style-main55262292-1304 .row{ --bs-gutter-x: 10px !important;} div.ccm-custom-style-container .ccm-custom-style-main55268-1251 .row, div.ccm-custom-style-container .ccm-custom-style-main55268-1252 .row, div.ccm-custom-style-container .ccm-custom-style-main55-1253 .row, div.ccm-custom-style-container .ccm-custom-style-main55268-1294 .row{ --bs-gutter-x: 5px !important; --bs-gutter-y: 5px !important; margin-top: calc(var(--bs-gutter-y)* +0) !important;} div.ccm-custom-style-container .ccm-custom-style-main55262292-1304 .row{ --bs-gutter-x: 10px !important;} /* 768px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (min-width: 768px){ .instagram-thumb-678{display:block !important;}} /* 767px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 767.99px){ .instagram-thumb-678{display:none !important;}} /* 768px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (min-width: 768px){ .instagram-thumb-768-b{display:block !important;}} /* 767px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 767.99px){ .instagram-thumb-768-b{display:none !important;}} /* 768px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (min-width: 768px){ .instagram-thumb-676-a{display:none !important;}} /* 767px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 767.99px){ .instagram-thumb-676-a{display:block !important;}} /*テーブルの余白設定 */ div.ccm-page table{width:100% !important;} div.ccm-page table td,th{padding-left:10px !important; padding-right:10px !important; font-size:0.9em !important; } /* 480px以下に適用されるCSS（スマホ・タブレット用） */ @media screen and (max-width: 480px) { table td,th{font-size:0.5em;}} div.ccm-page td, th{border:1px solid #212121 ;} .ccm-custom-style-main99100-575 td,th{border:0px !important;} /*テーブルのX軸画面からはみ出た部分をスクロールさせる */ .table-scroll{overflow-x:auto !important; white-space:nowrap !important;} .drop-shadow-a{filter:drop-shadow(0px 0px 2px #231815) !important;} .drop-shadow-b{filter:drop-shadow(0px 0px 2px #7c7c7c) !important;} /*下線の設定 */ div.ccm-page hr{border-top:1.5px solid #212121; margin-top:-10px; width:30%; opacity:1;} .border-bottom-white-a{border-bottom:#fff 1px solid; padding-bottom:1px ; margin-bottom:2px ;} .hover-a:hover{opacity:0.7;} .hover-b:hover{opacity:0.8;} .hover-c:hover{opacity:0.9;} .back-white-a{margin-bottom:-200px !important;} /*.ccm-ui .dropdown-menu{display:block !important;} */ /*div#bs-select-1.inner.show{display:block !important;} */ /*ページ上部へ戻る */ .hw-back-to-top i{left:6px !important; bottom:-3px !important; transition:0.3s;} .hw-back-to-top i:hover{bottom:0px !important; transition:0.2s;} .hw-back-to-top{background:rgba(225, 71, 0, 0.5) !important; border:#fff 1px solid; border-radius:20px !important; -webkit-border-radius:20px !important;} /*---------------------------------------《書体の設定》--------------------------------------------------- */ div.ccm-page main{color:#212121 !important; font-family: 'Noto Sans JP', sans-serif !important; font-weight:500 ; line-height:1.8em !important; font-size:1.2em !important; padding-top:0% ;} /* 2000px以下に適用されるCSS（PC用） */ @media screen and (max-width: 2000px) { div.ccm-page main{padding-top:0% !important;}} /* 1690px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1690px) { div.ccm-page main{padding-top:0% !important;}} /* 1368px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1368px) { div.ccm-page main{font-size:1.2em !important; line-height:1.4em !important; padding-top:8.2% ;}} /* 1180px以下に適用されるCSS（iPad air 横用） */ @media screen and (max-width: 1180px) { div.ccm-page main{font-size:1.2em !important; line-height:1.4em !important;}} /* 1085px以下に適用されるCSS */ @media screen and (max-width: 1085px) { div.ccm-page main{font-size:1.2em !important; line-height:1.4em !important;}} /* 950px以下に適用されるCSS */ @media screen and (max-width: 950px) { div.ccm-page main{font-size:1.0em !important; line-height:1.0em !important;}} /* 650px以下に適用されるCSS */ @media screen and (max-width: 650px) { div.ccm-page main{font-size:0.9em !important; line-height:1.0em !important;}} /* 500px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 500px) { div.ccm-page main{font-size:1.2em !important; line-height:1.4em !important; font-size:1.2em !important; padding-top:24.8% ;}} /* 480px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 480px) { div.ccm-page main{font-size:1.2em !important; line-height:1.4em !important; font-size:1.2em !important; padding-top:24.8% ;}} /* 375px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 375px) { div.ccm-page main{font-size:1em !important; line-height:1.4em !important;}} .inertia-scroll{position:fixed;} .main-wrap{position:relative !important;} .main-wrap-3{position:relative !important;} .main-wrap-waku{position:relative !important;} .main-white{color:#fff !important; font-family: 'Noto Sans JP', sans-serif !important; line-height:1.8em !important; font-weight:700 !important;} /* 500px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 500px) { .main-white{font-size:0.8em !important; line-height:1.4em !important;}} /* 480px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 480px) { .main-white{font-size:0.8em !important; line-height:1.4em !important;}} /* 375px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 375px) { .main-white{font-size:0.8em !important; line-height:1.4em !important;}} .main-white-b{color:#fff !important; font-family: 'Noto Sans JP', sans-serif !important; line-height:1.8em !important; font-size:1.2em;} /* 991px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 991px) { .main-white-b{font-size:1.0em}} /* 480px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 480px) { .main-white-b{font-size:0.8em !important; line-height:1.4em !important;}} /* 375px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 375px) { .main-white-b{font-size:0.8em !important; line-height:1.4em !important;}} div.ccm-page h1{ font-weight: 700; font-style: normal; font-size:2.5em !important; letter-spacing:0.03em !important; line-height:1.5em !important; color:#2236a0 !important; margin-bottom:-15px !important; } /* 500px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 500px) { div.ccm-page h1{font-size:1.5em !important;}} /* 480px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 480px) { div.ccm-page h1{font-size:1.5em !important;}} .pure-accordion-block-container > .header > h1.title{ font-size:1.1em !important; } div.ccm-page h2{font-family: 'Noto Sans JP', sans-serif !important; color:#0089d1 !important; font-size:2.2em !important; font-weight:700 ; border-left:none !important; } .head-border {position: relative; display: inline-block; padding: 0 60px;} .head-border:before{content: ''; position: absolute; top: 50%; display: inline-block; width: 50px; height: 5px; background-color: #e86100;} .head-border:before {left: 0;} div.ccm-page h3{font-family: 'Noto Sans JP', sans-serif !important; color:#fff; background:linear-gradient(to right, #0089d1,#0089d1,#0089d1,#0089d1,#0089d1, #e0f4fe, rgba(254,224,229,0)); width:80%; font-weight:600 !important; font-size:1.3em ; padding:3px 3px 5px 5px ; margin-bottom:20px; } /* 991px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 991px) { div.ccm-page h3{font-size:1.5em !important;}} /* 500px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 500px) { div.ccm-page h3{font-size:1.3em !important;}} /* 480px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 480px) { div.ccm-page h3{font-size:1.3em !important;}} div.ccm-page h4 {padding: 7px 15px; color:#0089d1 !important; font-size:1.2em; font-weight:700; border-bottom:#0089d1 2px solid ; margin-bottom:15px ;} div.ccm-page h5{font-family: 'Noto Sans JP', sans-serif !important; color:#0089d1 !important; font-size:0.7em !important; border-left:none !important; line-height:1.5em; font-weight:600 ;} /* 500px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 500px) { div.ccm-page h5{font-size:0.6em !important ;}} /* 480px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 480px) { div.ccm-page h5{font-size:0.5em !important ;}} div.ccm-page h5 a{color:#eb90a2 !important;} div.ccm-page h5 a:hover{color:#865F39 !important;} div.ccm-page h6{font-family: 'Noto Sans JP', sans-serif !important; color:#0089d1 !important; font-weight: 700 !important; font-style: normal !important; font-size: 1.1em; line-height:2.2em; margin-bottom:8px; } /* 1399px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 1399px) { div.ccm-page h6{font-size:1.1em !important;}} /* 1199px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 1199px) { div.ccm-page h6{font-size:0.95em !important;}} /* 991px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 991px) { div.ccm-page h6{font-size:1.0em !important;}} /* 650px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 650px) { div.ccm-page h6{font-size:0.9em !important;}} /* 991px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 991px) { .top-message{ margin-left:-80px; margin-right:-80px;}} .fudemoji-a-m{font-family: "Yuji Syuku", serif !important; font-weight: 400 !important; font-style: normal !important; font-size:1.5em !important; line-height:0.8em !important;} .fudemoji-a-s{font-family: "Yuji Syuku", serif !important; font-weight: 400 !important; font-style: normal !important; font-size:1.2em !important;} .fudemoji-a-2s{font-family: "Yuji Syuku", serif !important; font-weight: 400 !important; font-style: normal !important; font-size:1em !important;} div.ccm-page .ccm-image-slider-container .ccm-image-slider-text h2{ font-family: 'Noto Sans JP', sans-serif !important; color:#0040ae !important; font-weight:700 !important; font-size:2.5em !important; margin-bottom:30px !important; } div.ccm-page .ccm-image-slider-container .ccm-image-slider-text{width:1000px !important; left:5% !important;} .midashi-s{color:#646464 !important; font-family: 'Noto Sans JP', sans-serif !important; font-weight:700 !important;} .midashi-l{color:#646464 !important; font-family: 'Chonburi', cursive !important; font-weight:400 !important; line-height:1.8em !important; font-size:2.5em !important; letter-spacing:0.03em !important;} .midashi-m2{color:#646464 !important; font-family: 'Noto Sans JP', sans-serif !important; font-weight:600 !important; line-height:0.8em !important; font-size:1.6em !important; letter-spacing:0.03em !important;} .midashi-black-m{color:#212121 !important; font-family: 'Noto Sans JP', sans-serif !important; font-weight:500 !important; line-height:0.8em !important; font-size:1.6em !important; letter-spacing:0.03em !important;} .midashi-black-m2{color:#212121 !important; font-family: 'Noto Sans JP', sans-serif !important; font-weight:500 !important; line-height:0.8em !important; font-size:1.2em !important; letter-spacing:0.03em !important;} .midashi-orange-l{color:#D06823 !important; font-family: 'Noto Sans JP', sans-serif !important; font-weight:600 !important; line-height:1.3em !important; font-size:3.1em !important; letter-spacing:0.03em !important;} .midashi-white-m{padding: 0.3rem 1.2rem; color:#fff; font-size:1.8em !important; border-left:none !important; font-weight:600;} /* 1199px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 1199px) { .midashi-white-m{}} /* 991px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 991px) { .midashi-white-m{font-size:1.5em !important;}} /* 767px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 767px) { .midashi-white-m{font-size:1.0em !important;}} /* 511px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 511px) { .midashi-white-m{font-size:0.9em !important;}} /* 500px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 500px) { .midashi-white-m{font-size:0.9em !important;}} /* 468px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 468px) { .midashi-white-m{font-size:0.8em !important;}} /* 424px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 424px) { .midashi-white-m{font-size:0.7em !important;}} /* 381px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 381px) { .midashi-white-m{font-size:0.6em !important;}} /* 286px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 286px) { .midashi-white-m{font-size:0.5em !important;}} .midashi-white-s{ color:#fff; font-family: 'Noto Sans JP', sans-serif !important; font-weight:600 !important; font-size:1.2em !important; } /* 1199px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 1199px) {.midashi-white-s{font-size:1.1em !important;}} /* 991px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 991px) {.midashi-white-s{font-size:0.8em !important;}} /* 767px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 767px) {.midashi-white-s{font-size:1.2em !important;}} .midashi-white{padding: 0.5rem 2rem; color:#fff; font-family: 'Noto Sans JP', sans-serif !important; font-weight:900 !important; font-size:1.3em !important; } .midashi-blue{color:#0036af !important; font-family: 'Noto Sans JP', sans-serif !important; font-weight:700 !important; font-size: 1.6em;} .midashi-blue-m{color:#0036af !important; font-family: 'Noto Sans JP', sans-serif !important; font-weight:700 !important; font-size: 1.2em;} /* 667px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 667px) { .midashi-blue-m{font-size:1.1em ;}} /* 610px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 610px) { .midashi-blue-m{font-size:1.0em ;}} /* 580px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 580px) { .midashi-blue-m{font-size:0.95em ;}} /* 540px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 540px) { .midashi-blue-m{font-size:0.90em ;}} /* 500px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 500px) { .midashi-blue-m{font-size:0.85em ;}} /* 490px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 490px) { .midashi-blue-m{font-size:0.81em ;}} /* 450px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 450px) { .midashi-blue-m{font-size:0.74em ;}} /* 430px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 430px) { .midashi-blue-m{font-size:0.70em ;}} .midashi-blue-s{color:#0036af !important; font-family: 'Noto Sans JP', sans-serif !important; font-weight:700 !important; font-size:0.8em;} .midashi-aqua-s{color:#00a0e9 !important; font-family: 'Noto Sans JP', sans-serif !important; font-weight:700 !important; font-size:0.8em;} .midashi-grade{position: relative; padding: 0.2em 1em; background: -webkit-linear-gradient(to right, #0040ae, transparent); background: linear-gradient(to right, #0040ae, transparent); color: #fff; font-size:1.3em} .midashi-bluebar{color:#fff !important; font-family: 'Noto Sans JP', sans-serif !important; font-weight:600 !important; font-size:1em; background-color:#1F569E; background-size:fit-content; border:3px; border-radius:20px; padding:4px 20px 5px 20px; margin-left:5px; margin-right:5px; line-height:2.5em;} /*明朝体にする */ .mincho{font-family: "Shippori Mincho", serif !important; font-weight:600 !important; font-style:normal;} /*背景スクロール */ /* 3000px以下に適用されるCSS（PC用） */ @media screen and (max-width: 3000px){ .background-scroll{background-size: 100% !important; background-attachment: fixed !important; width:100% !important; overflow-x: hidden !important; z-index:-1 !important;}} /* 1700px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 1700px){ .background-scroll{background-size: cover !important; background-attachment: fixed !important; width:100% !important; overflow-x: hidden !important; z-index:-1 !important;}} /* 650px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 650px){ .background-scroll{width:100% !important; background-size:cover !important; background-position:center top !important; background-attachment: fixed !important;}} /* 480px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 480px){ .background-scroll{background-size:cover !important; margin-bottom:0% !important; display:block !important; background-attachment:unset !important; background-position:top right !important; z-index:1 !important;}} /* 393px以下に適用されるCSS（Pixel5 縦用） */ @media screen and (max-width: 393px) { .background-scroll{background-size:cover !important; margin-bottom:0% !important; padding-bottom:10% !important; background-attachment: unset !important;}} /*---------------------------------------《ヘッダーの設定》--------------------------------------------------- */ div.ccm-page header{position:fixed; background: rgba(255,255,255,0) !important; z-index:6 !important; border-bottom:none !important; width:100% !important; padding-bottom:10px !important;} /* 767px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 767px) { div.ccm-page header{padding-top:0%;}} /* 600px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 600px) { div.ccm-page header{padding-bottom:0px !important;}} .header-top-waku{background:rgba(255,255,255,0.9);} /* 480px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 480px) { .header-top-waku{margin-bottom:-5px;}} div.ccm-page .header-wrap{position:fixed !important; padding-left:10% !important; padding-right:10% !important; display:block !important; z-index:3 !important; background-color:#fff !important;} /* 1000px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (min-width: 1000px) { div.ccm-page .header-wrap{padding-left:5% !important; padding-right:5% !important;}} /* 901px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (min-width: 901px) { div.ccm-page .header-wrap{position:relative ;}} /* 900px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 900px) { div.ccm-page .header-wrap{position:relative ;}} /* 600px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 600px) { div.ccm-page .header-wrap{padding-left:5% !important;}} /* 編集画面のみ適用 */ .ccm-edit-mode .ccm-page .header-wrap{position:relative !important;} .ccm-edit-mode .header-wrap-2{position:relative !important;} .ccm-edit-mode .hd-back-a{position:relative !important;} .ccm-edit-mode .hd-back-b{position:relative !important;} .ccm-edit-mode #fixed-header{position:relative !important;} .hd-back-a{position:fixed !important; z-index:4 !important; margin-bottom:-100px !important;} .hd-back-b{position:fixed !important; z-index:4 !important; margin-top:-100px !important;} .header-links-area{display:flex; justify-content:flex-end; transform:scale(0.85); width:70% !important; } /* 970px以上に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (min-width: 970px) { .header-links-area{width:80% !important;}} /* 969px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 969px) { .header-links-area{width:90% !important;}} /* 901px以上に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (min-width: 901px) { .header-links-area{display:block;}} /* 900px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 900px) { .header-links-area{display:none;}} /* 767px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 767px) { .header-links-area{margin-top:-3.5%;}} /* 623px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 623px) { .header-links-area{display:none;}} .header-tel-area{width:auto; padding-right:0% !important; } /* 1050px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1050px) { .header-tel-area{margin-top:3px !important; margin-left:2%; margin-right:-2% ; width:35%}} /* 900px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 900px) { .header-tel-area{width:10% !important;}} /* 767px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 767px) { .header-tel-area{padding-right:2% !important;}} /* 667px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 667px) { .header-tel-area{width:30% !important;}} /* 480px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 480px) { .header-tel-area{margin-top:-110px !important;}} .header-links-area-B{} /* 900px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 900px) { .header-links-area-B{display:none !important;}} .hd-instagram-icon{width:100% !important;} /* 1250px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1250px) { .hd-instagram-icon{transform:scale(1.2);}} /* 1210px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1210px) { .hd-instagram-icon{transform:scale(1.4);}} /* 1180px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1180px) { .hd-instagram-icon{transform:scale(1.6);}} /* 1160px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1160px) { .hd-instagram-icon{transform:scale(1.3);}} /* 1150px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1150px) { .hd-instagram-icon{transform:scale(1.3);}} /* 1130px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1130px) { .hd-instagram-icon{transform:scale(1.5);}} /* 1120px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1120px) { .hd-instagram-icon{transform:scale(1.5);}} /* 1110px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1110px) { .hd-instagram-icon{transform:scale(1.6); margin-left:5px ; margin-right:-5px ;}} /* 1100px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1100px) { .hd-instagram-icon{transform:scale(1.8);}} /* 1090px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1090px) { .hd-instagram-icon{transform:scale(1.8); margin-left:8px ; margin-right:-8px ; margin-top:0px ;}} /* 1085px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1085px) { .hd-instagram-icon{transform:scale(1.8);}} /* 1080px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1080px) { .hd-instagram-icon{transform:scale(1.6); margin-top:0px ;}} /* 1070px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1070px) { .hd-instagram-icon{transform:scale(2.2);}} /* 1060px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1060px) { .hd-instagram-icon{transform:scale(2.6); margin-top:-5px ;}} /* 1050px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1050px) { .hd-instagram-icon{transform:scale(2.2); margin-top:0px ;}} /* 1040px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1040px) { .hd-instagram-icon{transform:scale(2.2); margin-top:0px ;}} /* 1030px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1030px) { .hd-instagram-icon{transform:scale(2.5); margin-top:0px ;}} /* 1010px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1010px) { .hd-instagram-icon{transform:scale(2.8); margin-top:-10px ;}} /* 1000px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1000px) { .hd-instagram-icon{transform:scale(3.2); margin-top:-20px ;}} /* 990px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 990px) { .hd-instagram-icon{transform:scale(4); margin-top:-20px ; margin-left:12px ; margin-right:-12px ;}} /* 980px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 980px) { .hd-instagram-icon{transform:scale(6); margin-top:-25px ; margin-left:12px ; margin-right:-12px ;}} /* 970px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 970px) { .hd-instagram-icon{transform:scale(6); margin-top:-30px ; margin-left:15px ; margin-right:-15px ;}} /* 969px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 969px) { .hd-instagram-icon{transform:scale(2.8); margin-top:0px ; margin-left:15px ; margin-right:-15px ;}} /* 950px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 950px) { .hd-instagram-icon{transform:scale(3); margin-top:-10px ; margin-left:15px ; margin-right:-15px ;}} /* 940px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 940px) { .hd-instagram-icon{transform:scale(3.5); margin-top:-10px ; margin-left:15px ; margin-right:-15px ;}} /* 930px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 930px) { .hd-instagram-icon{transform:scale(4.5); margin-top:-10px ; margin-left:15px ; margin-right:-15px ;}} /* 920px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 920px) { .hd-instagram-icon{transform:scale(5.5); margin-top:-30px ; margin-left:15px ; margin-right:-15px ;}} /* 919px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 919px) { .hd-instagram-icon{transform:scale(6.5); margin-top:-30px ; margin-left:15px ;}} /* 910px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 910px) { .hd-instagram-icon{transform:scale(6.5); margin-top:-30px ; margin-left:15px ; margin-right:-15px ;}} /* 908px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 908px) { .hd-instagram-icon{transform:scale(7.5); margin-top:-30px ; margin-left:15px ; margin-right:-15px ;}} /* 903px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 903px) { .hd-instagram-icon{transform:scale(9.5); margin-top:-50px ; margin-left:15px ; margin-right:-15px ;}} .logo-area{width:40% !important;} /* 1350px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1350px) { .logo-area{width:50% !important;}} /* 1200px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1200px) { .logo-area{width:50% !important;}} /* 1100px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1100px) { .logo-area{width:50% !important;}} /* 1080px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1080px) { .logo-area{margin-left:-5% !important;}} /* 1070px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1070px) { .logo-area{width:60% !important;}} /* 810px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 810px) { .logo-area{width:50% !important; padding-top:10px !important;}} /* 740px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 740px) { .logo-area{margin-left:-7% !important;}} /* 700px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 700px) { .logo-area{width:60% !important;}} /* 600px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 600px) { .logo-area{margin-left:-10% !important;}} /* 480px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 480px) { .logo-area{width:70% !important; padding-top:0px !important; padding-bottom:10px !important; margin-left:-15% !important;}} /* ヘッダーのTEL下ナビのflex制御 */ .hdnavi{width:30%; display:flex !important; justify-content:space-evenly !important; padding-left:0; margin-bottom:0; list-style:none; font-size:0.85em ; margin-left:10% ; } .hdnavi a{color:#868686 !important; font-weight:600 !important;} .hdnavi a:hover{color:#aa7641 !important;} /* 1200px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1200px) { .hdnavi{width:35% ; padding-left:3% !important ; margin-left:2% ;}} /* 1150px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1150px) { .hdnavi{font-size:0.8em ;}} /* 1100px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1100px) { .hdnavi{font-size:0.7em ; padding-left:0% !important; justify-content:space-between !important;}} /* 1030px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 1030px) { .hdnavi{margin-top:5px ;}} /* 900px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 900px) { .hdnavi{font-size:0.9em ; margin-top:-5px ;}} /* 837px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 837px) { .hdnavi{font-size:0.8em ;}} /* 900px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 900px) { .hdnavi{display:none !important;}} /* 765px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 765px) { .hdnavi{font-size:0.7em ; margin-top:5px ;}} /* 713px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 713px) { .hdnavi{font-size:0.6em ;}} div.ccm-page .header-links-area .nav li a{color:#1F569E;} .hdnavi li:last-child{background-color:#1F569E;} div.ccm-page .header-links-area .nav li:last-child a:hover {background-color:#D06823;} div.ccm-page .header-links-area .nav li:last-child a{color:#fff;} div.ccm-page .header-links-area .nav li a{border-radius:0px;} div.ccm-page header nav ul li{margin-right:-20px !important;} .header-navi{font-size:1em !important; font-family: 'Noto Sans JP', sans-serif !important;} .header-navi a{font-size:0.9em !important; font-family: 'Noto Sans JP', sans-serif !important;} /* 651px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (min-width: 651px) { .header-entry{display:block;}} /* 650px以下に適用されるCSS（タブレット・スマホ 縦用） */ @media screen and (max-width: 650px) { .header-entry{display:none;}} .header-entry-button-a{ opacity:1; transition:0.3s; width:100%; } .header-entry-button-a:hover{ opacity:0; transition:0.3s; } .header-entry-button-b{ width:100%; } .hd-navi{width:40% ;} /* 985px以下に適用されるCSS（スマホ・タブレット用） */ @media screen and (min-width: 985px) {.hd-navi{display:block !important;}} /* 984px以下に適用されるCSS（スマホ・タブレット用） */ @media screen and (max-width: 984px) {.hd-navi{display:none !important;}} .hd-navi-link a{ padding:0px 6px ; font-size:1em !important; font-weight:700 ; color:#323232 !important;} /* 1050px以下に適用されるCSS（スマホ・タブレット用） */ @media screen and (max-width: 1050px) { .hd-navi-link a{font-size:0.8em !important;}} .hd-navi-link a:hover{color:#0089d1 !important;} .hd-navi-bt{padding:10px 10px ; width:60px ; display:block;} .hd-navi-bt:hover{ color:#fff !important;} .hd-navi-bt a:hover{color:#fff !important;} .e-title-a{font-family: "Anton", sans-serif !important; font-weight: 400 !important; font-style: normal !important; font-size:0.6em !important; line-height:2em; color:#0089d1 !important; } .e-title-a:hover{color:#e86100 !important;} .e-title-b{font-family: "Anton", sans-serif !important; font-weight: 400 !important; font-style: normal !important; font-size:0.8em !important; line-height:2em; color:#68d4ff !important; } .navi-title-a{font-size:1.2em !important; line-height:0.1em !important; display:block ; margin-bottom:-50px ; } .navi-title-a a{color:#0088b3 !important; } .navi-title-b{font-size:1.2em !important; line-height:0.1em !important; display:block ; margin-bottom:-15px ;} .navi-title-b a{color:#fff} .btn-hd{color:#323232 ; width:100px ; display:block; transition-duration:0.05s ; padding-top:18px; } /* 811px以下に適用されるCSS（スマホ・タブレット用） */ @media screen and (min-width: 811px) {.btn-hd{display:block;}} /* 810px以下に適用されるCSS（スマホ・タブレット用） */ @media screen and (max-width: 810px) {.btn-hd{display:none;}} .btn-hd a{color:#323232 ; width:150px ; display:block; transition-duration:0.05s ; } .btn-hd :hover{color:#1F569E !important; transition-duration:0.05s ; font-weight:700 !important; } .btn-hd a:hover{color:#1F569E !important; transition-duration:0.05s ; font-weight:700 !important; } .btn-hd-b{color:#fff ; width:100px ; display:block; transition-duration:0.05s ; padding-top:18px; } /* 811px以下に適用されるCSS（スマホ・タブレット用） */ @media screen and (min-width: 811px) {.btn-hd{display:block;}} /* 810px以下に適用されるCSS（スマホ・タブレット用） */ @media screen and (max-width: 810px) {.btn-hd{display:none;}} .btn-hd-b a{color:#fff ; width:150px ; display:block; transition-duration:0.05s ; } .btn-hd-b :hover{color:#e86100 !important; transition-duration:0.05s ; font-weight:700 !important; } .btn-hd-b a:hover{color:#e86100 !important; transition-duration:0.05s ; font-weight:700 !important; } .btn-dsk-a {border: 0 solid; box-shadow: inset 0 0 20px rgba(255, 255, 255, 0); outline: 2.5px solid; outline-color: rgba(255, 255, 255, .5); outline-offset: 0px; text-shadow: none; transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1); border-radius:0rem !important; cursor: pointer !important; display: block; font-size:16px; font-weight: 400; line-height: 45px; margin: 0 auto 0 auto !important;; max-width: 160px !important; position: relative !important; text-decoration: none !important; text-transform: uppercase !important; width: 100% !important;; padding: 0em !important; text-align:center; color:#fff !important; } .btn-dsk-a:hover { box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2); outline-color: rgba(255, 255, 255, 0); outline-offset: 15px; text-shadow: 1px 1px 2px #89c4dd; background-color:#fff !important; color:#00AFEC !important;} .btn-dsk-b {border: 0 solid; box-shadow: inset 0 0 20px rgba(255, 255, 255, 0); outline: 2.5px solid; outline-color: rgba(0, 175, 236, .5); outline-offset: 0px; text-shadow: none; transition: all 1250ms cubic-bezier(0.19, 1, 0.22, 1); border-radius:0rem !important; cursor: pointer !important; display: block; font-size:16px; font-weight: 400; line-height: 45px; margin: 0 auto 0 auto !important;; max-width: 160px !important; position: relative !important; text-decoration: none !important; text-transform: uppercase !important; width: 100% !important;; padding: 0em !important; text-align:center; color:#00AFEC !important; } .btn-dsk-b:hover { box-shadow: inset 0 0 20px rgba(255, 255, 255, .5), 0 0 20px rgba(255, 255, 255, .2); outline-color: rgba(0, 175, 236, 0); outline-offset: 15px; text-shadow: 1px 1px 2px #89c4dd; background-color:#00AFEC !important; color:#fff !important;} .container-b{padding-right:5px !important; padding-left:5px !important;} .row-2{margin-right:0px !important; margin-left:20px !important;} .hd-title:hover{opacity:0.8 !important;} .hd-tel{display: -webkit-flex; display: flex; -webkit-align-items: flex-start; align-items: flex-start; -webkit-flex-direction: column; flex-direction: column; } /* 767px以下に適用されるCSS（PC用） */ @media screen and (max-width: 767px){ .hd-tel{width:100% !important;}} /* 900px以下に適用されるCSS（PC用） */ @media screen and (max-width: 900px){ .hd-tel-icon{display:none;}} /* 900px以下に適用されるCSS（PC用） */ @media screen and (max-width: 900px){ .hd-contact-icon{display:none;}} .hd-logo{position:relative !important; z-index:2 !important; padding-top:10px !important; } /* 990px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 990px){ .hd-logo{margin-left:0% !important;}} /* 920px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 920px){ .hd-logo{margin-left:0% !important;}} /* 880px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 880px){ .hd-logo{margin-left:0% !important;}} /* 840px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 840px){ .hd-logo{margin-left:0% !important;}} /* 835px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 835px){ .hd-logo{margin-left:0% !important; transform:scale(0.9);}} /* 810px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 810px){ .hd-logo{margin-left:0% !important; transform:scale(0.85);}} /* 785px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 785px){ .hd-logo{margin-left:0% !important; transform:scale(0.80);}} /* 767px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 767px){ .hd-logo{margin-left:0% !important; transform:scale(0.80);}} /* 685px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 685px){ .hd-logo{margin-left:0% !important; transform:scale(0.80);}} /* 670px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 670px){ .hd-logo{margin-left:0% !important; transform:scale(0.75);}} /* 655px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 655px){ .hd-logo{margin-left:0% !important; transform:scale(0.70);}} /* 650px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 650px){ .hd-logo{margin-left:0% !important; transform:scale(1.0); padding-top:10px !important;}} /* 600px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 600px){ .hd-logo{margin-left:0% !important; transform:scale(1.0); padding-top:10px !important;}} /* 519px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 519px){ .hd-logo{padding-top:10px !important;}} .contact-icon-a{position:absolute; top: 438px; left: 298px; z-index: 1000; width: 106px; height: 100px; padding: 0em 2em; align-items: center; justify-content: center; border:#2336ab 1px solid !important;} /* 3000px以下に適用されるCSS（PC用） */ @media screen and (max-width: 3000px){ .contact-icon-a{top:480px !important; left:910px !important;}} /* 2900px以下に適用されるCSS（PC用） */ @media screen and (max-width: 2900px){ .contact-icon-a{top:488px !important; left:870px !important;}} /* 2800px以下に適用されるCSS（PC用） */ @media screen and (max-width: 2800px){ .contact-icon-a{top:488px !important; left:830px !important;}} /* 2700px以下に適用されるCSS（PC用） */ @media screen and (max-width: 2700px){ .contact-icon-a{top:488px !important; left:790px !important;}} /* 2600px以下に適用されるCSS（PC用） */ @media screen and (max-width: 2600px){ .contact-icon-a{top:488px !important; left:750px !important;}} /* 2500px以下に適用されるCSS（PC用） */ @media screen and (max-width: 2500px){ .contact-icon-a{top:488px !important; left:710px !important;}} /* 2400px以下に適用されるCSS（PC用） */ @media screen and (max-width: 2400px){ .contact-icon-a{top:488px !important; left:670px !important;}} /* 2300px以下に適用されるCSS（PC用） */ @media screen and (max-width: 2300px){ .contact-icon-a{top:488px !important; left:630px !important;}} /* 2200px以下に適用されるCSS（PC用） */ @media screen and (max-width: 2200px){ .contact-icon-a{top:488px !important; left:590px !important;}} /* 2100px以下に適用されるCSS（PC用） */ @media screen and (max-width: 2100px){ .contact-icon-a{top:488px !important; left:550px !important;}} /* 2000px以下に適用されるCSS（PC用） */ @media screen and (max-width: 2000px){ .contact-icon-a{top:488px !important; left:510px !important;}} /* 1999px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1999px){ .contact-icon-a{left:509px !important;}} /* 1997px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1997px){ .contact-icon-a{left:508px !important;}} /* 1995px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1995px){ .contact-icon-a{left:507px !important;}} /* 1993px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1993px){ .contact-icon-a{left:506px !important;}} /* 1992px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1992px){ .contact-icon-a{left:507px !important;}} /* 1991px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1991px){ .contact-icon-a{left:506px !important;}} /* 1990px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1990px){ .contact-icon-a{left:506px !important;}} /* 1989px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1989px){ .contact-icon-a{left:505px !important;}} /* 1987px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1987px){ .contact-icon-a{left:504px !important;}} /* 1985px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1985px){ .contact-icon-a{left:503px !important;}} /* 1983px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1983px){ .contact-icon-a{left:502px !important;}} /* 1982px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1982px){ .contact-icon-a{left:503px !important;}} /* 1981px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1981px){ .contact-icon-a{left:502px !important;}} /* 1980px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1980px){ .contact-icon-a{left:502px !important;}} /* 1979px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1979px){ .contact-icon-a{left:501px !important;}} /* 1977px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1977px){ .contact-icon-a{left:500px !important;}} /* 1975px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1975px){ .contact-icon-a{left:499px !important;}} /* 1973px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1973px){ .contact-icon-a{left:498px !important;}} /* 1970px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1970px){ .contact-icon-a{left:498px !important;}} /* 1969px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1969px){ .contact-icon-a{left:497px !important;}} /* 1967px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1967px){ .contact-icon-a{left:496px !important;}} /* 1965px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1965px){ .contact-icon-a{left:495px !important;}} /* 1963px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1963px){ .contact-icon-a{left:494px !important;}} /* 1963px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1963px){ .contact-icon-a{left:494px !important;}} /* 1962px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1962px){ .contact-icon-a{left:495px !important;}} /* 1961px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1961px){ .contact-icon-a{left:494px !important;}} /* 1960px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1960px){ .contact-icon-a{left:494px !important;}} /* 1959px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1959px){ .contact-icon-a{left:493px !important;}} /* 1957px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1957px){ .contact-icon-a{left:492px !important;}} /* 1955px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1955px){ .contact-icon-a{left:491px !important;}} /* 1953px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1953px){ .contact-icon-a{left:490px !important;}} /* 1950px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1950px){ .contact-icon-a{left:490px !important;}} /* 1949px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1949px){ .contact-icon-a{left:489px !important;}} /* 1947px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1947px){ .contact-icon-a{left:488px !important;}} /* 1945px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1945px){ .contact-icon-a{left:487px !important;}} /* 1943px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1943px){ .contact-icon-a{left:486px !important;}} /* 1940px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1940px){ .contact-icon-a{left:486px !important;}} /* 1938px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1938px){ .contact-icon-a{left:485px !important;}} /* 1937px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1937px){ .contact-icon-a{left:484px !important;}} /* 1936px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1936px){ .contact-icon-a{left:484px !important;}} /* 1935px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1935px){ .contact-icon-a{left:483px !important;}} /* 1933px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1933px){ .contact-icon-a{left:482px !important;}} /* 1932px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1932px){ .contact-icon-a{left:483px !important;}} /* 1931px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1931px){ .contact-icon-a{left:482px !important;}} /* 1930px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1930px){ .contact-icon-a{left:482px !important;}} /* 1929px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1929px){ .contact-icon-a{left:481px !important;}} /* 1927px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1927px){ .contact-icon-a{left:480px !important;}} /* 1925px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1925px){ .contact-icon-a{left:479px !important;}} /* 1923px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1923px){ .contact-icon-a{left:478px !important;}} /* 1920px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1920px){ .contact-icon-a{left:478px !important;}} /* 1919px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1919px){ .contact-icon-a{left:477px !important;}} /* 1917px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1917px){ .contact-icon-a{left:476px !important;}} /* 1915px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1915px){ .contact-icon-a{left:475px !important;}} /* 1913px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1913px){ .contact-icon-a{left:474px !important;}} /* 1910px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1910px){ .contact-icon-a{left:474px !important;}} /* 1909px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1909px){ .contact-icon-a{left:473px !important;}} /* 1907px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1907px){ .contact-icon-a{left:472px !important;}} /* 1905px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1905px){ .contact-icon-a{left:471px !important;}} /* 1903px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1903px){ .contact-icon-a{left:470px !important;}} /* 1900px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1900px){ .contact-icon-a{left:470px !important;}} /* 1899px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1899px){ .contact-icon-a{left:469px !important;}} /* 1897px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1897px){ .contact-icon-a{left:468px !important;}} /* 1895px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1895px){ .contact-icon-a{left:467px !important;}} /* 1893px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1893px){ .contact-icon-a{left:466px !important;}} /* 1892px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1892px){ .contact-icon-a{left:467px !important;}} /* 1891px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1891px){ .contact-icon-a{left:466px !important;}} /* 1890px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1890px){ .contact-icon-a{left:466px !important;}} /* 1889px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1889px){ .contact-icon-a{left:465px !important;}} /* 1887px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1887px){ .contact-icon-a{left:464px !important;}} /* 1885px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1885px){ .contact-icon-a{left:463px !important;}} /* 1883px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1883px){ .contact-icon-a{left:462px !important;}} /* 1882px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1882px){ .contact-icon-a{left:463px !important;}} /* 1881px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1881px){ .contact-icon-a{left:462px !important;}} /* 1880px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1880px){ .contact-icon-a{left:462px !important;}} /* 1879px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1879px){ .contact-icon-a{left:461px !important;}} /* 1877px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1877px){ .contact-icon-a{left:460px !important;}} /* 1875px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1875px){ .contact-icon-a{left:459px !important;}} /* 1873px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1873px){ .contact-icon-a{left:458px !important;}} /* 1872px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1872px){ .contact-icon-a{left:459px !important;}} /* 1871px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1871px){ .contact-icon-a{left:458px !important;}} /* 1870px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1870px){ .contact-icon-a{left:458px !important;}} /* 1869px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1869px){ .contact-icon-a{left:457px !important;}} /* 1867px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1867px){ .contact-icon-a{left:456px !important;}} /* 1865px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1865px){ .contact-icon-a{left:455px !important;}} /* 1863px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1863px){ .contact-icon-a{left:454px !important;}} /* 1862px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1862px){ .contact-icon-a{left:455px !important;}} /* 1861px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1861px){ .contact-icon-a{left:454px !important;}} /* 1860px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1860px){ .contact-icon-a{left:454px !important;}} /* 1859px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1859px){ .contact-icon-a{left:453px !important;}} /* 1857px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1857px){ .contact-icon-a{left:452px !important;}} /* 1855px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1855px){ .contact-icon-a{left:451px !important;}} /* 1853px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1853px){ .contact-icon-a{left:450px !important;}} /* 1850px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1850px){ .contact-icon-a{left:450px !important;}} /* 1849px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1849px){ .contact-icon-a{left:449px !important;}} /* 1847px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1847px){ .contact-icon-a{left:448px !important;}} /* 1845px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1845px){ .contact-icon-a{left:447px !important;}} /* 1843px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1843px){ .contact-icon-a{left:446px !important;}} /* 1842px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1842px){ .contact-icon-a{left:447px !important;}} /* 1841px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1841px){ .contact-icon-a{left:446px !important;}} /* 1840px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1840px){ .contact-icon-a{left:446px !important;}} /* 1839px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1839px){ .contact-icon-a{left:445px !important;}} /* 1837px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1837px){ .contact-icon-a{left:444px !important;}} /* 1835px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1835px){ .contact-icon-a{left:443px !important;}} /* 1833px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1833px){ .contact-icon-a{left:442px !important;}} /* 1832px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1832px){ .contact-icon-a{left:443px !important;}} /* 1831px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1831px){ .contact-icon-a{left:442px !important;}} /* 1830px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1830px){ .contact-icon-a{left:442px !important;}} /* 1829px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1829px){ .contact-icon-a{left:441px !important;}} /* 1827px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1827px){ .contact-icon-a{left:440px !important;}} /* 1825px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1825px){ .contact-icon-a{left:439px !important;}} /* 1823px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1823px){ .contact-icon-a{left:438px !important;}} /* 1822px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1822px){ .contact-icon-a{left:439px !important;}} /* 1821px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1821px){ .contact-icon-a{left:438px !important;}} /* 1820px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1820px){ .contact-icon-a{left:438px !important;}} /* 1819px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1819px){ .contact-icon-a{left:437px !important;}} /* 1817px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1817px){ .contact-icon-a{left:436px !important;}} /* 1815px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1815px){ .contact-icon-a{left:435px !important;}} /* 1813px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1813px){ .contact-icon-a{left:434px !important;}} /* 1812px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1812px){ .contact-icon-a{left:435px !important;}} /* 1811px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1811px){ .contact-icon-a{left:434px !important;}} /* 1810px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1810px){ .contact-icon-a{left:434px !important;}} /* 1809px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1809px){ .contact-icon-a{left:433px !important;}} /* 1807px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1807px){ .contact-icon-a{left:432px !important;}} /* 1805px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1805px){ .contact-icon-a{left:431px !important;}} /* 1803px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1803px){ .contact-icon-a{left:430px !important;}} /* 1802px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1802px){ .contact-icon-a{left:431px !important;}} /* 1801px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1801px){ .contact-icon-a{left:430px !important;}} /* 1800px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1800px){ .contact-icon-a{left:430px !important;}} /* 1799px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1799px){ .contact-icon-a{left:429px !important;}} /* 1797px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1797px){ .contact-icon-a{left:428px !important;}} /* 1795px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1795px){ .contact-icon-a{left:427px !important;}} /* 1793px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1793px){ .contact-icon-a{left:426px !important;}} /* 1792px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1792px){ .contact-icon-a{left:427px !important;}} /* 1791px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1791px){ .contact-icon-a{left:426px !important;}} /* 1790px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1790px){ .contact-icon-a{left:426px !important;}} /* 1789px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1789px){ .contact-icon-a{left:425px !important;}} /* 1787px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1787px){ .contact-icon-a{left:424px !important;}} /* 1785px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1785px){ .contact-icon-a{left:423px !important;}} /* 1783px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1783px){ .contact-icon-a{left:422px !important;}} /* 1782px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1782px){ .contact-icon-a{left:423px !important;}} /* 1781px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1781px){ .contact-icon-a{left:422px !important;}} /* 1780px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1780px){ .contact-icon-a{left:422px !important;}} /* 1779px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1779px){ .contact-icon-a{left:421px !important;}} /* 1777px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1777px){ .contact-icon-a{left:420px !important;}} /* 1775px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1775px){ .contact-icon-a{left:419px !important;}} /* 1773px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1773px){ .contact-icon-a{left:418px !important;}} /* 1772px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1772px){ .contact-icon-a{left:419px !important;}} /* 1771px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1771px){ .contact-icon-a{left:418px !important;}} /* 1770px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1770px){ .contact-icon-a{left:418px !important;}} /* 1769px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1769px){ .contact-icon-a{left:417px !important;}} /* 1767px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1767px){ .contact-icon-a{left:416px !important;}} /* 1765px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1765px){ .contact-icon-a{left:415px !important;}} /* 1763px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1763px){ .contact-icon-a{left:414px !important;}} /* 1762px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1762px){ .contact-icon-a{left:415px !important;}} /* 1761px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1761px){ .contact-icon-a{left:414px !important;}} /* 1760px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1760px){ .contact-icon-a{left:414px !important;}} /* 1759px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1759px){ .contact-icon-a{left:413px !important;}} /* 1757px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1757px){ .contact-icon-a{left:412px !important;}} /* 1755px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1755px){ .contact-icon-a{left:411px !important;}} /* 1753px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1753px){ .contact-icon-a{left:410px !important;}} /* 1752px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1752px){ .contact-icon-a{left:411px !important;}} /* 1751px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1751px){ .contact-icon-a{left:410px !important;}} /* 1750px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1750px){ .contact-icon-a{left:410px !important;}} /* 1749px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1749px){ .contact-icon-a{left:409px !important;}} /* 1747px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1747px){ .contact-icon-a{left:408px !important;}} /* 1745px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1745px){ .contact-icon-a{left:407px !important;}} /* 1743px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1743px){ .contact-icon-a{left:406px !important;}} /* 1742px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1742px){ .contact-icon-a{left:407px !important;}} /* 1741px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1741px){ .contact-icon-a{left:406px !important;}} /* 1740px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1740px){ .contact-icon-a{left:406px !important;}} /* 1739px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1739px){ .contact-icon-a{left:405px !important;}} /* 1737px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1737px){ .contact-icon-a{left:404px !important;}} /* 1735px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1735px){ .contact-icon-a{left:403px !important;}} /* 1733px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1733px){ .contact-icon-a{left:402px !important;}} /* 1732px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1732px){ .contact-icon-a{left:403px !important;}} /* 1731px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1731px){ .contact-icon-a{left:402px !important;}} /* 1730px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1730px){ .contact-icon-a{left:402px !important;}} /* 1729px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1729px){ .contact-icon-a{left:401px !important;}} /* 1727px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1727px){ .contact-icon-a{left:400px !important;}} /* 1725px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1725px){ .contact-icon-a{left:399px !important;}} /* 1723px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1723px){ .contact-icon-a{left:398px !important;}} /* 1722px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1722px){ .contact-icon-a{left:399px !important;}} /* 1721px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1721px){ .contact-icon-a{left:398px !important;}} /* 1720px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1720px){ .contact-icon-a{left:398px !important;}} /* 1710px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1710px){ .contact-icon-a{left:394px !important;}} /* 1709px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1709px){ .contact-icon-a{left:393px !important;}} /* 1707px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1707px){ .contact-icon-a{left:392px !important;}} /* 1705px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1705px){ .contact-icon-a{left:391px !important;}} /* 1703px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1703px){ .contact-icon-a{left:390px !important;}} /* 1702px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1702px){ .contact-icon-a{left:391px !important;}} /* 1701px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1701px){ .contact-icon-a{left:390px !important;}} /* 1700px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1700px){ .contact-icon-a{left:390px !important;}} /* 1769px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1769px){ .contact-icon-a{left:417px !important;}} /* 1767px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1767px){ .contact-icon-a{left:416px !important;}} /* 1765px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1765px){ .contact-icon-a{left:415px !important;}} /* 1763px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1763px){ .contact-icon-a{left:414px !important;}} /* 1762px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1762px){ .contact-icon-a{left:415px !important;}} /* 1761px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1761px){ .contact-icon-a{left:414px !important;}} /* 1760px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1760px){ .contact-icon-a{left:414px !important;}} /* 1759px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1759px){ .contact-icon-a{left:413px !important;}} /* 1757px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1757px){ .contact-icon-a{left:412px !important;}} /* 1753px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1753px){ .contact-icon-a{left:411px !important;}} /* 1752px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1752px){ .contact-icon-a{left:412px !important;}} /* 1751px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1751px){ .contact-icon-a{left:411px !important;}} /* 1750px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1750px){ .contact-icon-a{left:410px !important;}} /* 1749px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1749px){ .contact-icon-a{left:409px !important;}} /* 1747px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1747px){ .contact-icon-a{left:408px !important;}} /* 1745px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1745px){ .contact-icon-a{left:407px !important;}} /* 1743px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1743px){ .contact-icon-a{left:406px !important;}} /* 1742px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1742px){ .contact-icon-a{left:407px !important;}} /* 1741px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1741px){ .contact-icon-a{left:406px !important;}} /* 1740px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1740px){ .contact-icon-a{left:406px !important;}} /* 1739px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1739px){ .contact-icon-a{left:405px !important;}} /* 1737px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1737px){ .contact-icon-a{left:404px !important;}} /* 1735px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1735px){ .contact-icon-a{left:403px !important;}} /* 1733px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1733px){ .contact-icon-a{left:402px !important;}} /* 1732px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1732px){ .contact-icon-a{left:403px !important;}} /* 1731px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1731px){ .contact-icon-a{left:402px !important;}} /* 1730px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1730px){ .contact-icon-a{left:402px !important;}} /* 1729px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1729px){ .contact-icon-a{left:401px !important;}} /* 1727px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1727px){ .contact-icon-a{left:400px !important;}} /* 1725px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1725px){ .contact-icon-a{left:399px !important;}} /* 1723px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1723px){ .contact-icon-a{left:398px !important;}} /* 1722px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1722px){ .contact-icon-a{left:399px !important;}} /* 1721px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1721px){ .contact-icon-a{left:398px !important;}} /* 1720px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1720px){ .contact-icon-a{left:398px !important;}} /* 1719px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1719px){ .contact-icon-a{left:397px !important;}} /* 1717px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1717px){ .contact-icon-a{left:396px !important;}} /* 1715px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1715px){ .contact-icon-a{left:395px !important;}} /* 1713px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1713px){ .contact-icon-a{left:394px !important;}} /* 1712px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1712px){ .contact-icon-a{left:395px !important;}} /* 1711px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1711px){ .contact-icon-a{left:394px !important;}} /* 1710px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1710px){ .contact-icon-a{left:394px !important;}} /* 1709px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1709px){ .contact-icon-a{left:393px !important;}} /* 1707px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1707px){ .contact-icon-a{left:392px !important;}} /* 1705px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1705px){ .contact-icon-a{left:391px !important;}} /* 1703px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1703px){ .contact-icon-a{left:390px !important;}} /* 1702px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1702px){ .contact-icon-a{left:391px !important;}} /* 1701px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1701px){ .contact-icon-a{left:390px !important;}} /* 1700px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1700px){ .contact-icon-a{left:390px !important;}} /* 1699px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1699px){ .contact-icon-a{left:389px !important;}} /* 1697px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1697px){ .contact-icon-a{left:388px !important;}} /* 1695px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1695px){ .contact-icon-a{left:387px !important;}} /* 1693px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1693px){ .contact-icon-a{left:386px !important;}} /* 1692px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1692px){ .contact-icon-a{left:387px !important;}} /* 1691px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1691px){ .contact-icon-a{left:386px !important;}} /* 1690px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1690px){ .contact-icon-a{left:386px !important;}} /* 1689px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1689px){ .contact-icon-a{left:385px !important;}} /* 1687px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1687px){ .contact-icon-a{left:384px !important;}} /* 1685px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1685px){ .contact-icon-a{left:383px !important;}} /* 1683px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1683px){ .contact-icon-a{left:382px !important;}} /* 1682px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1682px){ .contact-icon-a{left:383px !important;}} /* 1681px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1681px){ .contact-icon-a{left:382px !important;}} /* 1680px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1680px){ .contact-icon-a{left:382px !important;}} /* 1679px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1679px){ .contact-icon-a{left:381px !important;}} /* 1677px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1677px){ .contact-icon-a{left:380px !important;}} /* 1675px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1675px){ .contact-icon-a{left:379px !important;}} /* 1673px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1673px){ .contact-icon-a{left:378px !important;}} /* 1672px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1672px){ .contact-icon-a{left:379px !important;}} /* 1671px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1671px){ .contact-icon-a{left:378px !important;}} /* 1670px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1670px){ .contact-icon-a{left:378px !important;}} /* 1669px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1669px){ .contact-icon-a{left:377px !important;}} /* 1667px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1667px){ .contact-icon-a{left:376px !important;}} /* 1665px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1665px){ .contact-icon-a{left:375px !important;}} /* 1663px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1663px){ .contact-icon-a{left:374px !important;}} /* 1662px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1662px){ .contact-icon-a{left:375px !important;}} /* 1661px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1661px){ .contact-icon-a{left:374px !important;}} /* 1660px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1660px){ .contact-icon-a{left:374px !important;}} /* 1659px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1659px){ .contact-icon-a{left:373px !important;}} /* 1657px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1657px){ .contact-icon-a{left:372px !important;}} /* 1653px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1653px){ .contact-icon-a{left:371px !important;}} /* 1652px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1652px){ .contact-icon-a{left:372px !important;}} /* 1651px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1651px){ .contact-icon-a{left:371px !important;}} /* 1650px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1650px){ .contact-icon-a{left:370px !important;}} /* 1649px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1649px){ .contact-icon-a{left:369px !important;}} /* 1647px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1647px){ .contact-icon-a{left:368px !important;}} /* 1645px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1645px){ .contact-icon-a{left:367px !important;}} /* 1643px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1643px){ .contact-icon-a{left:366px !important;}} /* 1642px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1642px){ .contact-icon-a{left:367px !important;}} /* 1641px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1641px){ .contact-icon-a{left:366px !important;}} /* 1640px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1640px){ .contact-icon-a{left:366px !important;}} /* 1639px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1639px){ .contact-icon-a{left:365px !important;}} /* 1637px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1637px){ .contact-icon-a{left:364px !important;}} /* 1635px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1635px){ .contact-icon-a{left:363px !important;}} /* 1633px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1633px){ .contact-icon-a{left:362px !important;}} /* 1632px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1632px){ .contact-icon-a{left:363px !important;}} /* 1631px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1631px){ .contact-icon-a{left:362px !important;}} /* 1630px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1630px){ .contact-icon-a{left:362px !important;}} /* 1630px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1630px){ .contact-icon-a{left:362px !important;}} /* 1629px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1629px){ .contact-icon-a{left:361px !important;}} /* 1627px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1627px){ .contact-icon-a{left:360px !important;}} /* 1625px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1625px){ .contact-icon-a{left:359px !important;}} /* 1623px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1623px){ .contact-icon-a{left:358px !important;}} /* 1622px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1622px){ .contact-icon-a{left:359px !important;}} /* 1621px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1621px){ .contact-icon-a{left:358px !important;}} /* 1620px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1620px){ .contact-icon-a{left:358px !important;}} /* 1619px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1619px){ .contact-icon-a{left:357px !important;}} /* 1617px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1617px){ .contact-icon-a{left:356px !important;}} /* 1615px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1615px){ .contact-icon-a{left:355px !important;}} /* 1613px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1613px){ .contact-icon-a{left:354px !important;}} /* 1612px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1612px){ .contact-icon-a{left:355px !important;}} /* 1611px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1611px){ .contact-icon-a{left:354px !important;}} /* 1610px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1610px){ .contact-icon-a{left:354px !important;}} /* 1609px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1609px){ .contact-icon-a{left:353px !important;}} /* 1607px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1607px){ .contact-icon-a{left:352px !important;}} /* 1605px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1605px){ .contact-icon-a{left:351px !important;}} /* 1603px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1603px){ .contact-icon-a{left:350px !important;}} /* 1602px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1602px){ .contact-icon-a{left:351px !important;}} /* 1601px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1601px){ .contact-icon-a{left:350px !important;}} /* 1600px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1600px){ .contact-icon-a{left:350px !important;}} /* 1599px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1599px){ .contact-icon-a{left:349px !important;}} /* 1597px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1597px){ .contact-icon-a{left:348px !important;}} /* 1595px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1595px){ .contact-icon-a{left:347px !important;}} /* 1597px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1597px){ .contact-icon-a{left:348px !important;}} /* 1595px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1595px){ .contact-icon-a{left:347px !important;}} /* 1593px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1593px){ .contact-icon-a{left:346px !important;}} /* 1592px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1592px){ .contact-icon-a{left:347px !important;}} /* 1591px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1591px){ .contact-icon-a{left:346px !important;}} /* 1590px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1590px){ .contact-icon-a{left:346px !important;}} /* 1589px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1589px){ .contact-icon-a{left:345px !important;}} /* 1587px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1587px){ .contact-icon-a{left:344px !important;}} /* 1585px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1585px){ .contact-icon-a{left:343px !important;}} /* 1583px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1583px){ .contact-icon-a{left:342px !important;}} /* 1582px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1582px){ .contact-icon-a{left:343px !important;}} /* 1581px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1581px){ .contact-icon-a{left:342px !important;}} /* 1580px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1580px){ .contact-icon-a{left:342px !important;}} /* 1579px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1579px){ .contact-icon-a{left:341px !important;}} /* 1577px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1577px){ .contact-icon-a{left:340px !important;}} /* 1575px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1575px){ .contact-icon-a{left:339px !important;}} /* 1573px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1573px){ .contact-icon-a{left:338px !important;}} /* 1572px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1572px){ .contact-icon-a{left:339px !important;}} /* 1571px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1571px){ .contact-icon-a{left:338px !important;}} /* 1570px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1570px){ .contact-icon-a{left:338px !important;}} /* 1569px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1569px){ .contact-icon-a{left:337px !important;}} /* 1567px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1567px){ .contact-icon-a{left:336px !important;}} /* 1565px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1565px){ .contact-icon-a{left:335px !important;}} /* 1563px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1563px){ .contact-icon-a{left:334px !important;}} /* 1562px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1562px){ .contact-icon-a{left:335px !important;}} /* 1561px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1561px){ .contact-icon-a{left:334px !important;}} /* 1560px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1560px){ .contact-icon-a{left:334px !important;}} /* 1559px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1559px){ .contact-icon-a{left:333px !important;}} /* 1557px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1557px){ .contact-icon-a{left:332px !important;}} /* 1555px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1555px){ .contact-icon-a{left:331px !important;}} /* 1553px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1553px){ .contact-icon-a{left:330px !important;}} /* 1552px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1552px){ .contact-icon-a{left:331px !important;}} /* 1551px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1551px){ .contact-icon-a{left:330px !important;}} /* 1550px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1550px){ .contact-icon-a{left:330px !important;}} /* 1549px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1549px){ .contact-icon-a{left:329px !important;}} /* 1547px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1547px){ .contact-icon-a{left:328px !important;}} /* 1545px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1545px){ .contact-icon-a{left:327px !important;}} /* 1543px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1543px){ .contact-icon-a{left:326px !important;}} /* 1542px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1542px){ .contact-icon-a{left:327px !important;}} /* 1541px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1541px){ .contact-icon-a{left:326px !important;}} /* 1540px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1540px){ .contact-icon-a{left:326px !important;}} /* 1539px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1539px){ .contact-icon-a{left:325px !important;}} /* 1537px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1537px){ .contact-icon-a{left:324px !important;}} /* 1535px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1535px){ .contact-icon-a{left:323px !important;}} /* 1533px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1533px){ .contact-icon-a{left:322px !important;}} /* 1532px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1532px){ .contact-icon-a{left:323px !important;}} /* 1531px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1531px){ .contact-icon-a{left:322px !important;}} /* 1530px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1530px){ .contact-icon-a{left:322px !important;}} /* 1529px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1529px){ .contact-icon-a{left:321px !important;}} /* 1527px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1527px){ .contact-icon-a{left:320px !important;}} /* 1525px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1525px){ .contact-icon-a{left:319px !important;}} /* 1523px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1523px){ .contact-icon-a{left:318px !important;}} /* 1522px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1522px){ .contact-icon-a{left:319px !important;}} /* 1521px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1521px){ .contact-icon-a{left:318px !important;}} /* 1520px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1520px){ .contact-icon-a{left:318px !important;}} /* 1519px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1519px){ .contact-icon-a{left:317px !important;}} /* 1517px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1517px){ .contact-icon-a{left:316px !important;}} /* 1515px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1515px){ .contact-icon-a{left:315px !important;}} /* 1513px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1513px){ .contact-icon-a{left:314px !important;}} /* 1512px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1512px){ .contact-icon-a{left:315px !important;}} /* 1511px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1511px){ .contact-icon-a{left:314px !important;}} /* 1510px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1510px){ .contact-icon-a{left:314px !important;}} /* 1509px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1509px){ .contact-icon-a{left:313px !important;}} /* 1507px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1507px){ .contact-icon-a{left:312px !important;}} /* 1505px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1505px){ .contact-icon-a{left:311px !important;}} /* 1503px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1503px){ .contact-icon-a{left:310px !important;}} /* 1502px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1502px){ .contact-icon-a{left:311px !important;}} /* 1501px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1501px){ .contact-icon-a{left:310px !important;}} /* 1500px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1500px){ .contact-icon-a{left:310px !important;}} /* 1499px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1499px){ .contact-icon-a{left:309px !important;}} /* 1497px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1497px){ .contact-icon-a{left:308px !important;}} /* 1495px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1495px){ .contact-icon-a{left:307px !important;}} /* 1493px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1493px){ .contact-icon-a{left:306px !important;}} /* 1492px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1492px){ .contact-icon-a{left:307px !important;}} /* 1491px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1491px){ .contact-icon-a{left:306px !important;}} /* 1490px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1490px){ .contact-icon-a{left:306px !important;}} /* 1489px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1489px){ .contact-icon-a{left:305px !important;}} /* 1487px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1487px){ .contact-icon-a{left:304px !important;}} /* 1485px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1485px){ .contact-icon-a{left:303px !important;}} /* 1483px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1483px){ .contact-icon-a{left:302px !important;}} /* 1482px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1482px){ .contact-icon-a{left:303px !important;}} /* 1481px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1481px){ .contact-icon-a{left:302px !important;}} /* 1480px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1480px){ .contact-icon-a{left:302px !important;}} /* 1479px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1479px){ .contact-icon-a{left:301px !important;}} /* 1477px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1477px){ .contact-icon-a{left:300px !important;}} /* 1475px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1475px){ .contact-icon-a{left:299px !important;}} /* 1473px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1473px){ .contact-icon-a{left:298px !important;}} /* 1472px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1472px){ .contact-icon-a{left:299px !important;}} /* 1471px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1471px){ .contact-icon-a{left:298px !important;}} /* 1470px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1470px){ .contact-icon-a{left:298px !important;}} /* 1469px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1469px){ .contact-icon-a{left:297px !important;}} /* 1467px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1467px){ .contact-icon-a{left:296px !important;}} /* 1465px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1465px){ .contact-icon-a{left:295px !important;}} /* 1463px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1463px){ .contact-icon-a{left:294px !important;}} /* 1462px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1462px){ .contact-icon-a{left:295px !important;}} /* 1461px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1461px){ .contact-icon-a{left:294px !important;}} /* 1460px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1460px){ .contact-icon-a{left:294px !important;}} /* 1459px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1459px){ .contact-icon-a{left:293px !important;}} /* 1457px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1457px){ .contact-icon-a{left:292px !important;}} /* 1455px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1455px){ .contact-icon-a{left:291px !important;}} /* 1453px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1453px){ .contact-icon-a{left:290px !important;}} /* 1452px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1452px){ .contact-icon-a{left:291px !important;}} /* 1451px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1451px){ .contact-icon-a{left:290px !important;}} /* 1450px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1450px){ .contact-icon-a{left:303px !important;}} /* 1449px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1449px){ .contact-icon-a{left:302px !important;}} /* 1447px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1447px){ .contact-icon-a{left:301px !important;}} /* 1445px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1445px){ .contact-icon-a{left:300px !important;}} /* 1443px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1443px){ .contact-icon-a{left:299px !important;}} /* 1442px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1442px){ .contact-icon-a{left:300px !important;}} /* 1441px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1441px){ .contact-icon-a{left:299px !important;}} /* 1440px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1440px){ .contact-icon-a{left:299px !important;}} /* 1439px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1439px){ .contact-icon-a{left:298px !important;}} /* 1437px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1437px){ .contact-icon-a{left:297px !important;}} /* 1435px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1435px){ .contact-icon-a{left:296px !important;}} /* 1433px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1433px){ .contact-icon-a{left:295px !important;}} /* 1432px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1432px){ .contact-icon-a{left:296px !important;}} /* 1431px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1431px){ .contact-icon-a{left:295px !important;}} /* 1430px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1430px){ .contact-icon-a{left:295px !important;}} /* 1429px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1429px){ .contact-icon-a{left:294px !important;}} /* 1427px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1427px){ .contact-icon-a{left:293px !important;}} /* 1425px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1425px){ .contact-icon-a{left:292px !important;}} /* 1423px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1423px){ .contact-icon-a{left:291px !important;}} /* 1422px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1422px){ .contact-icon-a{left:292px !important;}} /* 1421px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1421px){ .contact-icon-a{left:291px !important;}} /* 1420px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1420px){ .contact-icon-a{left:291px !important;}} /* 1419px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1419px){ .contact-icon-a{left:290px !important;}} /* 1417px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1417px){ .contact-icon-a{left:289px !important;}} /* 1415px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1415px){ .contact-icon-a{left:288px !important;}} /* 1413px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1413px){ .contact-icon-a{left:287px !important;}} /* 1412px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1412px){ .contact-icon-a{left:288px !important;}} /* 1411px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1411px){ .contact-icon-a{left:287px !important;}} /* 1410px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1410px){ .contact-icon-a{left:287px !important;}} /* 1409px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1409px){ .contact-icon-a{left:286px !important;}} /* 1407px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1407px){ .contact-icon-a{left:285px !important;}} /* 1405px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1405px){ .contact-icon-a{left:284px !important;}} /* 1403px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1403px){ .contact-icon-a{left:283px !important;}} /* 1402px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1402px){ .contact-icon-a{left:284px !important;}} /* 1401px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1401px){ .contact-icon-a{left:283px !important;}} /* 1400px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1400px){ .contact-icon-a{left:283px !important;}} /* 1399px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1399px){ .contact-icon-a{left:282px !important;}} /* 1397px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1397px){ .contact-icon-a{left:281px !important;}} /* 1395px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1395px){ .contact-icon-a{left:280px !important;}} /* 1393px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1393px){ .contact-icon-a{left:279px !important;}} /* 1392px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1392px){ .contact-icon-a{left:280px !important;}} /* 1391px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1391px){ .contact-icon-a{left:279px !important;}} /* 1390px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1390px){ .contact-icon-a{top:487px !important; left:279px !important;}} /* 1389px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1389px){ .contact-icon-a{left:278px !important;}} /* 1387px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1387px){ .contact-icon-a{left:277px !important;}} /* 1385px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1385px){ .contact-icon-a{left:276px !important;}} /* 1383px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1383px){ .contact-icon-a{left:275px !important;}} /* 1382px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1382px){ .contact-icon-a{left:276px !important;}} /* 1381px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1381px){ .contact-icon-a{left:275px !important;}} /* 1380px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1380px){ .contact-icon-a{left:275px !important;}} /* 1379px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1379px){ .contact-icon-a{left:274px !important;}} /* 1377px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1377px){ .contact-icon-a{left:273px !important;}} /* 1375px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1375px){ .contact-icon-a{left:272px !important;}} /* 1373px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1373px){ .contact-icon-a{left:271px !important;}} /* 1372px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1372px){ .contact-icon-a{left:272px !important;}} /* 1371px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1371px){ .contact-icon-a{left:271px !important;}} /* 1370px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1370px){ .contact-icon-a{left:271px !important;}} /* 1369px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1369px){ .contact-icon-a{left:270px !important;}} /* 1367px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1367px){ .contact-icon-a{left:269px !important;}} /* 1365px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1365px){ .contact-icon-a{left:268px !important;}} /* 1363px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1363px){ .contact-icon-a{left:267px !important;}} /* 1362px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1362px){ .contact-icon-a{left:268px !important;}} /* 1361px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1361px){ .contact-icon-a{left:267px !important;}} /* 1360px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1360px){ .contact-icon-a{left:267px !important;}} /* 1359px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1359px){ .contact-icon-a{left:266px !important;}} /* 1357px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1357px){ .contact-icon-a{left:265px !important;}} /* 1355px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1355px){ .contact-icon-a{left:264px !important;}} /* 1353px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1353px){ .contact-icon-a{left:263px !important;}} /* 1352px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1352px){ .contact-icon-a{left:264px !important;}} /* 1351px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1351px){ .contact-icon-a{left:263px !important;}} /* 1350px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1350px){ .contact-icon-a{left:263px !important;}} /* 1349px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1349px){ .contact-icon-a{left:262px !important;}} /* 1347px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1347px){ .contact-icon-a{left:261px !important;}} /* 1345px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1345px){ .contact-icon-a{left:260px !important;}} /* 1343px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1343px){ .contact-icon-a{left:259px !important;}} /* 1342px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1342px){ .contact-icon-a{left:260px !important;}} /* 1341px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1341px){ .contact-icon-a{left:259px !important;}} /* 1340px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1340px){ .contact-icon-a{left:259px !important;}} /* 1339px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1339px){ .contact-icon-a{left:258px !important;}} /* 1337px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1337px){ .contact-icon-a{left:257px !important;}} /* 1335px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1335px){ .contact-icon-a{left:256px !important;}} /* 1333px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1333px){ .contact-icon-a{left:255px !important;}} /* 1332px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1332px){ .contact-icon-a{left:256px !important;}} /* 1331px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1331px){ .contact-icon-a{left:256px !important;}} /* 1330px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1330px){ .contact-icon-a{left:256px !important;}} /* 1329px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1329px){ .contact-icon-a{left:255px !important;}} /* 1327px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1327px){ .contact-icon-a{left:254px !important;}} /* 1325px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1325px){ .contact-icon-a{left:253px !important;}} /* 1323px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1323px){ .contact-icon-a{left:252px !important;}} /* 1322px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1322px){ .contact-icon-a{left:253px !important;}} /* 1321px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1321px){ .contact-icon-a{left:252px !important;}} /* 1320px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1320px){ .contact-icon-a{left:252px !important;}} /* 1319px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1319px){ .contact-icon-a{left:251px !important;}} /* 1317px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1317px){ .contact-icon-a{left:250px !important;}} /* 1315px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1315px){ .contact-icon-a{left:249px !important;}} /* 1313px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1313px){ .contact-icon-a{left:248px !important;}} /* 1312px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1312px){ .contact-icon-a{left:249px !important;}} /* 1311px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1311px){ .contact-icon-a{left:248px !important;}} /* 1310px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1310px){ .contact-icon-a{left:248px !important;}} /* 1309px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1309px){ .contact-icon-a{left:247px !important;}} /* 1307px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1307px){ .contact-icon-a{left:246px !important;}} /* 1305px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1305px){ .contact-icon-a{left:245px !important;}} /* 1303px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1303px){ .contact-icon-a{left:244px !important;}} /* 1302px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1302px){ .contact-icon-a{left:245px !important;}} /* 1301px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1301px){ .contact-icon-a{left:244px !important;}} /* 1300px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1300px){ .contact-icon-a{top:487px !important; left:244px !important;}} /* 1299px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1299px){ .contact-icon-a{left:243px !important;}} /* 1297px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1297px){ .contact-icon-a{left:242px !important;}} /* 1295px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1295px){ .contact-icon-a{left:241px !important;}} /* 1293px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1293px){ .contact-icon-a{left:240px !important;}} /* 1292px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1292px){ .contact-icon-a{left:241px !important;}} /* 1291px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1291px){ .contact-icon-a{left:240px !important;}} /* 1290px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1290px){ .contact-icon-a{left:240px !important;}} /* 1289px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1289px){ .contact-icon-a{left:239px !important;}} /* 1287px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1287px){ .contact-icon-a{left:238px !important;}} /* 1285px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1285px){ .contact-icon-a{left:237px !important;}} /* 1283px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1283px){ .contact-icon-a{left:236px !important;}} /* 1282px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1282px){ .contact-icon-a{left:237px !important;}} /* 1281px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1281px){ .contact-icon-a{left:236px !important;}} /* 1280px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1280px){ .contact-icon-a{left:236px !important;}} /* 1279px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1279px){ .contact-icon-a{left:235px !important;}} /* 1277px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1277px){ .contact-icon-a{left:234px !important;}} /* 1275px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1275px){ .contact-icon-a{left:233px !important;}} /* 1273px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1273px){ .contact-icon-a{left:232px !important;}} /* 1272px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1272px){ .contact-icon-a{left:233px !important;}} /* 1271px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1271px){ .contact-icon-a{left:232px !important;}} /* 1270px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1270px){ .contact-icon-a{left:232px !important;}} /* 1269px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1269px){ .contact-icon-a{left:231px !important;}} /* 1267px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1267px){ .contact-icon-a{left:230px !important;}} /* 1265px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1265px){ .contact-icon-a{left:229px !important;}} /* 1263px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1263px){ .contact-icon-a{left:228px !important;}} /* 1262px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1262px){ .contact-icon-a{left:229px !important;}} /* 1261px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1261px){ .contact-icon-a{left:228px !important;}} /* 1260px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1260px){ .contact-icon-a{left:228px !important;}} /* 1259px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1259px){ .contact-icon-a{left:227px !important;}} /* 1258px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1258px){ .contact-icon-a{left:226px !important;}} /* 1257px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1257px){ .contact-icon-a{left:225px !important;}} /* 1255px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1255px){ .contact-icon-a{left:224px !important;}} /* 1253px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1253px){ .contact-icon-a{left:223px !important;}} /* 1252px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1252px){ .contact-icon-a{left:224px !important;}} /* 1251px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1251px){ .contact-icon-a{left:223px !important;}} /* 1250px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1250px){ .contact-icon-a{left:224px !important;}} /* 1249px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1249px){ .contact-icon-a{left:223px !important;}} /* 1247px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1247px){ .contact-icon-a{left:222px !important;}} /* 1245px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1245px){ .contact-icon-a{left:221px !important;}} /* 1243px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1243px){ .contact-icon-a{left:220px !important;}} /* 1242px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1242px){ .contact-icon-a{left:221px !important;}} /* 1241px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1241px){ .contact-icon-a{left:220px !important;}} /* 1240px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1240px){ .contact-icon-a{left:220px !important;}} /* 1239px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1239px){ .contact-icon-a{left:219px !important;}} /* 1237px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1237px){ .contact-icon-a{left:218px !important;}} /* 1235px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1235px){ .contact-icon-a{left:217px !important;}} /* 1233px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1233px){ .contact-icon-a{left:216px !important;}} /* 1232px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1232px){ .contact-icon-a{left:217px !important;}} /* 1231px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1231px){ .contact-icon-a{left:216px !important;}} /* 1230px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1230px){ .contact-icon-a{left:216px !important;}} /* 1229px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1229px){ .contact-icon-a{left:215px !important;}} /* 1227px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1227px){ .contact-icon-a{left:214px !important;}} /* 1225px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1225px){ .contact-icon-a{left:213px !important;}} /* 1223px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1223px){ .contact-icon-a{left:212px !important;}} /* 1222px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1222px){ .contact-icon-a{left:213px !important;}} /* 1221px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1221px){ .contact-icon-a{left:212px !important;}} /* 1220px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1220px){ .contact-icon-a{left:204px !important;}} /* 1219px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1219px){ .contact-icon-a{left:203px !important;}} /* 1217px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1217px){ .contact-icon-a{left:202px !important;}} /* 1215px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1215px){ .contact-icon-a{left:201px !important;}} /* 1213px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1213px){ .contact-icon-a{left:200px !important;}} /* 1212px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1212px){ .contact-icon-a{left:201px !important;}} /* 1211px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1211px){ .contact-icon-a{left:200px !important;}} /* 1210px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1210px){ .contact-icon-a{top:438px !important; left:197px !important;}} /* 1209px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1209px){ .contact-icon-a{left:196px !important;}} /* 1207px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1207px){ .contact-icon-a{left:195px !important;}} /* 1205px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1205px){ .contact-icon-a{left:194px !important;}} /* 1203px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1203px){ .contact-icon-a{left:193px !important;}} /* 1202px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1202px){ .contact-icon-a{left:194px !important;}} /* 1201px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1201px){ .contact-icon-a{left:193px !important;}} /* 1200px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1200px){ .contact-icon-a{left:193px !important;}} /* 1199px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1199px){ .contact-icon-a{left:243px !important;}} /* 1197px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1197px){ .contact-icon-a{left:242px !important;}} /* 1195px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1195px){ .contact-icon-a{left:241px !important;}} /* 1193px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1193px){ .contact-icon-a{left:240px !important;}} /* 1192px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1192px){ .contact-icon-a{left:241px !important;}} /* 1191px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1191px){ .contact-icon-a{left:240px !important;}} /* 1190px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1190px){ .contact-icon-a{left:240px !important;}} /* 1189px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1189px){ .contact-icon-a{left:240px !important;}} /* 1187px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1187px){ .contact-icon-a{left:239px !important;}} /* 1185px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1185px){ .contact-icon-a{left:238px !important;}} /* 1183px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1183px){ .contact-icon-a{left:237px !important;}} /* 1182px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1182px){ .contact-icon-a{left:237px !important;}} /* 1181px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1181px){ .contact-icon-a{left:237px !important;}} /* 1180px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1180px){ .contact-icon-a{left:233px !important;}} /* 1179px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1179px){ .contact-icon-a{left:233px !important;}} /* 1177px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1177px){ .contact-icon-a{left:232px !important;}} /* 1175px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1175px){ .contact-icon-a{left:231px !important;}} /* 1173px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1173px){ .contact-icon-a{left:230px !important;}} /* 1172px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1172px){ .contact-icon-a{left:230px !important;}} /* 1171px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1171px){ .contact-icon-a{left:230px !important;}} /* 1170px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1170px){ .contact-icon-a{left:229px !important;}} /* 1169px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1169px){ .contact-icon-a{left:229px !important;}} /* 1167px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1167px){ .contact-icon-a{left:228px !important;}} /* 1165px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1165px){ .contact-icon-a{left:227px !important;}} /* 1163px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1163px){ .contact-icon-a{left:226px !important;}} /* 1162px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1162px){ .contact-icon-a{left:226px !important;}} /* 1161px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1161px){ .contact-icon-a{left:226px !important;}} /* 1160px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1160px){ .contact-icon-a{left:223px !important;}} /* 1159px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1159px){ .contact-icon-a{left:223px !important;}} /* 1157px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1157px){ .contact-icon-a{left:222px !important;}} /* 1155px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1155px){ .contact-icon-a{left:221px !important;}} /* 1153px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1153px){ .contact-icon-a{left:220px !important;}} /* 1152px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1152px){ .contact-icon-a{left:220px !important;}} /* 1150px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1150px){ .contact-icon-a{left:219px !important;}} /* 1149px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1149px){ .contact-icon-a{left:219px !important;}} /* 1147px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1147px){ .contact-icon-a{left:218px !important;}} /* 1145px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1145px){ .contact-icon-a{left:217px !important;}} /* 1143px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1143px){ .contact-icon-a{left:216px !important;}} /* 1142px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1142px){ .contact-icon-a{left:216px !important;}} /* 1141px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1141px){ .contact-icon-a{left:216px !important;}} /* 1140px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1140px){ .contact-icon-a{left:215px !important;}} /* 1139px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1139px){ .contact-icon-a{left:215px !important;}} /* 1137px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1137px){ .contact-icon-a{left:214px !important;}} /* 1135px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1135px){ .contact-icon-a{left:213px !important;}} /* 1133px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1133px){ .contact-icon-a{left:212px !important;}} /* 1130px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1130px){ .contact-icon-a{left:211px !important;}} /* 1127px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1127px){ .contact-icon-a{left:210px !important;}} /* 1125px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1125px){ .contact-icon-a{left:209px !important;}} /* 1123px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1123px){ .contact-icon-a{left:208px !important;}} /* 1120px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1120px){ .contact-icon-a{left:208px !important;}} /* 1117px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1117px){ .contact-icon-a{left:206px !important;}} /* 1115px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1115px){ .contact-icon-a{left:205px !important;}} /* 1113px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1113px){ .contact-icon-a{left:204px !important;}} /* 1110px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1110px){ .contact-icon-a{left:203px !important;}} /* 1108px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1108px){ .contact-icon-a{left:202px !important;}} /* 1106px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1106px){ .contact-icon-a{left:201px !important;}} /* 1104px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1104px){ .contact-icon-a{left:200px !important;}} /* 1100px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1100px){ .contact-icon-a{left:199px !important;}} /* 1098px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1098px){ .contact-icon-a{left:198px !important;}} /* 1096px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1096px){ .contact-icon-a{left:197px !important;}} /* 1094px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1094px){ .contact-icon-a{left:196px !important;}} /* 1090px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1090px){ .contact-icon-a{left:195px !important;}} /* 1088px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1088px){ .contact-icon-a{left:194px !important;}} /* 1086px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1086px){ .contact-icon-a{left:193px !important;}} /* 1084px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1084px){ .contact-icon-a{left:192px !important;}} /* 1080px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1080px){ .contact-icon-a{left:191px !important;}} /* 1078px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1078px){ .contact-icon-a{left:190px !important;}} /* 1076px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1076px){ .contact-icon-a{left:189px !important;}} /* 1074px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1074px){ .contact-icon-a{left:188px !important;}} /* 1070px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1070px){ .contact-icon-a{left:187px !important;}} /* 1068px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1068px){ .contact-icon-a{left:186px !important;}} /* 1066px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1066x){ .contact-icon-a{left:185px !important;}} /* 1064px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1064x){ .contact-icon-a{left:184px !important;}} /* 1060px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1060px){ .contact-icon-a{left:183px !important;}} /* 1058px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1058px){ .contact-icon-a{left:182px !important;}} /* 1056px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1056px){ .contact-icon-a{left:181px !important;}} /* 1054px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1054px){ .contact-icon-a{left:180px !important;}} /* 1050px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1050px){ .contact-icon-a{left:179px !important;}} /* 1048px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1048px){ .contact-icon-a{left:178px !important;}} /* 1046px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1046px){ .contact-icon-a{left:177px !important;}} /* 1044px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1044px){ .contact-icon-a{left:176px !important;}} /* 1040px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1040px){ .contact-icon-a{left:175px !important;}} /* 1038px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1038px){ .contact-icon-a{left:174px !important;}} /* 1036px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1036px){ .contact-icon-a{left:173px !important;}} /* 1034px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1034px){ .contact-icon-a{left:172px !important;}} /* 1030px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1030px){ .contact-icon-a{left:171px !important;}} /* 1028px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1028px){ .contact-icon-a{left:170px !important;}} /* 1026px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1026px){ .contact-icon-a{left:169px !important;}} /* 1024px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1024px){ .contact-icon-a{left:155px !important;}} /* 1020px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1020px){ .contact-icon-a{top:418px !important; left:154px !important; transform:scale(0.8);}} /* 1010px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1010px){ .contact-icon-a{left:150px !important;}} /* 1018px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1018px){ .contact-icon-a{left:153px !important;}} /* 1016px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1016px){ .contact-icon-a{left:152px !important;}} /* 1014px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1014px){ .contact-icon-a{left:151px !important;}} /* 1012px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1012px){ .contact-icon-a{left:151px !important;}} /* 1008px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1008px){ .contact-icon-a{left:149px !important;}} /* 1006px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1006px){ .contact-icon-a{left:148px !important;}} /* 1004px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1004px){ .contact-icon-a{left:147px !important;}} /* 1000px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1000px){ .contact-icon-a{top:318px !important; left:151px !important; transform:scale(0.8);}} /* 998px以下に適用されるCSS（PC用） */ @media screen and (max-width: 998px){ .contact-icon-a{left:150px !important;}} /* 996px以下に適用されるCSS（PC用） */ @media screen and (max-width: 996px){ .contact-icon-a{left:149px !important;}} /* 994px以下に適用されるCSS（PC用） */ @media screen and (max-width: 994px){ .contact-icon-a{left:148px !important;}} /* 991px以下に適用されるCSS（PC用） */ @media screen and (max-width: 991px){ .contact-icon-a{left:202px !important;}} /* 990px以下に適用されるCSS（PC用） */ @media screen and (max-width: 990px){ .contact-icon-a{left:202px !important;}} /* 988px以下に適用されるCSS（PC用） */ @media screen and (max-width: 988px){ .contact-icon-a{left:201px !important;}} /* 986px以下に適用されるCSS（PC用） */ @media screen and (max-width: 986px){ .contact-icon-a{left:200px !important;}} /* 984px以下に適用されるCSS（PC用） */ @media screen and (max-width: 984px){ .contact-icon-a{left:199px !important;}} /* 980px以下に適用されるCSS（PC用） */ @media screen and (max-width: 980px){ .contact-icon-a{left:198px !important;}} /* 978px以下に適用されるCSS（PC用） */ @media screen and (max-width: 978px){ .contact-icon-a{left:197px !important;}} /* 976px以下に適用されるCSS（PC用） */ @media screen and (max-width: 976px){ .contact-icon-a{left:196px !important;}} /* 974px以下に適用されるCSS（PC用） */ @media screen and (max-width: 974px){ .contact-icon-a{left:195px !important;}} /* 970px以下に適用されるCSS（PC用） */ @media screen and (max-width: 970px){ .contact-icon-a{left:194px !important;}} /* 968px以下に適用されるCSS（PC用） */ @media screen and (max-width: 968px){ .contact-icon-a{left:194px !important;}} /* 966px以下に適用されるCSS（PC用） */ @media screen and (max-width: 966px){ .contact-icon-a{left:192px !important;}} /* 964px以下に適用されるCSS（PC用） */ @media screen and (max-width: 964px){ .contact-icon-a{left:191px !important;}} /* 962px以下に適用されるCSS（PC用） */ @media screen and (max-width: 962px){ .contact-icon-a{left:190px !important;}} /* 960px以下に適用されるCSS（PC用） */ @media screen and (max-width: 960px){ .contact-icon-a{left:190px !important;}} /* 958px以下に適用されるCSS（PC用） */ @media screen and (max-width: 958px){ .contact-icon-a{left:189px !important;}} /* 956px以下に適用されるCSS（PC用） */ @media screen and (max-width: 956px){ .contact-icon-a{left:188px !important;}} /* 954px以下に適用されるCSS（PC用） */ @media screen and (max-width: 954px){ .contact-icon-a{left:187px !important;}} /* 952px以下に適用されるCSS（PC用） */ @media screen and (max-width: 952px){ .contact-icon-a{left:187px !important;}} /* 950px以下に適用されるCSS（PC用） */ @media screen and (max-width: 950px){ .contact-icon-a{left:186px !important;}} /* 948px以下に適用されるCSS（PC用） */ @media screen and (max-width: 948px){ .contact-icon-a{left:185px !important;}} /* 946px以下に適用されるCSS（PC用） */ @media screen and (max-width: 946px){ .contact-icon-a{left:184px !important;}} /* 944px以下に適用されるCSS（PC用） */ @media screen and (max-width: 944px){ .contact-icon-a{left:183px !important;}} /* 940px以下に適用されるCSS（PC用） */ @media screen and (max-width: 940px){ .contact-icon-a{left:182px !important;}} /* 938px以下に適用されるCSS（PC用） */ @media screen and (max-width: 938px){ .contact-icon-a{left:181px !important;}} /* 936px以下に適用されるCSS（PC用） */ @media screen and (max-width: 936px){ .contact-icon-a{left:180px !important;}} /* 934px以下に適用されるCSS（PC用） */ @media screen and (max-width: 934px){ .contact-icon-a{left:179px !important;}} /* 930px以下に適用されるCSS（PC用） */ @media screen and (max-width: 930px){ .contact-icon-a{left:178px !important;}} /* 928px以下に適用されるCSS（PC用） */ @media screen and (max-width: 928px){ .contact-icon-a{left:177px !important;}} /* 926px以下に適用されるCSS（PC用） */ @media screen and (max-width: 926px){ .contact-icon-a{left:176px !important;}} /* 924px以下に適用されるCSS（PC用） */ @media screen and (max-width: 924px){ .contact-icon-a{left:174px !important;}} /* 920px以下に適用されるCSS（PC用） */ @media screen and (max-width: 920px){ .contact-icon-a{left:174px !important;}} /* 918px以下に適用されるCSS（PC用） */ @media screen and (max-width: 918px){ .contact-icon-a{left:173px !important;}} /* 916px以下に適用されるCSS（PC用） */ @media screen and (max-width: 916px){ .contact-icon-a{left:172px !important;}} /* 914px以下に適用されるCSS（PC用） */ @media screen and (max-width: 914px){ .contact-icon-a{left:172px !important;}} /* 910px以下に適用されるCSS（PC用） */ @media screen and (max-width: 910px){ .contact-icon-a{left:170px !important;}} /* 908px以下に適用されるCSS（PC用） */ @media screen and (max-width: 908px){ .contact-icon-a{left:169px !important;}} /* 906px以下に適用されるCSS（PC用） */ @media screen and (max-width: 906px){ .contact-icon-a{left:168px !important;}} /* 904px以下に適用されるCSS（PC用） */ @media screen and (max-width: 904px){ .contact-icon-a{left:167px !important;}} /* 900px以下に適用されるCSS（PC用） */ @media screen and (max-width: 900px){ .contact-icon-a{top:278px !important; left:158px !important;}} /* 899px以下に適用されるCSS（PC用） */ @media screen and (max-width: 899px){ .contact-icon-a{left:157px !important;}} /* 898px以下に適用されるCSS（PC用） */ @media screen and (max-width: 898px){ .contact-icon-a{left:156px !important;}} /* 895px以下に適用されるCSS（PC用） */ @media screen and (max-width: 895px){ .contact-icon-a{left:155px !important;}} /* 893px以下に適用されるCSS（PC用） */ @media screen and (max-width: 893px){ .contact-icon-a{left:154px !important;}} /* 891px以下に適用されるCSS（PC用） */ @media screen and (max-width: 891px){ .contact-icon-a{left:154px !important;}} /* 890px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 890px){ .contact-icon-a{left:154px !important;}} /* 889px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 889px){ .contact-icon-a{left:153px !important;}} /* 887px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 887px){ .contact-icon-a{left:152px !important;}} /* 885px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 885px){ .contact-icon-a{left:151px !important;}} /* 883px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 883px){ .contact-icon-a{left:150px !important;}} /* 880px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 880px){ .contact-icon-a{left:150px !important;}} /* 879px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 879px){ .contact-icon-a{left:149px !important;}} /* 877px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 877px){ .contact-icon-a{left:148px !important;}} /* 875px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 875px){ .contact-icon-a{left:147px !important;}} /* 873px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 873px){ .contact-icon-a{left:146px !important;}} /* 870px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 870px){ .contact-icon-a{left:146px !important;}} /* 869px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 869px){ .contact-icon-a{left:144px !important;}} /* 867px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 867px){ .contact-icon-a{left:144px !important;}} /* 865px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 865px){ .contact-icon-a{left:143px !important;}} /* 863px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 863px){ .contact-icon-a{left:142px !important;}} /* 860px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 860px){ .contact-icon-a{left:142px !important;}} /* 859px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 859px){ .contact-icon-a{left:141px !important;}} /* 857px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 857px){ .contact-icon-a{left:140px !important;}} /* 855px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 855px){ .contact-icon-a{left:139px !important;}} /* 853px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 853px){ .contact-icon-a{left:138px !important;}} /* 850px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 850px){ .contact-icon-a{top:278px !important; left:132px !important; transform:scale(0.8);}} /* 849px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 849px){ .contact-icon-a{left:129px !important;}} /* 847px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 847px){ .contact-icon-a{left:128px !important;}} /* 845px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 845px){ .contact-icon-a{left:127px !important;}} /* 843px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 843px){ .contact-icon-a{left:126px !important;}} /* 840px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 840px){ .contact-icon-a{left:126px !important;}} /* 839px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 839px){ .contact-icon-a{left:125px !important;}} /* 837px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 837px){ .contact-icon-a{left:124px !important;}} /* 835px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 835px){ .contact-icon-a{left:123px !important;}} /* 833px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 833px){ .contact-icon-a{left:122px !important;}} /* 831px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 831px){ .contact-icon-a{left:122px !important;}} /* 830px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 830px){ .contact-icon-a{left:122px !important;}} /* 829px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 829px){ .contact-icon-a{left:121px !important;}} /* 827px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 827px){ .contact-icon-a{left:120px !important;}} /* 825px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 825px){ .contact-icon-a{left:119px !important;}} /* 823px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 823px){ .contact-icon-a{left:118px !important;}} /* 820px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 820px){ .contact-icon-a{left:118px !important;}} /* 819px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 819px){ .contact-icon-a{left:117px !important;}} /* 817px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 817px){ .contact-icon-a{left:116px !important;}} /* 815px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 815px){ .contact-icon-a{left:115px !important;}} /* 813px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 813px){ .contact-icon-a{left:114px !important;}} /* 810px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 810px){ .contact-icon-a{left:114px !important;}} /* 809px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 809px){ .contact-icon-a{left:113px !important;}} /* 807px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 807px){ .contact-icon-a{left:112px !important;}} /* 805px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 805px){ .contact-icon-a{left:111px !important;}} /* 803px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 803px){ .contact-icon-a{left:110px !important;}} /* 800px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 800px){ .contact-icon-a{top:268px !important; left:110px !important; transform:scale(0.7);}} /* 799px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 799px){ .contact-icon-a{left:109px !important;}} /* 797px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 797px){ .contact-icon-a{left:108px !important;}} /* 795px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 795px){ .contact-icon-a{left:107px !important;}} /* 794px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 794px){ .contact-icon-a{left:107px !important;}} /* 793px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 793px){ .contact-icon-a{left:106px !important;}} /* 791px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 791px){ .contact-icon-a{left:106px !important;}} /* 790px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 790px){ .contact-icon-a{left:106px !important;}} /* 789px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 789px){ .contact-icon-a{left:105px !important;}} /* 787px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 787px){ .contact-icon-a{left:104px !important;}} /* 785px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 785px){ .contact-icon-a{left:103px !important;}} /* 783px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 783px){ .contact-icon-a{left:102px !important;}} /* 782px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 782px){ .contact-icon-a{left:103px !important;}} /* 780px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 780px){ .contact-icon-a{left:102px !important;}} /* 779px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 779px){ .contact-icon-a{left:101px !important;}} /* 777px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 777px){ .contact-icon-a{left:100px !important;}} /* 775px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 775px){ .contact-icon-a{left:99px !important;}} /* 773px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 773px){ .contact-icon-a{left:98px !important;}} /* 770px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 770px){ .contact-icon-a{left:98px !important;}} /* 769px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 769px){ .contact-icon-a{left:97px !important;}} /* 767px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 767px){ .contact-icon-a{top:206px !important; left:659px !important;}} /* 765px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 765px){ .contact-icon-a{top:206px !important; left:657px !important;}} /* 763px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 763px){ .contact-icon-a{top:206px !important; left:655px !important;}} /* 760px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 760px){ .contact-icon-a{top:206px !important; left:653px !important;}} /* 759px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 759px){ .contact-icon-a{left:652px !important;}} /* 757px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 757px){ .contact-icon-a{left:650px !important;}} /* 756px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 756px){ .contact-icon-a{left:649px !important;}} /* 755px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 755px){ .contact-icon-a{left:648px !important;}} /* 753px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 753px){ .contact-icon-a{left:645px !important;}} /* 750px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 750px){ .contact-icon-a{left:638px !important;}} /* 749px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 749px){ .contact-icon-a{left:637px !important;}} /* 747px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 747px){ .contact-icon-a{left:635px !important;}} /* 745px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 745px){ .contact-icon-a{left:633px !important;}} /* 743px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 743px){ .contact-icon-a{left:631px !important;}} /* 741px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 741px){ .contact-icon-a{left:630px !important;}} /* 740px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 740px){ .contact-icon-a{left:629px !important;}} /* 739px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 739px){ .contact-icon-a{left:628px !important;}} /* 737px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 737px){ .contact-icon-a{left:626px !important;}} /* 735px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 735px){ .contact-icon-a{left:624px !important;}} /* 733px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 733px){ .contact-icon-a{left:622px !important;}} /* 731px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 731px){ .contact-icon-a{left:621px !important;}} /* 730px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 730px){ .contact-icon-a{left:620px !important;}} /* 729px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 729px){ .contact-icon-a{left:619px !important;}} /* 727px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 727px){ .contact-icon-a{left:618px !important;}} /* 725px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 725px){ .contact-icon-a{left:615px !important;}} /* 723px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 723px){ .contact-icon-a{left:613px !important;}} /* 721px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 721px){ .contact-icon-a{left:612px !important;}} /* 720px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 720px){ .contact-icon-a{left:611px !important;}} /* 719px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 719px){ .contact-icon-a{left:610px !important;}} /* 717px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 717px){ .contact-icon-a{left:608px !important;}} /* 715px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 715px){ .contact-icon-a{left:606px !important;}} /* 713px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 713px){ .contact-icon-a{left:604px !important;}} /* 711px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 711px){ .contact-icon-a{left:603px !important;}} /* 710px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 710px){ .contact-icon-a{top:206px !important; left:602px !important;}} /* 709px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 709px){ .contact-icon-a{top:206px !important; left:601px !important;}} /* 707px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 707px){ .contact-icon-a{left:599px !important;}} /* 705px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 705px){ .contact-icon-a{left:597px !important;}} /* 703px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 703px){ .contact-icon-a{left:595px !important;}} /* 701px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 701px){ .contact-icon-a{left:594px !important;}} /* 700px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 700px){ .contact-icon-a{left:593px !important;}} /* 699px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 699px){ .contact-icon-a{left:592px !important;}} /* 697px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 697px){ .contact-icon-a{left:590px !important;}} /* 695px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 695px){ .contact-icon-a{left:588px !important;}} /* 693px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 693px){ .contact-icon-a{left:586px !important;}} /* 690px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 690px){ .contact-icon-a{left:584px !important;}} /* 689px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 689px){ .contact-icon-a{left:583px !important;}} /* 687px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 687px){ .contact-icon-a{left:581px !important;}} /* 685px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 685px){ .contact-icon-a{left:579px !important;}} /* 683px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 683px){ .contact-icon-a{left:577px !important;}} /* 681px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 681px){ .contact-icon-a{left:576px !important;}} /* 680px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 680px){ .contact-icon-a{left:575px !important;}} /* 679px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 679px){ .contact-icon-a{left:574px !important;}} /* 677px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 677px){ .contact-icon-a{left:572px !important;}} /* 675px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 675px){ .contact-icon-a{left:570px !important;}} /* 673px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 673px){ .contact-icon-a{left:570px !important;}} /* 671px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 671px){ .contact-icon-a{left:568px !important;}} /* 670px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 670px){ .contact-icon-a{left:566px !important;}} /* 669px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 669px){ .contact-icon-a{left:565px !important;}} /* 667px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 667px){ .contact-icon-a{left:566px !important;}} /* 665px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 665px){ .contact-icon-a{left:565px !important;}} /* 663px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 663px){ .contact-icon-a{left:563px !important;}} /* 661px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 661px){ .contact-icon-a{left:562px !important;}} /* 660px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 660px){ .contact-icon-a{left:555px !important;}} /* 659px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 659px){ .contact-icon-a{left:554px !important;}} /* 657px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 657px){ .contact-icon-a{left:553px !important;}} /* 653px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 653px){ .contact-icon-a{left:550px !important;}} /* 651px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 651px){ .contact-icon-a{left:549px !important;}} /* 650px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 650px){ .contact-icon-a{left:548px !important;}} /* 649px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 649px){ .contact-icon-a{left:547px !important;}} /* 647px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 647px){ .contact-icon-a{left:546px !important;}} /* 645px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 645px){ .contact-icon-a{left:545px !important;}} /* 643px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 643px){ .contact-icon-a{left:543px !important;}} /* 641px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 641px){ .contact-icon-a{left:542px !important;}} /* 640px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 640px){ .contact-icon-a{top:158px !important; left:532px !important;}} /* 639px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 639px){ .contact-icon-a{left:531px !important;}} /* 637px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 637px){ .contact-icon-a{left:530px !important;}} /* 635px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 635px){ .contact-icon-a{left:529px !important;}} /* 633px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 633px){ .contact-icon-a{left:527px !important;}} /* 631px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 631px){ .contact-icon-a{left:526px !important;}} /* 630px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 630px){ .contact-icon-a{left:525px !important;}} /* 629px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 629px){ .contact-icon-a{left:524px !important;}} /* 627px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 627px){ .contact-icon-a{left:523px !important;}} /* 625px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 625px){ .contact-icon-a{left:522px !important;}} /* 623px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 623px){ .contact-icon-a{left:520px !important;}} /* 621px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 621px){ .contact-icon-a{left:519px !important;}} /* 620px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 620px){ .contact-icon-a{left:518px !important;}} /* 619px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 619px){ .contact-icon-a{left:517px !important;}} /* 617px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 617px){ .contact-icon-a{left:516px !important;}} /* 615px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 615px){ .contact-icon-a{left:515px !important;}} /* 613px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 613px){ .contact-icon-a{left:513px !important;}} /* 611px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 611px){ .contact-icon-a{left:512px !important;}} /* 610px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 610px){ .contact-icon-a{top:118px !important; left:503px !important;}} /* 609px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 609px){ .contact-icon-a{left:502px !important;}} /* 600px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 600px){ .contact-icon-a{left:496px !important;}} .contact-link{font-size:3.5em !important; text-align:center; color:#2336ab !important; margin-left:-3px;} .contact-title{width:150px; text-align:center; margin-left:-52px; margin-top:-14px; color:#2336ab !important; font-weight:700 !important;} /* 1160px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1160px){ .contact-title{margin-left:-50px;}} /* 独自ハンバーガーメニュー */ @font-face { font-family: 'BIZ UDMincho', serif; font-weight: 400; } @font-face { font-family: 'BIZ UDMincho', serif; font-weight: 400; } .flex-center { display: flex; align-items: center; justify-content: center; } a, a:visited, a:hover, a:active { color: inherit; text-decoration: none; } .outer-menu { position: fixed; top: 10vh; left: 0; z-index: 1001; margin-left:85% !important; } /* 667px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 667px) {.outer-menu { margin-left:70% !important;}} /* 414px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 414px) {.outer-menu { margin-left:58% !important;}} /* 375px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 375px) {.outer-menu { margin-left:58% !important;}} .outer-menu .checkbox-toggle { position: absolute; top: 32px; left: 57px; z-index: 1001; cursor: pointer; width: 106px; height: 100px; opacity: 0; margin-left:0% !important; } /* 2000px以下に適用されるCSS（PC用） */ @media screen and (max-width: 2000px) {.outer-menu .checkbox-toggle{top:-50px !important; left:142px !important;}} /* 1780px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1780px) {.outer-menu .checkbox-toggle{top:-50px !important; left:122px !important;}} /* 1630px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1630px) {.outer-menu .checkbox-toggle{top:-50px !important; left:102px !important;}} /* 1530px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1530px) {.outer-menu .checkbox-toggle{top:-50px !important; left:82px !important;}} /* 1450px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1450px) {.outer-menu .checkbox-toggle{top:-50px !important; left:80px !important;}} /* 1368px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1368px) {.outer-menu .checkbox-toggle{left:82px !important;}} /* 1330px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1330px) {.outer-menu .checkbox-toggle{left:70px !important;}} /* 1300px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1300px) {.outer-menu .checkbox-toggle{left:65px !important;}} /* 1220px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1220px) {.outer-menu .checkbox-toggle{left:53px !important;}} /* 1210px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1210px) {.outer-menu .checkbox-toggle{top:-50px !important; left:48px !important;}} /* 1200px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1210px) {.outer-menu .checkbox-toggle{top:-50px !important; left:48px !important;}} /* 1190px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1190px) {.outer-menu .checkbox-toggle{top:-50px !important; left:48px !important;}} /* 1180px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1180px) {.outer-menu .checkbox-toggle{top:-50px !important; left:48px !important;}} /* 1160px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1160px) {.outer-menu .checkbox-toggle{top:-50px !important; left:48px !important;}} /* 1140px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1140px) {.outer-menu .checkbox-toggle{top:-50px !important; left:38px !important;}} /* 1070px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1070px) {.outer-menu .checkbox-toggle{top:-50px !important; left:38px !important; transform:scale(0.8) !important;}} /* 1024px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 1024px) {.outer-menu .checkbox-toggle{left:-5px;}} /* 1020px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 1020px) {.outer-menu .checkbox-toggle{left:-5px; transform:scale(0.8) !important;}} /* 1000px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 1000px) {.outer-menu .checkbox-toggle{top:180px; left:0px; transform:scale(0.8) !important;}} /* 984px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 984px) {.outer-menu .checkbox-toggle{top:-80px !important; left:50px !important; transform:scale(0.8) !important;}} /* 970px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 970px) {.outer-menu .checkbox-toggle{top:-80px !important; left:50px !important; transform:scale(0.8) !important;}} /* 960px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 960px) {.outer-menu .checkbox-toggle{top:-80px !important; left:40px !important; transform:scale(0.8) !important;}} /* 950px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 950px) {.outer-menu .checkbox-toggle{top:-80px !important; left:40px !important; transform:scale(0.7) !important;}} /* 985px以下に適用されるCSS（スマホ・タブレット用） */ @media screen and (min-width: 985px) {.outer-menu .checkbox-toggle{display:none;}} /* 984px以下に適用されるCSS（スマホ・タブレット用） */ @media screen and (max-width: 984px) {.outer-menu .checkbox-toggle{display:block;}} /* 900px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 900px) {.outer-menu .checkbox-toggle{top:-90px !important; left:25px !important;}} /* 880px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 880px) {.outer-menu .checkbox-toggle{top:-105px !important; left:35px !important; transform:scale(0.6) !important;}} /* 850px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 850px) {.outer-menu .checkbox-toggle{top:-105px !important; left:30px !important; transform:scale(0.6) !important;}} /* 844px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 844px) {.outer-menu .checkbox-toggle{top:-100px !important; left:26px !important; transform:scale(0.6) !important;}} /* 840px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 840px) {.outer-menu .checkbox-toggle{top:-105px !important; left:35px !important; transform:scale(0.6) !important;}} /* 800px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 800px) {.outer-menu .checkbox-toggle{top:-100px !important; left:35px !important; transform:scale(0.6) !important;}} /* 790px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 790px) {.outer-menu .checkbox-toggle{top:-100px !important; left:25px !important; transform:scale(0.6) !important;}} /* 750px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 750px) {.outer-menu .checkbox-toggle{top:-70px !important; left:25px !important; transform:scale(0.6) !important;}} /* 690px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 690px) {.outer-menu .checkbox-toggle{top:-100px !important; left:15px !important; transform:scale(0.55) !important;}} /* 667px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 667px) {.outer-menu .checkbox-toggle{top:-70px !important; left:95px !important; transform:scale(0.55) !important;}} /* 660px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 660px) {.outer-menu .checkbox-toggle{top:-70px !important; left:95px !important; transform:scale(0.55) !important;}} /* 640px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 640px) {.outer-menu .checkbox-toggle{top:-70px !important; left:95px !important; transform:scale(0.55) !important;}} /* 630px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 630px) {.outer-menu .checkbox-toggle{top:-70px !important; left:75px !important; transform:scale(0.55) !important;}} /* 610px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 610px) {.outer-menu .checkbox-toggle{top:-70px !important; left:85px !important; transform:scale(0.55) !important;}} /* 600px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 600px) {.outer-menu .checkbox-toggle{top:-80px !important; left:65px !important; transform:scale(0.55) !important;}} /* 590px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 590px) {.outer-menu .checkbox-toggle{top:-80px !important; left:85px !important; transform:scale(0.55) !important;}} /* 580px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 580px) {.outer-menu .checkbox-toggle{top:-80px !important; left:75px !important; transform:scale(0.55) !important;}} /* 550px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 550px) {.outer-menu .checkbox-toggle{top:-80px !important; left:65px !important; transform:scale(0.45) !important;}} /* 530px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 530px) {.outer-menu .checkbox-toggle{top:-80px !important; left:70px !important; transform:scale(0.45) !important;}} /* 520px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 520px) {.outer-menu .checkbox-toggle{top:-80px !important; left:70px !important; transform:scale(0.45) !important;}} /* 500px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 500px) {.outer-menu .checkbox-toggle{top:-80px !important; left:60px !important; transform:scale(0.45) !important;}} /* 480px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 480px) {.outer-menu .checkbox-toggle{top:-65px !important; left:50px !important; transform:scale(0.45) !important;}} /* 450px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 450px) {.outer-menu .checkbox-toggle{top:-65px !important; left:30px !important; transform:scale(0.45) !important;}} /* 430px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 430px) {.outer-menu .checkbox-toggle{top:-65px !important; left:30px !important; transform:scale(0.45) !important;}} /* 414px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 414px) {.outer-menu .checkbox-toggle {top:-85px !important; left:70px !important;}} /* 375px以下に適用されるCSS（iPhone SE 縦用） */ @media screen and (max-width: 375px) {.outer-menu .checkbox-toggle {top:-65px !important; left:65px !important;}} /* 縦幅400px以下に適用されるCSS（iPhone SE 縦用） */ @media screen and (max-height: 400px) {.outer-menu .checkbox-toggle {top:-50px !important; left:35px !important;}} .outer-menu .checkbox-toggle:checked + .hamburger > div { transform: rotate(135deg); } .outer-menu .checkbox-toggle:checked + .hamburger > div:before, .outer-menu .checkbox-toggle:checked + .hamburger > div:after { top: 0; transform: rotate(90deg); } .outer-menu .checkbox-toggle:checked + .hamburger > div:after { opacity: 0; } .outer-menu .checkbox-toggle:checked ~ .menu { pointer-events: auto; visibility: visible; } .outer-menu .checkbox-toggle:checked ~ .menu > div { transform: scale(1); transition-duration: 0.75s; } .outer-menu .checkbox-toggle:checked ~ .menu > div > div { opacity: 1; transition: opacity 0.4s ease 0.4s; } .outer-menu .checkbox-toggle:hover + .hamburger { box-shadow: inset 0 0 0px rgba(135, 95, 57, 0.0); } .outer-menu .checkbox-toggle:checked:hover + .hamburger > div { transform: rotate(225deg); } .outer-menu .hamburger { position: absolute; top: 0px; left: 9px; z-index: 1000; width: 230px; height: 200px; padding: 0em 2em; background: rgba(235, 144, 162, 0); border-radius: 0 0.12em 0.12em 0; cursor: pointer; transition: box-shadow 0.4s ease; -webkit-backface-visibility: hidden; backface-visibility: hidden; display: flex; align-items: center; justify-content: center; background-position:center !important; background-size:90% !important; background-repeat:no-repeat !important; padding-bottom:1.3em; } /* 2000px以下に適用されるCSS（PC用） */ @media screen and (max-width: 2000px) {.outer-menu .hamburger{top:-90px !important; left:82px !important;}} /* 1780px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1780px) {.outer-menu .hamburger{top:-90px !important; left:62px !important;}} /* 1630px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1630px) {.outer-menu .hamburger{top:-90px !important; left:42px !important;}} /* 1530px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1530px) {.outer-menu .hamburger{top:-90px !important; left:22px !important;}} /* 1450px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1450px) {.outer-menu .hamburger{top:-90px !important; left:22px !important;}} /* 1368px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1368px) {.outer-menu .hamburger{left:22px !important;}} /* 1330px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1330px) {.outer-menu .hamburger{left:10px !important;}} /* 1300px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1300px) {.outer-menu .hamburger{left:5px !important;}} /* 1220px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1220px) {.outer-menu .hamburger{left:-5px !important;}} /* 1210px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1210px) {.outer-menu .hamburger{top:-90px !important; left:-12px !important;}} /* 1200px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1210px) {.outer-menu .hamburger{top:-90px !important; left:-12px !important;}} /* 1190px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1190px) {.outer-menu .hamburger{top:-90px !important; left:-12px !important;}} /* 1180px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1180px) {.outer-menu .hamburger{top:-90px !important; left:-12px !important;}} /* 1160px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1160px) {.outer-menu .hamburger{top:-90px !important; left:-12px !important;}} /* 1140px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1140px) {.outer-menu .hamburger{top:-90px !important; left:-22px !important;}} /* 1070px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1070px) {.outer-menu .hamburger{top:-90px !important; left:-22px !important; transform:scale(0.8) !important;}} /* 1024px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 1024px) {.outer-menu .hamburger{left:-5px;}} /* 1020px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 1020px) {.outer-menu .hamburger{left:-5px; transform:scale(0.8);}} /* 1000px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 1000px) {.outer-menu .hamburger{top:180px; left:0px; transform:scale(0.8);}} /* 984px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 984px) {.outer-menu .hamburger{top:-80px !important; left:10px !important; transform:scale(0.7) !important;}} /* 970px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 970px) {.outer-menu .hamburger{top:-80px !important; left:10px !important; transform:scale(0.7) !important;}} /* 960px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 960px) {.outer-menu .hamburger{top:-80px !important; left:10px !important; transform:scale(0.7) !important;}} /* 950px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 950px) {.outer-menu .hamburger{top:-90px !important; left:2px !important; transform:scale(0.6) !important;}} /* 940px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 940px) {.outer-menu .hamburger{top:-90px !important; left:2px !important; transform:scale(0.6) !important;}} /* 985px以下に適用されるCSS（スマホ・タブレット用） */ @media screen and (min-width: 985px) {.outer-menu .hamburger{display:none;}} /* 984px以下に適用されるCSS（スマホ・タブレット用） */ @media screen and (max-width: 984px) {.outer-menu .hamburger{display:block; }} /* 900px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 900px) {.outer-menu .hamburger{top:-90px !important; left:-5px !important;}} /* 880px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 880px) {.outer-menu .hamburger{top:-105px !important; left:0px !important; transform:scale(0.55) !important;}} /* 850px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 850px) {.outer-menu .hamburger{top:-105px !important; left:-16px !important; transform:scale(0.55) !important;}} /* 844px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 844px) {.outer-menu .hamburger{left:-5px !important; transform:scale(0.55) !important; padding-top:10px !important;}} /* 810px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 810px) {.outer-menu .hamburger{left:-20px !important; transform:scale(0.55) !important;}} /* 800px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 800px) {.outer-menu .hamburger{top:-115px !important; left:-16px !important; transform:scale(0.55) !important;}} /* 790px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 790px) {.outer-menu .hamburger{top:-115px !important; left:-20px !important; transform:scale(0.55) !important;}} /* 790px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 790px) {.outer-menu .hamburger{top:-115px !important; left:-20px !important; transform:scale(0.55) !important;}} /* 767px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 767px) {.outer-menu .hamburger{top:-110px !important; left:-20px !important; transform:scale(0.55) !important;}} /* 750px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 750px) {.outer-menu .hamburger{top:-108px !important; left:-20px !important; transform:scale(0.55) !important;}} /* 690px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 690px) {.outer-menu .hamburger{top:-114px !important; left:-20px !important; transform:scale(0.52) !important;}} /* 670px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 670px) {.outer-menu .hamburger{top:-90px !important; left:-20px !important; transform:scale(0.48) !important;}} /* 667px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 667px) {.outer-menu .hamburger{top:-90px !important; left:70px !important; transform:scale(0.48) !important;}} /* 660px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 660px) {.outer-menu .hamburger{top:-90px !important; left:70px !important; transform:scale(0.48) !important;}} /* 640px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 640px) {.outer-menu .hamburger{top:-90px !important; left:60px !important; transform:scale(0.48) !important;}} /* 630px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 630px) {.outer-menu .hamburger{top:-90px !important; left:60px !important; transform:scale(0.48) !important;}} /* 610px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 610px) {.outer-menu .hamburger{top:-90px !important; left:50px !important; transform:scale(0.48) !important;}} /* 600px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 600px) {.outer-menu .hamburger{top:-100px !important; left:50px !important; transform:scale(0.48) !important;}} /* 590px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 590px) {.outer-menu .hamburger{top:-100px !important; left:50px !important; transform:scale(0.48) !important;}} /* 580px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 580px) {.outer-menu .hamburger{top:-100px !important; left:40px !important; transform:scale(0.48) !important;}} /* 550px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 550px) {.outer-menu .hamburger{top:-100px !important; left:30px !important; transform:scale(0.45) !important;}} /* 530px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 530px) {.outer-menu .hamburger{top:-114px !important; left:30px !important; transform:scale(0.42) !important;}} /* 520px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 520px) {.outer-menu .hamburger{top:-114px !important; left:30px !important; transform:scale(0.42) !important;}} /* 500px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 500px) {.outer-menu .hamburger{top:-114px !important; left:20px !important; transform:scale(0.42) !important;}} /* 480px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 480px) {.outer-menu .hamburger{top:-90px !important; left:20px !important; transform:scale(0.6) !important;}} /* 450px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 450px) {.outer-menu .hamburger{top:-90px !important; left:0px !important; transform:scale(0.6) !important;}} /* 430px以下に適用されるCSS（iPhone SE 横用） */ @media screen and (max-width: 430px) {.outer-menu .hamburger{top:-90px !important; left:0px !important; transform:scale(0.6) !important;}} /* 414px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 414px) {.outer-menu .hamburger{top:-90px !important; left:40px !important;}} /* 390px以下に適用されるCSS（iPhone SE 縦用） */ @media screen and (max-width: 390px) {.outer-menu .hamburger{ width: 180px !important; height: 20px !important; top:-80px !important; left:50px !important;}} /* 375px以下に適用されるCSS（iPhone SE 縦用） */ @media screen and (max-width: 375px) {.outer-menu .hamburger{ width: 180px !important; height: 20px !important; top:-80px !important; left:50px !important;}} /* 縦幅400px以下に適用されるCSS（iPhone SE 縦用） */ @media screen and (max-height: 400px) {.outer-menu .hamburger{ width: 180px !important; height: 20px !important; top:-10px !important; left:10px !important;}} .outer-menu .hamburger > div { position: relative; flex: none; width: 35%; height: 4px; background: rgba(0, 137, 209, 0.93); transition: all 0.6s ease; display: flex; align-items: center; justify-content: center; top:10px; left:-2px; } .outer-menu .hamburger > div:before, .outer-menu .hamburger > div:after { content: ''; position: absolute; z-index: 1000; top: -13px; left: 0; width: 100%; height: 4px; background: inherit; transition: all 0.4s ease; } .outer-menu .hamburger > div:after { top: 13px; } .outer-menu .menu { position: fixed; top: 45vh; left: 0; width: 100%; height: 100%; pointer-events: none; visibility: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; outline: 1px solid transparent; display: flex; align-items: center; justify-content: center; padding-bottom:1.3em; } .outer-menu .menu > div { width: 300vw; height: 300vw; color: #0089d1; background: #cce7f6;; border-radius: 50%; transition: all 0.6s ease; flex: none; transform: scale(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; overflow: hidden !important; display: flex; align-items: center; justify-content: center; font-family:'Noto Sans JP', sans-serif !important ; font-weight:500; line-height:3em; } /* 375px以下に適用されるCSS（iPhone SE 縦用） */ @media screen and (max-width: 375px) {.outer-menu .menu > div {width:400vw; height:200vh;}} .outer-menu .menu > div > div { text-align: center; max-width: 90vw; max-height: 100vh; opacity: 0; transition: opacity 0.4s ease; flex: none; display: flex; align-items: center; justify-content: center; margin-top:-100vh; } /* 480px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 480px) { .outer-menu .menu > div > div {max-width: 100vw; }} .outer-menu .menu > div > div > ul { list-style: none; padding: 0 1em; margin: 0; display: block; max-height: 100vh; width:100vw; } /* 縦幅400px以下に適用されるCSS（スマホ用） */ @media screen and (max-height: 400px) { .outer-menu .menu > div > div > ul {transform:scale(0.5); margin-top:-150px;}} .outer-menu .menu > div > div > ul > li { padding: 0; margin: 2em !important; font-size: 24px; display: block; } .outer-menu .menu > div > div > ul > li > a { position: relative; display: inline; cursor: pointer; transition: color 0.4s ease; color:#0089d1 !important; } .outer-menu .menu > div > div > ul > li > a:hover { color: #ff8e00 !important; } .outer-menu .menu > div > div > ul > li > a:hover:after { width: 100%; } .outer-menu .menu > div > div > ul > li > a:after { content: ''; position: absolute; z-index: 1000; bottom: -0.15em; left: 0; width: 0; height: 2px; } .outer-menu .menu > div > div > ul > li{font-size:24px; margin:1.0em;} /* 414px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 414px) {.outer-menu .menu > div > div > ul > li{font-size:1.3em;}} /*ハンバーガーメニューの「メニュー」文字 */ .hamburger-title{font-weight:700; margin-top:0px; font-size:0.9em; position:absolute; width:100px; top:110px; margin-left:58px; text-align:center; z-index:1001; color:#231815 !important;} /* 1450px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1450px) { .hamburger-title{margin-left:26px ;}} /* 1368px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1368px) { .hamburger-title{margin-left:27px ; margin-top:0px}} /* 1210px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1210px) { .hamburger-title{margin-left:16px ; margin-top:-50px}} /* 1200px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1200px) { .hamburger-title{margin-left:16px ; margin-top:-50px}} /* 1160px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1160px) { .hamburger-title{margin-left:14px ;}} /* 1020px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1020px) { .hamburger-title{margin-left:0px; margin-top:-54px;}} /* 1010px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1010px) { .hamburger-title{margin-left:0px ; margin-top:-154px;}} /* 1000px以下に適用されるCSS（PC用） */ @media screen and (max-width: 1000px) { .hamburger-title{margin-left:3px ; margin-top:-154px;}} /* 900px以下に適用されるCSS（PC用） */ @media screen and (max-width: 900px) { .hamburger-title{margin-left:-3px ; margin-top:-194px;}} /* 850px以下に適用されるCSS（PC用） */ @media screen and (max-width: 850px) { .hamburger-title{margin-left:-10px ; top:394px;}} /* 750px以下に適用されるCSS（PC用） */ @media screen and (max-width: 750px) { .hamburger-title{margin-left:-20px ;}} /* 667px以下に適用されるCSS（PC用） */ @media screen and (max-width: 667px) { .hamburger-title{margin-left:114px ; font-size:0.7em;}} /* 660px以下に適用されるCSS（PC用） */ @media screen and (max-width: 660px) { .hamburger-title{margin-left:110px;}} /* 640px以下に適用されるCSS（PC用） */ @media screen and (max-width: 640px) { .hamburger-title{margin-left:100px; margin-top:-245px;}} /* 610px以下に適用されるCSS（PC用） */ @media screen and (max-width: 610px) { .hamburger-title{margin-left:92px; margin-top:-285px;}} .hd-right{display: -webkit-flex !important; display: flex !important; -webkit-align-items: flex-start !important; align-items: flex-start !important; -webkit-flex-direction: column !important; flex-direction: column !important; align-content:center !important;} /*---------------------------------------《フッターの設定》--------------------------------------------------- */ .footer-copy-area{bottom:0 !important;} .footer-wrap{padding:2% 5% ; background-size:cover; background-repeat:no-repeat; background-color:#2236a0 !important; position:relative !important; z-index:4 ; } /* 950px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 950px) { .footer-wrap{font-size:0.8em !important;}} /* 767px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 767px) { .footer-wrap{padding-bottom:2% ; font-size:0.8em !important;}} .ft-contact{width:40% ;} /* 1025px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1025px) { .ft-contact{width:50% ;}} .ft-illust{position:absolute !important; margin-top:44px; margin-left:-20px;} /* 2000px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 2000px) { .ft-illust{margin-top:44px; margin-left:-20px;}} /* 1900px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1900px) { .ft-illust{margin-top:46px; margin-left:-20px;}} /* 1800px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1800px) { .ft-illust{margin-top:50px; margin-left:-20px;}} /* 1700px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1700px) { .ft-illust{margin-top:50px; margin-left:-15px;}} /* 1230px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1230px) { .ft-illust{margin-top:40px; margin-left:-15px;}} /* 1190px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1190px) { .ft-illust{margin-top:38px; margin-left:-16px;}} /* 1100px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1100px) { .ft-illust{margin-top:32px;}} /* 991px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 991px) { .ft-illust{margin-top:14px;}} /* 930px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 930px) { .ft-illust{margin-top:18px;}} /* 920px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 920px) { .ft-illust{margin-top:22px;}} /* 900px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 900px) { .ft-illust{margin-top:25px; margin-left:-10px;}} /* 890px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 890px) { .ft-illust{margin-top:27px;}} /* 880px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 880px) { .ft-illust{margin-top:29px;}} /* 870px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 870px) { .ft-illust{margin-top:31px;}} /* 860px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 860px) { .ft-illust{margin-top:25px;}} /* 850px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 850px) { .ft-illust{margin-top:20px;}} /* 840px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 840px) { .ft-illust{margin-top:32.5px; margin-left:-12px;}} /* 830px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 830px) { .ft-illust{margin-top:35.5px;}} /* 820px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 820px) { .ft-illust{margin-top:25px; margin-left:-8px;}} /* 810px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 810px) { .ft-illust{margin-top:14px; margin-left:-15px;}} /* 800px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 800px) { .ft-illust{margin-top:16px; margin-left:-13px;}} /* 790px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 790px) { .ft-illust{margin-top:19px;}} /* 780px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 780px) { .ft-illust{margin-top:21px;}} /* 767px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 767px) { .ft-illust{margin-top:141px; margin-left:-20px;}} /* 750px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 750px) { .ft-illust{margin-top:145px;}} /* 730px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 730px) { .ft-illust{margin-top:145px;}} /* 690px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 690px) { .ft-illust{margin-top:147px;}} /* 680px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 680px) { .ft-illust{margin-top:144px;}} /* 590px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 590px) { .ft-illust{margin-top:147px;}} /* 580px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 580px) { .ft-illust{margin-top:145px;}} .ft-illust img{width:60%;} /* 2000px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 2000px) { .ft-illust img{width:60%;}} /* 1900px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1900px) { .ft-illust img{width:56%;}} /* 1700px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1700px) { .ft-illust img{width:55%;}} /* 1190px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1190px) { .ft-illust img{width:55%;}} /* 1100px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1100px) { .ft-illust img{width:56%;}} /* 991px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 991px) { .ft-illust img{width:46%;}} /* 860px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 860px) { .ft-illust img{width:48%;}} /* 850px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 850px) { .ft-illust img{width:50%;}} /* 810px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 810px) { .ft-illust img{width:54%;}} /* 767px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 767px) { .ft-illust img{width:74%;}} /* 730px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 730px) { .ft-illust img{width:75%;}} /* 720px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 720px) { .ft-illust img{width:76%;}} /* 710px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 710px) { .ft-illust img{width:78%;}} /* 680px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 680px) { .ft-illust img{width:80%;}} /* 590px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 590px) { .ft-illust img{width:90%;}} /* 580px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 580px) { .ft-illust img{width:92%;}} .ft-sitemap-title-area{border-bottom:4px solid #e86100;} .ft-sitemap-title{width:100%; color:#fff ; font-weight:600 ; font-size:1.6em ; } .ft-sitemap-title-b{color:#fff ; font-weight:600 ; font-size:1em ;} .ft-sitemap{width:100%;} .ft-sitemap-area{width:100%; position:relative; z-index:5; margin-right:10% !important; margin-bottom:30px;} /* 1399px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 1399px){ .ft-sitemap-area{width:100% !important; margin-right:7% !important; font-size:0.8em;}} /* 991px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 991px){ .ft-sitemap-area{width:100% !important; font-size:0.75em;}} /* 500px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 500px){ .ft-sitemap-area{width:100% !important; font-size:0.75em;}} .ft-sitemap-a{width:fit-content; color:#fff !important; padding-right:60px;} /* 767px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 767px){ .ft-sitemap-a{width:100% ; padding-right:30px;}} .ft-sitemap-a a{color:#fff !important;} .ft-sitemap-a a:hover{color:#ff8e00 !important;} .ft-sitemap-b{width:fit-content; color:#fff !important; padding-right:30px !important;} .ft-sitemap-b a{color:#fff !important;} .ft-sitemap-b a:hover{color:#ff8e00 !important;} .ft-sitemap-c{width:fit-content; color:#fff !important; padding-right:30px !important;} .ft-sitemap-c a{color:#fff !important;} .ft-sitemap-c a:hover{color:#ff8e00 !important;} .ft-sitemap-d{width:fit-content; color:#fff !important; padding-right:30px !important;} .ft-sitemap-d a{color:#fff !important;} .ft-sitemap-d a:hover{color:#ff8e00 !important;} .ft-sitemap-link{width:100%; transition:0.3s ; line-height:2em;} .ft-sitemap-link a{color:#865F39 !important; font-weight:600 !important; margin-bottom:5px !important;} .ft-sitemap-link a:hover{color:#ff8e00!important; transition:0.3s ;} .ft-sitemap-link-b{width:100%; transition:0.3s ; line-height:2em;} .ft-sitemap-link-b a{color:#865F39 !important; font-weight:600 !important; margin-bottom:5px !important;} .ft-sitemap-link-b a:hover{color:#ff8e00 !important; transition:0.3s ;} .ft-sitemap-right a{color:#fff !important; text-decoration:none;} .ft-middle{width:30%} .ft-add{color:#fff ;} .ft-add p{line-height:1.4em !important;} /* 991px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 991px){.ft-add{width:50%;}} /* 500px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 500px){ .ft-add{width:100%; padding-left:0% ; padding-top:20px ;} .ft-add img{width:60%;}} /* 767px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 767px){.ft-add-moji{font-size:0.8em ;}} /* 767px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 767px){.ft-mail{font-size:0.8em ;}} footer#footer-theme section{border-top:none !important;} div.ccm-page div.area-content-accent{display:none !important;} footer#concrete5-brand{display:none !important;} footer#footer-theme section:last-child{background-color:#11285E !important; font-family:'Noto Sans JP', sans-serif !important;} /* 1368px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1368px) { footer#footer-theme section:last-child{font-size:1em !important; line-height:1.4em !important;}} /* 1180px以下に適用されるCSS（iPad air 横用） */ @media screen and (max-width: 1180px) { footer#footer-theme section:last-child{font-size:1em !important; line-height:1.4em !important;}} /* 1085px以下に適用されるCSS */ @media screen and (max-width: 1085px) { footer#footer-theme section:last-child{font-size:0.8em !important; line-height:1.4em !important;}} /* 480px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 480px) { footer#footer-theme section:last-child{font-size:0.8em !important; line-height:1.4em !important;}} /* 375px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 375px) { footer#footer-theme section:last-child{font-size:0.8em !important; line-height:1.4em !important;}} .footer-navi{margin-top:30px !important;} /* 1368px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 1368px) { footer#footer-theme section:last-child{font-size:1em !important; line-height:1.4em !important;}} /* 1180px以下に適用されるCSS（iPad air 横用） */ @media screen and (max-width: 1180px) { footer#footer-theme section:last-child{font-size:1em !important; line-height:1.4em !important;}} /* 1085px以下に適用されるCSS */ @media screen and (max-width: 1085px) { footer#footer-theme section:last-child{font-size:0.8em !important; line-height:1.4em !important;}} /* 480px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 480px) { footer#footer-theme section:last-child{font-size:0.8em !important; line-height:1.4em !important;}} /* 375px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 375px) { footer#footer-theme section:last-child{font-size:0.8em !important; line-height:1.4em !important;}} .footer-navi a{color:#abcbda !important; font-family: 'Noto Sans JP', sans-serif !important; font-weight:500 !important;} .footer-navi a:hover{color:#fff500 !important;} footer#footer-theme section{padding-bottom:0px !important;} footer#footer-theme section:last-child{padding-bottom:0px !important;} .ft-bottom{color:#0036af !important; padding-top:30px !important; font-size:0.8em !important; font-weight:500 !important; font-family: 'Noto Sans JP', sans-serif !important;} /* 991px以下に適用されるCSS（iPhoneSE 縦用） */ .ft-link-waku{color:#fff ;} .ft-link img{width:70% ;} .ft-link{ padding-bottom:2px !important; margin-bottom:20px !important;} .ft-link a{color:#fff !important;} .ft-link a:hover{color:#865F39 !important;} .ft-link-title{border-bottom:1px solid #865F39; width:100%; color:#865F39 ; font-weight:600 ;} .footer-add{margin-bottom:20px !important; font-family:'Noto Sans JP', sans-serif !important; color:#fff !important;} .ft-waku{ background-size:100% !important; margin-left:0 !important; margin-right:0 !important; width:100% !important;} .copy{background: #2236a0 !important; padding:5px ; padding-bottom:10px ; font-family:'Noto Sans JP', sans-serif !important; font-size:0.8em !important; font-weight:500 !important; color:#fff !important;} /* 590px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 590px) {.copy{font-size:0.8em !important;}} /* 480px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 480px) {.copy{font-size:0.8em !important; padding-top:30px ; padding-bottom:30px ;}} /* 390px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 390px) {.copy{font-size:0.8em !important; padding-top:40px ; padding-bottom:40px;}} /* フッターのロゴ */ .ft-tel img{width:56% !important;} .ft-logo img{width:50% !important;} /* 1700px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1700px) { .ft-tel img{width:56% !important;} .ft-logo img{width:50% !important;}} /* 991px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 991px) { .ft-tel img{width:76% !important;} .ft-logo img{width:50% !important;}} /* 480px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 480px) { .ft-tel img{width:54% !important;} .ft-logo img{width:60% !important;}} /*---------------------------------------《TOPページの設定》--------------------------------------------------- */ .main-head-a{padding-top:34% ; position:relative !important; z-index:2 !important; width:100% !important; margin-bottom:-2px !important;} /* 2000px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 2000px) { .main-head-a{padding-top:24% ;}} /* 1699px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1699px) { .main-head-a{padding-top:28% ;}} /* 1640px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1640px) { .main-head-a{padding-top:40% ;}} /* 1550px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1550px) { .main-head-a{padding-top:42% ;}} /* 1500px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1500px) { .main-head-a{padding-top:44% ;}} /* 1288px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1288px) { .main-head-a{padding-top:43% ;}} /* 1154px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1154px) { .main-head-a{padding-top:42% ;}} /* 1101px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1101px) { .main-head-a{padding-top:41% ;}} /* 987px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 987px) { .main-head-a{padding-top:40% ;}} /* 906px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 906px) { .main-head-a{padding-top:39% ;}} /* 900px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 900px) { .main-head-a{padding-top:37% ;}} /* 817px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 817px) { .main-head-a{padding-top:36% ;}} /* 810px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 810px) { .main-head-a{padding-top:35% ;}} /* 767px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 767px) { .main-head-a{padding-top:90% ;}} /* 626px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 626px) { .main-head-a{padding-top:90% ;}} /* 500px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 500px) { .main-head-a{padding-top:100% ;}} /* 480px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 480px) { .main-head-a{padding-top:100% ;}} /* 縦幅400px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-height: 400px) { .main-head-a{padding-top:22% ;}} .main-head-a img{width:100% !important;} /* TOP画 */ .top-para-a{position:absolute;} .top-para-a-under{ padding-top:135% !important; position:relative !important; z-index:2 !important;} /* 2000px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 2000px) { .top-para-a-under{padding-top:120% !important;}} /* 1199px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1199px) { .top-para-a-under{padding-top:110% !important;}} /* 1135px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1135px) { .top-para-a-under{padding-top:100% !important;}} /* 1060px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1060px) { .top-para-a-under{padding-top:95% !important;}} /* 991px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 991px) { .top-para-a-under{padding-top:125% !important;}} /* 925px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 925px) { .top-para-a-under{padding-top:120% !important;}} /* 900px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 900px) { .top-para-a-under{padding-top:110% !important;}} /* 850px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 850px) { .top-para-a-under{padding-top:100% !important;}} /* 650px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 650px) { .top-para-a-under{padding-top:125% !important;}} .top-para-a-under-b{ position:relative !important; z-index:2 !important;} /* TOPパララックス-2(エントリーの背景) */ .top-para-b{position:absolute; margin-top:70%;} /* 1300px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1300px) { .top-para-b{position:absolute; margin-top:65%;}} /* 1280px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1280px) { .top-para-b{position:absolute; margin-top:67%;}} /* 1260px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1260px) { .top-para-b{position:absolute; margin-top:70%;}} /* 1250px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1250px) { .top-para-b{position:absolute; margin-top:72%;}} /* 1230px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1230px) { .top-para-b{position:absolute; margin-top:76%;}} /* 1125px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1125px) { .top-para-b{position:absolute; margin-top:70%;}} /* 1080px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1125px) { .top-para-b{position:absolute; margin-top:76%;}} .top-para-b-under{ padding-top:15% !important; position:relative !important; z-index:2 !important;} .top-para-b-under-b{ position:relative !important; z-index:2 !important;} .top-para-b-under-c{ position:relative !important; z-index:3 !important;} .top-news-waku{position:relative ;} /* TOPページ-会社概要 */ .top-profile{z-index:3 !important;} /* TOPページ-会社概要イメージ */ .profile-image-a{transform:scale(1.2) ; margin-left:5% ; padding-top:5% ; position:absolute ;} /* 1300px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1300px) { .profile-image-a{transform:scale(1); margin-left:5% ; margin-top:-4% ; padding-top:1% ;}} /* 767px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 767px) { .profile-image-a{position:relative ; transform:scale(1); margin-top:50px ;}} /* TOPページ-会社概要のふくろう君 */ .fukurou-illust-a{position:absolute ; z-index:2 ; margin-left:-25% !important; margin-top:-3% !important;} /* 1300px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1300px) { .fukurou-illust-a{transform:scale(0.8); margin-left:-20% !important;}} /* TOPページ-仕事を知るボタン */ .works-button img{width:25% !important;} /* TOPページ-働く環境を知るボタン */ .enviroment-button img{width:33.3% !important;} /* TOPページ-エントリーボタン */ .entry-button img{width:50% !important;} /* TOPページ-採用情報 */ /* 767px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 767px) { .top-recruit-back{padding-left:0px !important; padding-right:0px !important;}} .recruit-thumb-a{position:absolute; right:0 !important; left:auto !important; height:60.5vh !important; width:auto !important;} .recruit-thumb-b{ height:50% ; margin-right:-15% ;} .top-title-waku{position:absolute;} .top-title-a{text-align:right !important;} .top-recruit-icon-b{position:absolute; z-index:3; top:72.5%; width:9%; right:0; margin-left:auto;} /* 2000px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 2000px) { .top-recruit-icon-b{top:72.5%;}} /* 1950px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1950px) { .top-recruit-icon-b{top:71%;}} /* 1900px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1900px) { .top-recruit-icon-b{top:69.5%;}} /* 1850px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1850px) { .top-recruit-icon-b{top:67.5%;}} /* 1800px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1800px) { .top-recruit-icon-b{top:65.5%;}} /* 1750px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1750px) { .top-recruit-icon-b{top:63.5%;}} /* 1700px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1700px) { .top-recruit-icon-b{top:62%;}} /* 1650px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1650px) { .top-recruit-icon-b{top:60%;}} /* 1600px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1600px) { .top-recruit-icon-b{top:58%;}} /* 1550px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1550px) { .top-recruit-icon-b{top:56%;}} /* 1500px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1500px) { .top-recruit-icon-b{top:54.5%;}} /* 1450px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1450px) { .top-recruit-icon-b{top:53%;}} /* 1400px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1400px) { .top-recruit-icon-b{top:51%;}} /* 1350px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1350px) { .top-recruit-icon-b{top:49%;}} /* 1300px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1300px) { .top-recruit-icon-b{top:47.5%;}} /* 1250px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1250px) { .top-recruit-icon-b{top:45.5%;}} /* 1200px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1200px) { .top-recruit-icon-b{top:43.5%;}} /* 1150px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1150px) { .top-recruit-icon-b{top:41.5%;}} /* 1100px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1100px) { .top-recruit-icon-b{top:40%;}} /* 1050px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1050px) { .top-recruit-icon-b{top:38%;}} /* 1000px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1000px) { .top-recruit-icon-b{top:36.5%;}} /* 950px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 950px) { .top-recruit-icon-b{top:34.5%;}} /* 900px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 900px) { .top-recruit-icon-b{top:32.5%;}} /* 850px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 850px) { .top-recruit-icon-b{top:30.5%;}} /* 800px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 800px) { .top-recruit-icon-b{top:28.5%;}} /* 750px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 750px) { .top-recruit-icon-b{top:27%;}} /* 700px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 700px) { .top-recruit-icon-b{top:25%;}} /* 650px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 650px) { .top-recruit-icon-b{top:23.5%;}} /* 600px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 600px) { .top-recruit-icon-b{top:21.5%;}} /* 550px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 550px) { .top-recruit-icon-b{top:19.5%;}} /* 500px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 500px) { .top-recruit-icon-b{top:18%;}} /* 450px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 450px) { .top-recruit-icon-b{top:16%;}} /* 400px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 400px) { .top-recruit-icon-b{top:14%;}} /* 350px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 350px) { .top-recruit-icon-b{top:12.5%;}} /* 300px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 300px) { .top-recruit-icon-b{top:10.5%;}} /* 280px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 280px) { .top-recruit-icon-b{top:9.5%;}} .top-recruit-icon-c{position:absolute; z-index:3; top:60%; width:9%; right:1%; margin-left:auto; animation: tikatika- 1.4s step-end infinite;} /* @keyframes tikatika { 0% { opacity: 1; } 50% { opacity: 0; } 100% { opacity: 1; } } */ /* 1950px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1950px) { .top-recruit-icon-c{top:60%;}} /* 1900px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1900px) { .top-recruit-icon-c{top:58%;}} /* 1850px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1850px) { .top-recruit-icon-c{top:56%;}} /* 1800px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1800px) { .top-recruit-icon-c{top:55%;}} /* 1750px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1750px) { .top-recruit-icon-c{top:53%;}} /* 1700px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1700px) { .top-recruit-icon-c{top:52%;}} /* 1650px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1650px) { .top-recruit-icon-c{top:50%;}} /* 1600px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1600px) { .top-recruit-icon-c{top:48%;}} /* 1550px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1550px) { .top-recruit-icon-c{top:46%;}} /* 1500px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1500px) { .top-recruit-icon-c{top:46%;}} /* 1450px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1450px) { .top-recruit-icon-c{top:44%;}} /* 1400px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1400px) { .top-recruit-icon-c{top:42%;}} /* 1350px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1350px) { .top-recruit-icon-c{top:42%;}} /* 1300px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1300px) { .top-recruit-icon-c{top:40%;}} /* 1250px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1250px) { .top-recruit-icon-c{top:38%;}} /* 1200px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1200px) { .top-recruit-icon-c{top:36%;}} /* 1150px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1150px) { .top-recruit-icon-c{top:35%;}} /* 1100px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1100px) { .top-recruit-icon-c{top:33%;}} /* 1050px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1050px) { .top-recruit-icon-c{top:32%;}} /* 1000px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1000px) { .top-recruit-icon-c{top:31%;}} /* 950px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 950px) { .top-recruit-icon-c{top:29%;}} /* 900px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 900px) { .top-recruit-icon-c{top:27%;}} /* 850px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 850px) { .top-recruit-icon-c{top:25%;}} /* 800px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 800px) { .top-recruit-icon-c{top:24%;}} /* 750px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 750px) { .top-recruit-icon-c{top:22.5%;}} /* 700px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 700px) { .top-recruit-icon-c{top:21%;}} /* 650px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 650px) { .top-recruit-icon-c{top:19.5%;}} /* 600px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 600px) { .top-recruit-icon-c{top:18%;}} /* 550px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 550px) { .top-recruit-icon-c{top:16.5%;}} /* 500px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 500px) { .top-recruit-icon-c{top:15%;}} /* 450px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 450px) { .top-recruit-icon-c{top:13.5%;}} /* 400px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 400px) { .top-recruit-icon-c{top:11.7%;}} /* 350px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 350px) { .top-recruit-icon-c{top:10.6%;}} /* 300px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 300px) { .top-recruit-icon-c{top:8.8%;}} /* 280px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 280px) { .top-recruit-icon-c{top:7.8%;}} /* 767px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 767px) { .top-logo{width:40% !important; margin-left:-20px;}} /* 480px以下に適用されるCSS（iPhoneSE 縦用） */ @media screen and (max-width: 480px) { .top-logo{width:60% !important; margin-left:-20px;}} .top-logo-a{} /* 1199px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1199px) { .top-logo-a{padding-left:30% !important;}} /* 1199px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1199px) { .top-logo-a{padding-left:30% !important;}} /*スクロールダウン-a-バーと矢印の組み合わせ*/ #scdown-wrapper-a { display: table; width: 100%; height: 100%; } #scdown-wrapper-inner { display: table-cell; vertical-align: middle; width: 100%; height: 100%; } #scd-scroll-down-a { display: block; position: relative; padding-top: 83px; text-align: center; } .scd-arrow-down-a { display: block; margin: 0 auto; width: 10px; height: 38px; } .scd-arrow-down-a:after { content: ''; display: block; margin: 0; padding: 0; width: 8px; height: 8px; border-top: 2px solid #e86100; border-right: 2px solid #e86100; behavior: url(-ms-transform.htc); -moz-transform: rotate(135deg); -webkit-transform: rotate(135deg); -o-transform: rotate(135deg); -ms-transform: rotate(135deg); transform: rotate(135deg); margin-left:0.5px ; } #scd-scroll-title-a { display: block; text-transform: uppercase; color: #d73100; font-family: Helvetica Neue, Helvetica, Arial; font-size: 14px; font-weight: bold; letter-spacing: 0.1em; } #scd-scroll-title-a::before { -webkit-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite; /* Safari 4+ */ -moz-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite; /* Fx 5+ */ -o-animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite; /* Opera 12+ */ animation: elasticus 1.2s cubic-bezier(1, 0, 0, 1) infinite; /* IE 10+, Fx 29+ */ position: absolute; top: 0px; left: 50%; margin-left: -1px; width: 2px; height: 90px; background: #e86100; content: ' '; } @-webkit-keyframes elasticus { 0% { -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); -moz-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); } 50% { -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 50.1% { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); -moz-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); } } @-moz-keyframes elasticus { 0% { -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); -moz-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); } 50% { -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 50.1% { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); -moz-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); } } @-o-keyframes elasticus { 0% { -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); -moz-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); } 50% { -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 50.1% { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); -moz-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); } } @keyframes elasticus { 0% { -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); -moz-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); } 50% { -webkit-transform-origin: 0% 0%; -ms-transform-origin: 0% 0%; -moz-transform-origin: 0% 0%; -o-transform-origin: 0% 0%; transform-origin: 0% 0%; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 50.1% { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(1, 1); -ms-transform: scale(1, 1); -moz-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); } 100% { -webkit-transform-origin: 0% 100%; -ms-transform-origin: 0% 100%; -moz-transform-origin: 0% 100%; -o-transform-origin: 0% 100%; transform-origin: 0% 100%; -webkit-transform: scale(1, 0); -ms-transform: scale(1, 0); -moz-transform: scale(1, 0); -o-transform: scale(1, 0); transform: scale(1, 0); } } /*ローディング画面のテキスト*/ /*ローディングアニメーション-キューブ*/ /*ローディングアニメーション*/ /*背景*/ #loading{ width:100%; height:100%; background-color:#eae0bb; background-size:auto !important; position:fixed; z-index:1000 !important; left:0 !important; top:0 !important; text-align:center; } .loading-cube-container { position: relative; height: 100px; width: 86px; transform: scale(0.5); text-align:center; left:auto; right:auto; align-items:center;} .cube { position: absolute; width: 86px; height: 100px; top:50%; left:50%; transform:translate(-50%,-50%); } .loading-cube-right { background: #fff500; transform: rotate(-30deg) skewX(-30deg) translate(49px, 65px) scaleY(0.86); } .loading-cube-left { background: #eae0bb; transform: rotate(90deg) skewX(-30deg) scaleY(0.86) translate(25px, -50px); } .loading-cube-top { background: #ff8e00; transform: rotate(210deg) skew(-30deg) translate(-75px, -22px) scaleY(0.86); z-index: 2; } .loading-cube-face { height: 50px; width: 50px; position: absolute; transform-origin: 0 0; } .loading-cube-h1.loading-cube-w1.loading-cube-l1 { z-index: -1; animation-name: h1w1l1; animation-timing-function: ease; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes h1w1l1 { 0% { transform: translate(0%, -100%); } 14% { transform: translate(-50%, -125%); } 28% { transform: translate(0%, -150%); } 43% { transform: translate(0%, -200%); } 57% { transform: translate(50%, -175%); } 71% { transform: translate(0%, -150%); } 85% { transform: translate(0%, -100%); } 100% { transform: translate(0%, -100%); } } .loading-cube-h1.loading-cube-w1.loading-cube-l2 { z-index: -1; animation-name: h1w1l2; animation-timing-function: ease; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes h1w1l2 { 0% { transform: translate(50%, -75%); } 14% { transform: translate(50%, -75%); } 28% { transform: translate(100%, -100%); } 43% { transform: translate(100%, -150%); } 57% { transform: translate(100%, -150%); } 71% { transform: translate(50%, -125%); } 85% { transform: translate(50%, -75%); } 100% { transform: translate(50%, -75%); } } .loading-cube-h1.loading-cube-w1.loading-cube-l3 { z-index: -1; animation-name: h1w1l3; animation-timing-function: ease; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes h1w1l3 { 0% { transform: translate(100%, -50%); } 14% { transform: translate(150%, -25%); } 28% { transform: translate(200%, -50%); } 43% { transform: translate(200%, -100%); } 57% { transform: translate(150%, -125%); } 71% { transform: translate(100%, -100%); } 85% { transform: translate(100%, -50%); } 100% { transform: translate(100%, -50%); } } .loading-cube-h1.loading-cube-w2.loading-cube-l1 { z-index: -1; animation-name: h1w2l1; animation-timing-function: ease; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes h1w2l1 { 0% { transform: translate(-50%, -75%); } 14% { transform: translate(-100%, -100%); } 28% { transform: translate(-100%, -100%); } 43% { transform: translate(-100%, -150%); } 57% { transform: translate(-50%, -125%); } 71% { transform: translate(-50%, -125%); } 85% { transform: translate(-50%, -75%); } 100% { transform: translate(-50%, -75%); } } .loading-cube-h1.loading-cube-w2.loading-cube-l2 { z-index: -1; animation-name: h1w2l2; animation-timing-function: ease; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes h1w2l2 { 0% { transform: translate(0%, -50%); } 14% { transform: translate(0%, -50%); } 28% { transform: translate(0%, -50%); } 43% { transform: translate(0%, -100%); } 57% { transform: translate(0%, -100%); } 71% { transform: translate(0%, -100%); } 85% { transform: translate(0%, -50%); } 100% { transform: translate(0%, -50%); } } .loading-cube-h1.loading-cube-w2.loading-cube-l3 { z-index: -1; animation-name: h1w2l3; animation-timing-function: ease; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes h1w2l3 { 0% { transform: translate(50%, -25%); } 14% { transform: translate(100%, 0%); } 28% { transform: translate(100%, 0%); } 43% { transform: translate(100%, -50%); } 57% { transform: translate(50%, -75%); } 71% { transform: translate(50%, -75%); } 85% { transform: translate(50%, -25%); } 100% { transform: translate(50%, -25%); } } .loading-cube-h1.loading-cube-w3.loading-cube-l1 { z-index: -1; animation-name: h1w3l1; animation-timing-function: ease; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes h1w3l1 { 0% { transform: translate(-100%, -50%); } 14% { transform: translate(-150%, -75%); } 28% { transform: translate(-200%, -50%); } 43% { transform: translate(-200%, -100%); } 57% { transform: translate(-150%, -75%); } 71% { transform: translate(-100%, -100%); } 85% { transform: translate(-100%, -50%); } 100% { transform: translate(-100%, -50%); } } .loading-cube-h1.loading-cube-w3.loading-cube-l2 { z-index: -1; animation-name: h1w3l2; animation-timing-function: ease; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes h1w3l2 { 0% { transform: translate(-50%, -25%); } 14% { transform: translate(-50%, -25%); } 28% { transform: translate(-100%, 0%); } 43% { transform: translate(-100%, -50%); } 57% { transform: translate(-100%, -50%); } 71% { transform: translate(-50%, -75%); } 85% { transform: translate(-50%, -25%); } 100% { transform: translate(-50%, -25%); } } .loading-cube-h1.loading-cube-w3.loading-cube-l3 { z-index: -1; animation-name: h1w3l3; animation-timing-function: ease; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes h1w3l3 { 0% { transform: translate(0%, 0%); } 14% { transform: translate(50%, 25%); } 28% { transform: translate(0%, 50%); } 43% { transform: translate(0%, 0%); } 57% { transform: translate(-50%, -25%); } 71% { transform: translate(0%, -50%); } 85% { transform: translate(0%, 0%); } 100% { transform: translate(0%, 0%); } } .loading-cube-h2.loading-cube-w1.loading-cube-l1 { z-index: -2; animation-name: h2w1l1; animation-timing-function: ease; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes h2w1l1 { 0% { transform: translate(0%, -50%); } 14% { transform: translate(-50%, -75%); } 28% { transform: translate(0%, -100%); } 43% { transform: translate(0%, -100%); } 57% { transform: translate(50%, -75%); } 71% { transform: translate(0%, -50%); } 85% { transform: translate(0%, -50%); } 100% { transform: translate(0%, -50%); } } .loading-cube-h2.loading-cube-w1.loading-cube-l2 { z-index: -2; animation-name: h2w1l2; animation-timing-function: ease; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes h2w1l2 { 0% { transform: translate(50%, -25%); } 14% { transform: translate(50%, -25%); } 28% { transform: translate(100%, -50%); } 43% { transform: translate(100%, -50%); } 57% { transform: translate(100%, -50%); } 71% { transform: translate(50%, -25%); } 85% { transform: translate(50%, -25%); } 100% { transform: translate(50%, -25%); } } .loading-cube-h2.loading-cube-w1.loading-cube-l3 { z-index: -2; animation-name: h2w1l3; animation-timing-function: ease; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes h2w1l3 { 0% { transform: translate(100%, 0%); } 14% { transform: translate(150%, 25%); } 28% { transform: translate(200%, 0%); } 43% { transform: translate(200%, 0%); } 57% { transform: translate(150%, -25%); } 71% { transform: translate(100%, 0%); } 85% { transform: translate(100%, 0%); } 100% { transform: translate(100%, 0%); } } .loading-cube-h2.loading-cube-w2.loading-cube-l1 { z-index: -2; animation-name: h2w2l1; animation-timing-function: ease; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes h2w2l1 { 0% { transform: translate(-50%, -25%); } 14% { transform: translate(-100%, -50%); } 28% { transform: translate(-100%, -50%); } 43% { transform: translate(-100%, -50%); } 57% { transform: translate(-50%, -25%); } 71% { transform: translate(-50%, -25%); } 85% { transform: translate(-50%, -25%); } 100% { transform: translate(-50%, -25%); } } .loading-cube-h2.loading-cube-w2.loading-cube-l2 { z-index: -2; animation-name: h2w2l2; animation-timing-function: ease; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes h2w2l2 { 0% { transform: translate(0%, 0%); } 14% { transform: translate(0%, 0%); } 28% { transform: translate(0%, 0%); } 43% { transform: translate(0%, 0%); } 57% { transform: translate(0%, 0%); } 71% { transform: translate(0%, 0%); } 85% { transform: translate(0%, 0%); } 100% { transform: translate(0%, 0%); } } .loading-cube-h2.loading-cube-w2.loading-cube-l3 { z-index: -2; animation-name: h2w2l3; animation-timing-function: ease; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes h2w2l3 { 0% { transform: translate(50%, 25%); } 14% { transform: translate(100%, 50%); } 28% { transform: translate(100%, 50%); } 43% { transform: translate(100%, 50%); } 57% { transform: translate(50%, 25%); } 71% { transform: translate(50%, 25%); } 85% { transform: translate(50%, 25%); } 100% { transform: translate(50%, 25%); } } .loading-cube-h2.loading-cube-w3.loading-cube-l1 { z-index: -2; animation-name: h2w3l1; animation-timing-function: ease; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes h2w3l1 { 0% { transform: translate(-100%, 0%); } 14% { transform: translate(-150%, -25%); } 28% { transform: translate(-200%, 0%); } 43% { transform: translate(-200%, 0%); } 57% { transform: translate(-150%, 25%); } 71% { transform: translate(-100%, 0%); } 85% { transform: translate(-100%, 0%); } 100% { transform: translate(-100%, 0%); } } .loading-cube-h2.loading-cube-w3.loading-cube-l2 { z-index: -2; animation-name: h2w3l2; animation-timing-function: ease; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes h2w3l2 { 0% { transform: translate(-50%, 25%); } 14% { transform: translate(-50%, 25%); } 28% { transform: translate(-100%, 50%); } 43% { transform: translate(-100%, 50%); } 57% { transform: translate(-100%, 50%); } 71% { transform: translate(-50%, 25%); } 85% { transform: translate(-50%, 25%); } 100% { transform: translate(-50%, 25%); } } .loading-cube-h2.loading-cube-w3.loading-cube-l3 { z-index: -2; animation-name: h2w3l3; animation-timing-function: ease; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes h2w3l3 { 0% { transform: translate(0%, 50%); } 14% { transform: translate(50%, 75%); } 28% { transform: translate(0%, 100%); } 43% { transform: translate(0%, 100%); } 57% { transform: translate(-50%, 75%); } 71% { transform: translate(0%, 50%); } 85% { transform: translate(0%, 50%); } 100% { transform: translate(0%, 50%); } } .loading-cube-h3.loading-cube-w1.loading-cube-l1 { z-index: -3; animation-name: h3w1l1; animation-timing-function: ease; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes h3w1l1 { 0% { transform: translate(0%, 0%); } 14% { transform: translate(-50%, -25%); } 28% { transform: translate(0%, -50%); } 43% { transform: translate(0%, 0%); } 57% { transform: translate(50%, 25%); } 71% { transform: translate(0%, 50%); } 85% { transform: translate(0%, 0%); } 100% { transform: translate(0%, 0%); } } .loading-cube-h3.loading-cube-w1.loading-cube-l2 { z-index: -3; animation-name: h3w1l2; animation-timing-function: ease; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes h3w1l2 { 0% { transform: translate(50%, 25%); } 14% { transform: translate(50%, 25%); } 28% { transform: translate(100%, 0%); } 43% { transform: translate(100%, 50%); } 57% { transform: translate(100%, 50%); } 71% { transform: translate(50%, 75%); } 85% { transform: translate(50%, 25%); } 100% { transform: translate(50%, 25%); } } .loading-cube-h3.loading-cube-w1.loading-cube-l3 { z-index: -3; animation-name: h3w1l3; animation-timing-function: ease; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes h3w1l3 { 0% { transform: translate(100%, 50%); } 14% { transform: translate(150%, 75%); } 28% { transform: translate(200%, 50%); } 43% { transform: translate(200%, 100%); } 57% { transform: translate(150%, 75%); } 71% { transform: translate(100%, 100%); } 85% { transform: translate(100%, 50%); } 100% { transform: translate(100%, 50%); } } .loading-cube-h3.loading-cube-w2.loading-cube-l1 { z-index: -3; animation-name: h3w2l1; animation-timing-function: ease; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes h3w2l1 { 0% { transform: translate(-50%, 25%); } 14% { transform: translate(-100%, 0%); } 28% { transform: translate(-100%, 0%); } 43% { transform: translate(-100%, 50%); } 57% { transform: translate(-50%, 75%); } 71% { transform: translate(-50%, 75%); } 85% { transform: translate(-50%, 25%); } 100% { transform: translate(-50%, 25%); } } .loading-cube-h3.loading-cube-w2.loading-cube-l2 { z-index: -3; animation-name: h3w2l2; animation-timing-function: ease; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes h3w2l2 { 0% { transform: translate(0%, 50%); } 14% { transform: translate(0%, 50%); } 28% { transform: translate(0%, 50%); } 43% { transform: translate(0%, 100%); } 57% { transform: translate(0%, 100%); } 71% { transform: translate(0%, 100%); } 85% { transform: translate(0%, 50%); } 100% { transform: translate(0%, 50%); } } .loading-cube-h3.loading-cube-w2.loading-cube-l3 { z-index: -3; animation-name: h3w2l3; animation-timing-function: ease; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes h3w2l3 { 0% { transform: translate(50%, 75%); } 14% { transform: translate(100%, 100%); } 28% { transform: translate(100%, 100%); } 43% { transform: translate(100%, 150%); } 57% { transform: translate(50%, 125%); } 71% { transform: translate(50%, 125%); } 85% { transform: translate(50%, 75%); } 100% { transform: translate(50%, 75%); } } .loading-cube-h3.loading-cube-w3.loading-cube-l1 { z-index: -3; animation-name: h3w3l1; animation-timing-function: ease; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes h3w3l1 { 0% { transform: translate(-100%, 50%); } 14% { transform: translate(-150%, 25%); } 28% { transform: translate(-200%, 50%); } 43% { transform: translate(-200%, 100%); } 57% { transform: translate(-150%, 125%); } 71% { transform: translate(-100%, 100%); } 85% { transform: translate(-100%, 50%); } 100% { transform: translate(-100%, 50%); } } .loading-cube-h3.loading-cube-w3.loading-cube-l2 { z-index: -3; animation-name: h3w3l2; animation-timing-function: ease; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes h3w3l2 { 0% { transform: translate(-50%, 75%); } 14% { transform: translate(-50%, 75%); } 28% { transform: translate(-100%, 100%); } 43% { transform: translate(-100%, 150%); } 57% { transform: translate(-100%, 150%); } 71% { transform: translate(-50%, 125%); } 85% { transform: translate(-50%, 75%); } 100% { transform: translate(-50%, 75%); } } .loading-cube-h3.loading-cube-w3.loading-cube-l3 { z-index: -3; animation-name: h3w3l3; animation-timing-function: ease; animation-duration: 3s; animation-iteration-count: infinite; } @keyframes h3w3l3 { 0% { transform: translate(0%, 100%); } 14% { transform: translate(50%, 125%); } 28% { transform: translate(0%, 150%); } 43% { transform: translate(0%, 200%); } 57% { transform: translate(-50%, 175%); } 71% { transform: translate(0%, 150%); } 85% { transform: translate(0%, 100%); } 100% { transform: translate(0%, 100%); } } .top-illust-waku{position:absolute !important; padding-left:0%; padding-right:0%;} /* 1100px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1100px) { .top-illust-waku{transform:scale(1.05) !important; margin-top:8px !important;}} /* 1000px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1000px) { .top-illust-waku{transform:scale(1.05) !important; margin-top:8px !important;}} /* 890px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 890px) { .top-illust-waku{transform:scale(1.05) !important; margin-top:10px !important;}} /* 820px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 820px) { .top-illust-waku{transform:scale(1.05) !important; margin-top:10px !important;}} .top-tel-waku{margin-bottom:40%; padding-top:20px ; padding-left:8% ;} .top-tel-blue{padding-bottom:10px ;} /* 1260px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1260px) { .top-tel-blue{width:70% ; margin-top:-8px ; padding-bottom:0px;}} /* 1240px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1240px) { .top-tel-blue{width:66% ; margin-top:-2px ;}} /* 1220px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1220px) { .top-tel-blue{width:62% ; margin-top:0px ;}} /* 1210px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1210px) { .top-tel-blue{width:60% ;}} /* 1200px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1200px) { .top-tel-blue{width:58% !important;}} /* 1199px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1199px) { .top-tel-blue{width:80% !important;}} /* 1170px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1170px) { .top-tel-blue{width:75% !important;}} /* 1120px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1120px) { .top-tel-blue{width:72% !important;}} /* 1070px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1070px) { .top-tel-blue{width:70% !important;}} /* 1050px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1050px) { .top-tel-blue{width:70% !important;}} /* 1040px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1040px) { .top-tel-blue{width:68% !important;}} /* 1030px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1030px) { .top-tel-blue{width:66% !important;}} /* 1020px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1020px) { .top-tel-blue{width:64% !important;}} /* 1010px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1010px) { .top-tel-blue{width:63% !important;}} /* 1000px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1000px) { .top-tel-blue{width:62% !important;}} /* 991px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 991px) { .top-tel-blue{width:90% !important; margin-top:-5px !important;}} /* 920px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 920px) { .top-tel-blue{width:88% !important; margin-top:-8px !important;}} /* 900px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 900px) { .top-tel-blue{width:86% !important; margin-top:-8px !important;}} /* 880px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 880px) { .top-tel-blue{width:85% !important; margin-top:-8px !important;}} /* 860px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 860px) { .top-tel-blue{width:83% !important; margin-top:-9px !important;}} /* 850px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 850px) { .top-tel-blue{width:83% !important; margin-top:-9px !important;}} /* 840px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 840px) { .top-tel-blue{width:81% !important; margin-top:-9px !important;}} /* 820px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 820px) { .top-tel-blue{width:78% !important; margin-top:-9px !important;}} /* 810px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 810px) { .top-tel-blue{width:76% !important; margin-top:-6px !important;}} /* 800px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 800px) { .top-tel-blue{width:72% !important; margin-top:-6px !important;}} /* 790px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 790px) { .top-tel-blue{width:70% !important; margin-top:-8px !important;}} /* 767px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 767px) { .top-tel-blue{width:80% !important; margin-top:-8px !important;}} /* 750px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 750px) { .top-tel-blue{width:76% !important; margin-top:-8px !important;}} /* 580px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 580px) { .top-tel-blue{width:76% !important; margin-top:-10px !important; padding-bottom:8px !important;}} /* 500px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 500px) { .top-tel-blue{width:76% !important; margin-top:-14px !important; padding-bottom:6px !important;}} /* 450px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 450px) { .top-tel-blue{width:76% !important; margin-top:-16px !important; padding-bottom:6px !important;}} .top-tel-blue-waku{} /* 820px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 820px) { .top-tel-blue-waku{margin-left:-30px !important; margin-top:-5px !important;}} /* 800px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 800px) { .top-tel-blue-waku{margin-left:-50px !important; margin-top:-10px !important;}} /* 790px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 790px) { .top-tel-blue-waku{margin-left:-50px !important; margin-top:-5px !important;}} /* 780px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 780px) { .top-tel-blue-waku{margin-left:-80px !important; margin-top:-5px !important;}} /* 767px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 767px) { .top-tel-blue-waku{margin-left:50% !important; margin-top:-5px !important;}} /* 710px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 710px) { .top-tel-blue-waku{margin-left:52% !important; margin-top:-5px !important;}} /* 690px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 690px) { .top-tel-blue-waku{margin-left:50% !important; margin-top:-5px !important;}} /* 667px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 667px) { .top-tel-blue-waku{margin-left:51% !important; margin-top:-5px !important;}} /* 630px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 630px) { .top-tel-blue-waku{margin-left:51% !important; margin-top:-8px !important;}} /* 600px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 600px) { .top-tel-blue-waku{margin-left:51% !important; margin-top:-10px !important;}} /* 580px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 580px) { .top-tel-blue-waku{margin-left:51% !important; margin-top:-12px !important;}} .ex-illust-a{position:absolute; text-align:center; left:52%; right:34%; margin-top:3%;} /* 767px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 767px) { .ex-illust-a{margin-top:10%;}} .ex-illust-b{position:absolute; text-align:left; left:-3%; right:89%; margin-top:12%;} /* 600px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 600px) { .ex-illust-b{left:16%; right:68%;}} .ex-illust-c{position:absolute; text-align:center; left:52%; right:34%; margin-top:-20%;} /* 767px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 767px) { .ex-illust-c{margin-top:-30%;}} /* 600px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 600px) { .ex-illust-c{margin-top:-35%;}} /* 540px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 540px) { .ex-illust-c{margin-top:-45%; left:74%; right:10%;}} .star-illust-a{position:absolute; text-align:center; left:44%; right:44%; margin-top:18%} .star-illust-b{position:absolute; text-align:left; left:-3%; right:91%; margin-top:40%} /* 600px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 600px) { .star-illust-b{left:10%; right:73%;}} .star-illust-c{position:absolute; text-align:right; left:80%; right:-10%; margin-top:-10%} /* 767px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 767px) { .star-illust-c{left:85%; right:-15%; margin-top:100%;}} .star-illust-d{position:absolute; text-align:right; left:91%; right:-3%; margin-top:-10%} /* 600px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 600px) { .star-illust-d{left:81%; right:3%;}} .star-illust-e{position:absolute; text-align:center; left:44%; right:44%; margin-top:18%} /* 767px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 767px) { .star-illust-e{left:64%; right:24%; margin-top:28%;}} .justdoit{position:absolute; text-align:center; left:30%; right:30%; margin-top:-5%;} /* 767px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 767px) { .justdoit{margin-top:0%;}} /*-------------------------TOPページ-ABOUT USの背景設定------------------------------------- */ /* 767px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 767px) { .aboutus-thumbnail-a{display:none ;}} .top-about-back-a{background-size:cover ;} .top-about-area{margin-bottom:-10% !important;} .flower-a{margin-top:-10% !important;} /* 880px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 880px) { .ccm-custom-style-container.ccm-custom-style-main-563, .ccm-custom-style-container.ccm-custom-style-main-564{background-size:110%;}} /* 815px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 815px) { .ccm-custom-style-container.ccm-custom-style-main-563, .ccm-custom-style-container.ccm-custom-style-main-564{background-size:112%;}} /* 810px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 810px) { .ccm-custom-style-container.ccm-custom-style-main-563, .ccm-custom-style-container.ccm-custom-style-main-564{background-size:112%;}} /* 800px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 800px) { .ccm-custom-style-container.ccm-custom-style-main-563, .ccm-custom-style-container.ccm-custom-style-main-564{background-size:114%;}} /* 750px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 750px) { .ccm-custom-style-container.ccm-custom-style-main-563, .ccm-custom-style-container.ccm-custom-style-main-564{background-size:cover;}} /*-------------------------TOPページのRICRUITの背景設定------------------------------------- */ .top-recruit-back-a{position:absolute; text-align:left;} /* 767px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 767px) { .top-recruit-back-a{width:115%;}} /* 600px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 600px) { .top-recruit-back-a{width:145%;}} .top-recruit-back-b{position:absolute; text-align:right;} /* 600px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 600px) { .top-recruit-back-b{margin-top:35%;}} .top-recruit-back-a-text{position:relative;} .top-recruit-text-waku{padding-left:10%; padding-right:9%;} /* 767px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 767px) { .top-recruit-text-waku{padding-right:30%;}} .top-contact-back-a-text{position:relative;} .top-contact-text-waku{padding-left:10%; padding-right:9%;} /* 767px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 767px) { .top-contact-text-waku{padding-right:30%;}} .top-access-back-a{position:absolute; text-align:right;} /* 767px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 767px) { .top-access-back-a{width:155%; margin-top:90%; margin-left:-59%;}} .dskmarker-waku{position:absolute; margin-top:6%;} /* 991px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 991px) { .dskmarker-waku{margin-top:6.5%;}} /* 900px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 900px) { .dskmarker-waku{margin-top:7%;}} /* 850px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 850px) { .dskmarker-waku{margin-top:7.5%;}} /* 800px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 800px) { .dskmarker-waku{margin-top:8%;}} /* 780px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 780px) { .dskmarker-waku{margin-top:8%;}} /* 730px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 730px) { .dskmarker-waku{margin-top:9.1%;}} /* 720px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 720px) { .dskmarker-waku{margin-top:9.2%;}} /* 710px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 710px) { .dskmarker-waku{margin-top:9.3%;}} /* 700px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 700px) { .dskmarker-waku{margin-top:9.5%;}} /* 690px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 690px) { .dskmarker-waku{margin-top:9.5%;}} /* 670px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 670px) { .dskmarker-waku{margin-top:9.5%;}} .dskmarker.dskactive{background-position: -100% .4rem;} .dskmarker {background-repeat: repeat-x; background-size: 200% 25%; background-position: 0 .4rem; transition: all 1s ease; } /* 1530px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1530px) { .dskmarker{background-size:190% 25%;}} /* 1330px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1330px) { .dskmarker{background-size:180% 25%;}} /* 1290px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1290px) { .dskmarker{background-size:160% 25%;}} /* 1250px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1250px) { .dskmarker{background-size:160% 25%;}} /* 1210px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1210px) { .dskmarker{background-size:155% 25%;}} /* 1200px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1200px) { .dskmarker{background-size:150% 25%;}} /* 1190px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1190px) { .dskmarker{background-size:180% 25%;}} /* 1150px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1150px) { .dskmarker{background-size:170% 25%;}} /* 1110px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1110px) { .dskmarker{background-size:160% 25%;}} /* 1085px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1085px) { .dskmarker{background-size:170% 25%;}} /* 1040px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1040px) { .dskmarker{background-size:160% 25%;}} /* 1000px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1000px) { .dskmarker{background-size:150% 25%;}} /* 991px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 991px) { .dskmarker{background-size:200% 25%;}} /* 990px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 990px) { .dskmarker{background-size:200% 25%;}} /* 940px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 940px) { .dskmarker{background-size:190% 25%;}} /* 910px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 910px) { .dskmarker{background-size:180% 25%;}} /* 880px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 880px) { .dskmarker{background-size:170% 25%;}} /* 850px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 850px) { .dskmarker{background-size:160% 25%;}} /* 810px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 810px) { .dskmarker{background-size:150% 25%;}} /* 767px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 767px) { .dskmarker{background-size:160% 25%;}} /* 740px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 740px) { .dskmarker{background-size:155% 25%;}} /* 720px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 720px) { .dskmarker{background-size:150% 25%;}} /* 710px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 710px) { .dskmarker{background-size:145% 25%;}} /* 690px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 690px) { .dskmarker{background-size:140% 25%;}} /* 670px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 670px) { .dskmarker{background-size:135% 25%;}} .color01 .dskmarker {background-image: -webkit-linear-gradient(left, transparent 50%, #00AFEC 50%); background-image: -moz-linear-gradient(left, transparent 50%, #00AFEC 50%); background-image: -ms-linear-gradient(left, transparent 50%, #00AFEC 50%); background-image: -o-linear-gradient(left, transparent 50%, #00AFEC 50%); background-image: linear-gradient(left, transparent 50%, #00AFEC 50%); } .color02 .dskmarker {background-image: -webkit-linear-gradient(left, transparent 50%, #fff 50%); background-image: -moz-linear-gradient(left, transparent 50%, #fff 50%); background-image: -ms-linear-gradient(left, transparent 50%, #fff 50%); background-image: -o-linear-gradient(left, transparent 50%, #fff 50%); background-image: linear-gradient(left, transparent 50%, #fff 50%); } /*-------------------------TOPページのCONTACTの背景設定------------------------------------- */ .top-contact-back-a{position:absolute; text-align:left;} /* 767px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 767px) { .top-contact-back-a{width:155%;}} /* 540px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 540px) { .top-contact-back-a{width:160%;}} /*-------------------------TOPページのACCESSの背景設定------------------------------------- */ .top-access-back-a-text{position:relative;} .top-access-text-waku{padding-left:10%; padding-right:9%;} /* 767px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 767px) { .top-access-text-waku{padding-right:10%; margin-top:30%; margin-left:20%;}} /* 540px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 540px) { .top-access-text-waku{margin-top:20%;}} .letsgo{text-align:right; margin-top:-84%; margin-left:82%; margin-right:-8%; position:absolute;} /*-------------------------TOPページの採用情報のアイコン設定------------------------------------- */ .recruit-icon{position:fixed !important; right:0 !important; left:auto !important; z-index:1002 !important; top:25% !important; width:50px !important; transition:0.3s !important;} /* 600px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 600px){ .recruit-icon{width:40px !important;}} /* 500px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 500px){ .recruit-icon{top:13% !important;}} .recruit-icon:hover{transform:scale(1.1) !important; transition:0.3s !important;} .slide-dots { margin: 0; padding: 0; text-align: center; } .slide-dots li { display: inline-block; margin: 0 10px; } .slide-dots li button { position: relative; text-indent: -9999px; } .slide-dots li button::before { background-image: url(表示されてない用の画像のパス); background-repeat: no-repeat; background-size: contain; content: ""; cursor: pointer; height: 13.5px; left: 0; margin: auto; position: absolute; right: 0; top: 24px; width: 13.5px; } .slide-dots li.slick-active button::before { background-image: url(表示されてる用の画像のパス); } button { background: none; border: none; outline: none; padding: 0 7px; } /*-------------------------独自イメージスライダー------------------------------------- */ .slick-dotted.slick-slider{padding-left:0 !important; margin-bottom:0px !important;} .slick-dots{bottom:-50px !important;} .slick-dots li button{margin: right 5px; list-style-type:none ; transform:scale(2.2) !important; transition:1s ;} .slick-dots li button:before:hover{opacity:.25 !important; transition:1s !important;} .slick-dots li.slick-active button:before{color:#003389 !important; transition:1s ;} /*-------------------------イメージスライダー------------------------------------- */ .pc-slide{position:fixed; z-index:-5; width:100% !important; top:0 !important;} /* 767px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 767px) { .pc-slide{display:none　!important;}} /* 縦幅400px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-height: 400px) { .pc-slide{display:block !important;}} /* 1381px以上に適用されるCSS（タブレット・PC用） */ @media screen and (min-width: 1381px) { .pc-slide{display:block; top:0 !important;}} /* 1700px以上に適用されるCSS（タブレット・PC用） */ @media screen and (min-width: 1700px) { .pc-slide{top:-15% !important;}} /* 844px以上に適用されるCSS（タブレット・PC用） */ @media screen and (min-width: 844px) { .pc-slide{display:block !important;}} /* 768px以上に適用されるCSS（タブレット・PC用） */ @media screen and (min-width: 768px) { .pc-slide{display:block !important;}} /* 767px以上に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 767px) { .pc-slide{display:none !important;}} .pc-slide img{width:100% !important;} .sp-slide{position:fixed; z-index:-5; width:100% !important; top:0 !important;} /* 767px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 767px) { .sp-slide{display:block !important; top:-10% !important;}} /* 縦幅400px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-height: 400px) { .sp-slide{display:block !important;}} /* 844px以上に適用されるCSS（タブレット・PC用） */ @media screen and (min-width: 844px) { .sp-slide{display:none !important;}} /* 768px以上に適用されるCSS（タブレット・PC用） */ @media screen and (min-width: 768px) { .sp-slide{display:none !important;}} /* 500px以上に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 500px) { .sp-slide{top:0 !important; }} .sp-slide img{width:100% !important;} .rslides_tabs{position:absolute ; z-index:2 ; text-align: center; margin-top:20px ; width:100% } .ccm-im8age-slider-text{padding-top:0rem;} div.ccm-page .ccm-image-slider-container .ccm-image-slider-text{top:30% !important; left:20% !important;} /* 1556px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1556px) { div.ccm-page .ccm-image-slider-container .ccm-image-slider-text{top:30% !important; left:13% !important;}} /* 1078px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 1078px){ div.ccm-page .ccm-image-slider-container .ccm-image-slider-text{top:230px !important; left:85px !important;}} /* 530px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 530px) { div.ccm-page .ccm-image-slider-container .ccm-image-slider-text{top:20px !important;}} /* 480px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 480px) { div.ccm-page .ccm-image-slider-container .ccm-image-slider-text{top:10px !important;}} /* 375px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 375px) { div.ccm-page .ccm-image-slider-container .ccm-image-slider-text{top:30px !important;}} div.ccm-page .ccm-image-slider-container .ccm-image-slider-text p{font-family:'Noto Sans JP', sans-serif !important;} .ccm-image-slider-container{background-image: none !important ; } div.ccm-page .ccm-image-slider-container .ccm-image-slider{padding-left:0px !important; padding-right:0px !important;} div.ccm-page .ccm-image-slider-container{padding-top: 0 !important; border-bottom:none !important; margin-bottom:0px !important;} /* 480px以下に適用されるCSS（タブレット・PC用） */ @media screen and (max-width: 480px) { div.ccm-page .ccm-image-slider-container{padding-top:15% !important;}} div.ccm-page .ccm-image-slider-container .ccm-image-slider .rslides li{max-height: 100% !important;} div.ccm-page .ccm-image-slider-container .ccm-image-slider{width:100% !important; margin-left:0 !important; margin-right:0 !important; padding-left:0 !important; padding-right:0 !important; } div.ccm-page .ccm-image-slider-container .ccm-image-slider-inner{margin:0 !important; padding:0 !important;} /*イメージスライダーの丸ナビ */ div.ccm-page .ccm-image-slider-container .rslides_tabs li a{width:10px !important; height:10px !important; margin-right:7px !important;} /* 375px以下に適用されるCSS（タブレット用 */ @media screen and (max-width: 375px) { div.ccm-page .ccm-image-slider-container .rslides_tabs li a{width:6px !important; height:6px !important; margin-right:6px !important; margin-top:30px !important;}} /*イメージスライダーの丸ナビの上下余白調整 */ /* 375px以下に適用されるCSS（iPhone SE 縦用） */ @media screen and (max-width: 375px) { div.ccm-page .ccm-image-slider-container .rslides_tabs{padding-top:0px !important; padding-bottom:0px !important;}} /*イメージスライダー(PC用)の丸ナビ現在表示 */ div.ccm-page .ccm-image-slider-container .rslides_tabs li.rslides1_s1.rslides_here a{background-color: #865F39 !important;} div.ccm-page .ccm-image-slider-container .rslides_tabs li.rslides1_s2.rslides_here a{background-color: #865F39 !important;} div.ccm-page .ccm-image-slider-container .rslides_tabs li.rslides1_s3.rslides_here a{background-color: #865F39 !important;} /*イメージスライダー（スマホ・タブレット用）の丸ナビ現在表示 */ div.ccm-page .ccm-image-slider-container .rslides_tabs li.rslides2_s1.rslides_here a{background-color: #668CE6 !important;} div.ccm-page .ccm-image-slider-container .rslides_tabs li.rslides2_s2.rslides_here a{background-color: #F6955C !important;} div.ccm-page .ccm-image-slider-container .rslides_tabs li.rslides2_s3.rslides_here a{background-color: #5AB86D !important;} /*イメージスライダーのズームアップ #rslides1_s0{animation: shrink 19s infinite !important; transition:opacity 1.2s ease-in-out 0s !important;} @keyframes shrink{0% {transform: scale(1.05);} 50%{transform:scale(1.0);} 100% {transform:scale(1.05);}} #rslides1_s1{animation: shrink1 19s infinite !important; transition:opacity 1.2s ease-in-out 0s !important;} @keyframes shrink1{0% {transform: scale(1.05);} 50%{transform:scale(1.0);} 100% {transform:scale(1.05);}} #rslides1_s2{animation: shrink2 19s infinite !important; transition:opacity 1.2s ease-in-out 0s !important;} @keyframes shrink2{0% {transform: scale(1.05);} 50%{transform:scale(1.0);} 100% {transform:scale(1.05);}} #rslides1_s3{animation: shrink3 19s infinite !important; transition:opacity 1.2s ease-in-out 0s !important;} @keyframes shrink3{0% {transform: scale(1.05);} 50%{transform:scale(1.0);} 100% {transform:scale(1.05);}} /*TOPのイメージスライダーの背景 */ .topslide{padding-top:-30px !important; padding-bottom:-30px !important;} .ccm-image-slider-inner{width:100% !important;} .slide-items__wrap {margin-top:-3% !important;} /*TOPページ上のキャッチコピー */ .top-catch-a{position:absolute !important; z-index:5 !important; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; margin-top:25%; margin-left:1%; height:400px; font-size:1.7em; font-family: 'Zen Old Mincho', serif !important; font-weight:500;} /* 800px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 800px) { .top-catch-a{margin-top:20%;}} /* 750px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 750px) { .top-catch-a{margin-top:20%;}} .top-catch-b{animation-name:fade-in; animation-duration:3s; animation-fill-mode:forwards; opacity:0; } @keyframes fade-in{ from {opacity: 0;} to { opacity: 1;}} /* 1450px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 1450px){ .top-catch-b{transform:scale(0.9); width:110%;}} /* 1399px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 1399px){ .top-catch-b{transform:scale(0.85); width:120%;}} /* 1246px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 1246px){ .top-catch-b{transform:scale(0.75); width:125%;}} /* 1205px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 1205px){ .top-catch-b{transform:scale(0.75); width:135%;}} /* 1199px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 1199px){ .top-catch-b{transform:scale(0.75); width:145%; margin-left:-10%;}} /* 1007px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 1007px){ .top-catch-b{transform:scale(0.75); width:135%;}} /* 991px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 991px){ .top-catch-b{transform:scale(0.9); width:165%; margin-left:-35%; margin-top:-10%;}} /* 817px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 817px){ .top-catch-b{transform:scale(0.9); width:175%;}} /* 783px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 783px){ .top-catch-b{transform:scale(0.9); width:185%;}} /* 767px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 767px){ .top-catch-b{transform:scale(1.0); width:100%; margin-left:-10%;}} /* 597px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 597px){ .top-catch-b{transform:scale(1.0) !important; width:110% !important; margin-left:-10% !important;}} /* 560px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 560px){ .top-catch-b{transform:scale(1.0) !important; width:116% !important; margin-left:-10% !important;}} /* 541px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 541px){ .top-catch-b{transform:scale(1.0) !important; width:126% !important; margin-left:-15% !important;}} /* 519px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 519px){ .top-catch-b{margin-left:-18% !important; margin-top:-20%;}} .top-catch-c{animation-name:fade-in; animation-duration:3s; animation-fill-mode:forwards; opacity:0; } @keyframes fade-in{ from {opacity: 0;} to { opacity: 1;}} /* 1450px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 1450px){ .top-catch-c{transform:scale(0.9); width:110%;}} /* 1399px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 1399px){ .top-catch-c{transform:scale(0.85); width:120%;}} /* 1246px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 1246px){ .top-catch-c{transform:scale(0.75); width:125%;}} /* 1199px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 1199px){ .top-catch-c{transform:scale(0.75); width:135%; margin-left:-8%;}} /* 1047px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 1047px){ .top-catch-c{transform:scale(0.75); width:130%;}} /* 1015px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 1015px){ .top-catch-c{transform:scale(0.75); width:140%;}} /* 991px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 991px){ .top-catch-c{transform:scale(0.9) ; width:165% ; margin-left:-35% ; margin-top:-5% ;}} /* 847px以下に適用されるCSS（PC・タブレット用） */ @media screen and (max-width: 847px){ .top-catch-c{transform:scale(0.9) ; width:175% ; margin-left:-35% ; margin-top:-5% ;}} /* 811px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 811px){ .top-catch-c{transform:scale(0.9) ; width:185% ; margin-left:-35% ; margin-top:-5% ;}} /* 779px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 779px){ .top-catch-c{transform:scale(0.9) ; width:195% ; margin-left:-35% ; margin-top:-5% ;}} /* 767px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 767px){ .top-catch-c{transform:scale(1.0) ; width:100% ; margin-left:-10% ; margin-top:-3% ;}} /* 618px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 618px){ .top-catch-c{transform:scale(0.96) ; width:110% ; margin-left:-13% ; margin-top:-3% ;}} /* 579px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 579px){ .top-catch-c{width:115% ;}} /* 562px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 562px){ .top-catch-c{width:120% ;}} /* 547px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 547px){ .top-catch-c{width:130% ;}} /* 541px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 541px){ .top-catch-c{margin-left:-18% ;}} /* 519px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 519px){ .top-catch-c{width:135%; margin-left:-23% ;}} /*TOPの採用情報の枠 */ .top-recruit-waku{position:absolute !important; z-index:3 !important; margin-left:10% !important; margin-right:10% !important; padding-top:45% !important; } /*TOPの採用情報枠上の背景 */ .back-nami-c{width:100% !important; position:absolute; z-index:4} .company-button-a img{width:33.3% !important;} /*TOPの背景のSAKOU CONSULTANT */ .back-sakou-a{margin-top:-7% !important;} /*---------------------------------------《会社案内ページの設定》--------------------------------------------------- */ .sagyouin-illust-a{position:absolute; padding-left:56%;} .company-cp{padding-top:110px !important; transform:scale(1.6) !important;} /* 1600px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 1600px){ .company-cp{padding-top:110px !important; transform:scale(1.6) !important;}} /* 1400px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 1400px){ .company-cp{padding-top:110px !important; transform:scale(1.4) !important;}} /* 1300px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 1300px){ .company-cp{padding-top:110px !important; transform:scale(1.4) !important;}} /* 1200px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 1200px){ .company-cp{padding-top:100px !important; transform:scale(1.3) !important;}} /* 1110px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 1110px){ .company-cp{padding-top:90px !important; transform:scale(1.2) !important;}} /* 767px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 767px){ .company-cp{padding-top:90px !important; transform:scale(1.6) !important;}} /* 700px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 700px){ .company-cp{padding-top:90px !important; transform:scale(1.5) !important;}} /* 670px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 670px){ .company-cp{padding-top:90px !important; transform:scale(1.4) !important;}} /* 620px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 620px){ .company-cp{padding-top:90px !important; transform:scale(1.3) !important;}} /* 580px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 580px){ .company-cp{padding-top:90px !important; transform:scale(1.2) !important;}} /* 520px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 520px){ .company-cp{padding-top:90px !important; transform:scale(1.1) !important;}} /* 511px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 511px){ .company-cp{padding-top:80px !important; transform:scale(1.25) !important;}} /* 500px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 500px){ .company-cp{padding-top:70px !important; transform:scale(1.2) !important;}} /* 468px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 468px){ .company-cp{padding-top:60px !important; transform:scale(1.3) !important;}} /* 450px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 450px){ .company-cp{padding-top:60px !important; transform:scale(1.2) !important;}} /* 424px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 424px){ .company-cp{padding-top:60px !important; transform:scale(1.3) !important;}} /* 400px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 400px){ .company-cp{padding-top:60px !important; transform:scale(1.2) !important;}} /* 384px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 384px){ .company-cp{padding-top:60px !important; transform:scale(1.2) !important;}} /* 381px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 381px){ .company-cp{padding-top:60px !important; transform:scale(1.4) !important;}} /* 375px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 375px){ .company-cp{padding-top:60px !important; transform:scale(1.65) !important;}} /* 350px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 350px){ .company-cp{padding-top:60px !important; transform:scale(1.5) !important;}} /* 320px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 320px){ .company-cp{padding-top:40px !important; transform:scale(1.4) !important;}} /* 300px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 300px){ .company-cp{padding-top:40px !important; transform:scale(1.3) !important;}} /* 286px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 286px){ .company-cp{padding-top:40px !important; transform:scale(1.5) !important;}} /* 270px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 270px){ .company-cp{padding-top:40px !important; transform:scale(1.4) !important;}} /*---------------------------------------《事業紹介ページの設定》--------------------------------------------------- */ .works-head-a{margin-top:-12% !important; background-size:cover !important; margin-bottom:-10%; } /* 1500px以上に適用されるCSS（タブレット・スマホ用） */ @media screen and (min-width: 1500px){ .works-head-a{padding-top:12% !important; margin-bottom:-8% ;}} /* 900px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 900px){ .works-head-a{margin-top:-17% !important;}} /* 642px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 642px){ .works-head-a{margin-top:-20% !important;}} /* 500px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 500px){ .works-head-a{margin-top:-40% !important; margin-bottom:-20% !important; background-size:160% !important; background-position:bottom center !important;}} /* 480px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 480px){ .works-head-a{margin-top:-40% !important; background-size:180% !important;}} /* 450px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 450px){ .works-head-a{margin-top:-40% !important; background-size:205% !important;}} /* 440px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 440px){ .works-head-a{margin-top:-40% !important; background-size:215% !important;}} /* 430px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 430px){ .works-head-a{margin-top:-40% !important; background-size:225% !important;}} /* 420px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 420px){ .works-head-a{margin-top:-40% !important; background-size:235% !important;}} /* 410px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 410px){ .works-head-a{margin-top:-40% !important; background-size:245% !important;}} /* 400px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 400px){ .works-head-a{margin-top:-40% !important; background-size:245% !important;}} /* 390px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 390px){ .works-head-a{margin-top:-40% !important; background-size:255% !important;}} /* 380px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 380px){ .works-head-a{margin-top:-40% !important; background-size:280% !important;}} /* 360px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 360px){ .works-head-a{margin-top:-40% !important; background-size:290% !important;}} /* 267px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 267px){ .works-head-a{margin-top:-90% !important; background-size:290% !important;}} /*---------------------------------------《採用情報ページの設定》--------------------------------------------------- */ .city-a{position:absolute;} .jimuin-a{padding-right:55%; margin-left:-15%; position:absolute; z-index:1;} .shachou-a{padding-left:34%; margin-right:-13%; margin-top:-7%; position:relative; z-index:2;} .recruit-top-waku{position:relative; margin-bottom:16%;} .recruit-top-a{position:absolute; left:0;} /* 768px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (min-width: 768px){ .recruit-top-a{display:block !important;}} /* 767px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 767px){ .recruit-top-a{display:none !important;}} .recruit-top-b{position:absolute; left:0;} /* 768px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (min-width: 768px){ .recruit-top-a{display:block !important;}} /* 767px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 767px){ .recruit-top-b{display:none !important;}} .recruit-top-c{position:absolute; left:0;} /* 768px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (min-width: 768px){ .recruit-top-c{display:block ; }} /* 767px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 767px) { .recruit-top-c{display:none !important;}} .recruit-top-d{position:absolute; width:100%;} /* 768px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (min-width: 768px){ .recruit-top-d{display:none !important;}} /* 767px以下に適用されるCSS（タブレット・スマホ用） */ @media screen and (max-width: 767px){ .recruit-top-d{display:block !important;}} /*--採用情報ページ/recruit--*/ /*--切り替えタブ--*/ .tabs {/*--タブ切り替え全体のスタイル--*/ margin-top: 50px; padding-bottom: 50px; background-color: #fff; box-shadow: 0 6px 6px rgba(0, 0, 0, 0.1); width: 100%; margin: 0 auto;} .tab_item {/*--タブのスタイル--*/ width: calc(100%/6 - 1px); height: 50px; border-top: 3px solid #9FCEFF; background-color: #9FCEFF; line-height: 50px; font-size: 1em; text-align: center; color: #fff; display: block; float: left; text-align: center; transition: all 0.2s ease;} @media screen and (max-width:480px){ .tab_item { width: calc(100%/3); font-size: 0.6em;}} .tab_item:hover {opacity: 0.75;} input[name="tab_item"] {/*--ラジオボタンを全て消す--*/display: none;} .tab_content {/*--タブ切り替えの中身のスタイル--*/ display: none; padding: 40px 40px 0; clear: both; overflow: hidden;} @media screen and (max-width:480px){ .tab_content{padding: 20px 10px 0;}} #recruit01:checked ~ #recruit01_content, #recruit02:checked ~ #recruit02_content, #recruit03:checked ~ #recruit03_content, #recruit04:checked ~ #recruit04_content, #recruit05:checked ~ #recruit05_content, #recruit06:checked ~ #recruit06_content {/*--選択されているタブのコンテンツのみを表示--*/display: block;} .tabs input:checked + .tab_item {/*--選択されているタブのスタイルを変えるbackground-color: #9FCEFF;--*/ background-color: #fff; color: #9fceff;} /*--採用情報_タブ02リード--*/ .recruit_wm { position: relative; border-top: solid 2px #18cfc0; border-bottom: solid 2px #18cfc0; background: #f1fae8; line-height: 1.4; padding: 0.4em 0.5em; margin: 2em 0 0.5em;} .recruit_wm:after { /*タブ*/ position: absolute; font-weight: 500; content: 'クレーンオペレーター'; background: #18cfc0; color: #fff; left: 0px; bottom: 100%; border-radius: 5px 5px 0 0; padding: 5px 7px 3px; font-size: 1em; line-height: 1; letter-spacing: 0.05em;} /*--採用情報_タブ03リード--*/ .recruit_fi { position: relative; border-top: solid 2px #18cfc0; border-bottom: solid 2px #18cfc0; background: #fffae8; line-height: 1.4; padding: 0.4em 0.5em; margin: 2em 0 0.5em;} .recruit_fi:after { /*タブ*/ position: absolute; font-weight: 500; content: 'ここに職種名が入ります'; background: #18cfc0; color: #fff; left: 0px; bottom: 100%; border-radius: 5px 5px 0 0; padding: 5px 7px 3px; font-size: 1em; line-height: 1; letter-spacing: 0.05em;} /*--採用情報_枠の設定--*/ .tab__area{ color: #333; margin: 0px; width: auto; font-size: 15px; line-height: 1.6;} .tab__list{ display: flex; justify-content:center; margin: 0; width: 100%; zoom: 0; border-spacing: 0;} .tab__item{ display: table-cell; text-align: center; font-size: 1em; font-weight: bold; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; width:250px;} @media screen and (max-width:480px){ .tab__item{font-size: 0.87em;}} .tab__item a{ display: block; padding: 1.5px 24px; margin: 1px; overflow: hidden; position: relative; color: #333; background-color: #fff; border: 1px solid #ccc; border-radius: 3px 3px 0 0; font-size: 1em; text-decoration: none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} @media screen and (max-width:1199px){ .tab__item a{padding: 1.5px 6px;}} @media screen and (max-width:480px){ .tab__item a{font-size: 0.87em;}} /* hover時の背景色（グレー）の指定 */ .tab__item a:hover{background-color: #eee;} /* タブ選択時の文字色の指定 */ .tab__item a.selected{color: #fff !important;} /* タブ01の背景色と文字色の指定 */ .tab__item:first-child a.selected{background-color: #186ac2;} /* タブ02の背景色と文字色の指定 */ .tab__item:nth-child(2) a.selected{background-color: #186ac2;} /* タブ03の背景色と文字色の指定 */ .tab__item:nth-child(3) a.selected{background-color: #186ac2;} .tab__inner{border: 0px solid #ccc; margin-top: -1px;} /* タブ01選択時のコンテンツ内の背景色の指定 */ .tab__inner .pink{ padding: 20px; background-color: #eee;} /* タブ02選択時のコンテンツ内の背景色の指定 */ .tab__inner .orange{ padding: 20px; background-color: #eee;} /* タブ03選択時のコンテンツ内の背景色の指定 */ .tab__inner .green{ padding: 20px; background-color: #eee;} /*--採用情報内のアコーディオン表示--*/ .accordion-wrap{ border-bottom: 1px solid #ccc;} .accordion-item{ width: 100%; margin: 0 auto; cursor: pointer; margin-top: 30px;} .accordion-header{ transition: ease-in-out 100ms;} .accordion-text{ width: 100%; display: none; padding-top: 5px; padding-bottom: 20px;} .fa{transition: ease-in-out 300ms;} .rotate-fa{transform: rotate(180deg);} .accordion-header .fa{ float: right; line-height: 35px;} .accordion-gold{color: #18cfc0;} .accordion-no-bar{border-bottom: 0;} div.ccm-page main a:not(.fa):not(.btn), div.ccm-page footer a:not(.fa):not(.btn){color:#0089d1 ;} div.ccm-page main a:not(.fa):not(.btn):hover, div.ccm-page footer a:not(.fa):not(.btn):hover{color:#EA7A3D ;} /*横に流れ続けるスライダー */ .sl-content { width: 300px; height: 200px; list-style: none; margin-left:0px; margin-right:0px; border-radius: 0px; margin-left:0px; } .sl-content {border-radius:0%;} .sl-content:nth-child(1) { background-image:url(); margin-left:-48px;} .sl-content:nth-child(2) { background-image:url();} .sl-content:nth-child(3) { background-image:url();} .sl-content:nth-child(4) { background-image:url();} .sl-content:nth-child(5) { background-image:url();} .sl-content:nth-child(6) { background-image:url();} .sl-content:nth-child(7) { background-image:url();} .sl-content:nth-child(8) { background-image:url();} .sl-slideshow { display: flex; animation: loop-slide 70s infinite linear 1s both; } @keyframes loop-slide { from { transform: translateX(0); } to { transform: translateX(-100%); } } .sl-wrap { display: flex; align-items: center; overflow: hidden; margin-left:-30% !important; margin-right:-30% !important; margin-bottom:-7% !important;} /*---------------------------------------《お知らせの設定》--------------------------------------------------- */ .ccm-block-page-title-byline{text-align:left !important;} h1.page-title{text-align:left !important;} span.page-author{display:none !important;} div.ccm-page .main-wrap h1{text-align:left !important;} /*TOPページのブログリスト */ div.ccm-page div.ccm-block-page-list-page-entry-horizontal, div.ccm-page div.ccm-block-page-list-page-entry{padding-bottom:10px !important; margin-bottom:10px !important; color:#fff !important; border-bottom:2px dotted #ffcadb !important;} /*TOPページのブログリスト-日付→記事タイトル順 */ .ccm-block-page-list-page-entry-text{display:flex !important; flex-direction: row-reverse !important; justify-content: flex-end !important;} /*TOPページのブログリスト-日付の右に余白 */ .ccm-block-page-list-date{margin-right:20px !important; font-size:0.9em !important;} /*TOPページのブログリスト-記事タイトルの色 */ .ccm-block-page-list-title a{color:#fff !important;} .ccm-block-page-list-title a:hover{color:#ffcadb !important;} /*記事リストの間隔幅 */ div.ccm-page div.ccm-block-page-list-page-entry-horizontal, div.ccm-page div.ccm-block-page-list-page-entry{ padding-bottom:20px !important; margin-bottom:20px !important; border-bottom:2px dotted #fff !important;} /* 3000px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 3000px){ .rightside-main{background-size:cover !important;}} /* 2000px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 2000px){ .rightside-main{background-size:100% !important;}} /*---------------------------------------《お問合せページの設定》--------------------------------------------------- */ .btn-primary{background-color:#003389; border-color:#003389; transition:0.2s;} .btn-primary:hover{background-color:#e86100; border-color:#e86100; transition:0.2s;} /*---------------------------------------《全体の設定2》--------------------------------------------------- */ .main-back{ position:absolute; width:100%; height:100%; z-index:-2; } .particle-a-waku{ width:100% !important; height:10px !important; position:relative !important; z-index:-1; } /* ---- reset ---- */ canvas{ position:fixed !important; height:100vh !important; top:0; right:0; } /* ---- particles.js container ---- */ #particles-js{ position:absolute !important; width: 100%; height:100%; background-image: url(""); background-repeat: repeat !important; background-size: 100% !important; background-position: 50% 50% !important; } /* ---- stats.js ---- */ .count-particles{ background: none !important; position: absolute !important; top: 48px !important; left: 0 !important; width: 80px !important; color: #0089d1 !important; font-size: .8em !important; text-align: left !important; text-indent: 4px !important; line-height: 14px !important; padding-bottom: 2px !important; font-family: Helvetica, Arial, sans-serif !important; font-weight: bold !important; } .js-count-particles{ font-size: 1.1em !important; } #stats, .count-particles{ -webkit-user-select: none !important; margin-top: 5px !important; margin-left: 5px !important; } #stats{ border-radius: 3px 3px 0 0 !important; overflow: hidden !important; } .count-particles{ border-radius: 0 0 3px 3px !important; } .borderbottom-a{border-bottom:1px solid #0177D0; width:100%;} /* 767px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 767px){ .illust-a{width:50% ;}} /* 500px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 500px){ .illust-a{width:40% ;}} .illustanime-a-waku{} .illustanime-a{width:55% !important; margin-left:60%; margin-top:-40%;} .illustanime-b-waku{} .illustanime-b{width:65% !important; margin-left:10%; margin-top:-5%;} /* 767px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 767px){ .illustanime-b {width:65% !important; margin-left:55%; margin-top:-20%;}} /* 712px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 712px){ .illustanime-b {width:65% !important; margin-left:45%; margin-top:-20%;}} /* 613px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 613px){ .illustanime-b {width:65% !important; margin-left:35%; margin-top:-20%;}} .illustanime-c-waku{position:absolute;} .illustanime-c{width:45% !important; margin-left:2%; margin-bottom:-25%;} #easy-slider-wrapper-278.easy-slider-carousel .info > div{background-color:rgba(255,255,255,0) !important;} /* スクロールで縦線が伸びる */ /*タイムライン全体の設定*/ .timeline2{ max-width: 400px; width:100%; margin:0px auto; padding:0 40px; position:absolute; z-index:2; } .timeline2 li{ /*線の起点とするためrelativeを設定*/ position: relative; list-style: none; padding:0 0 20px 0; } .timeline2 dl{margin:0 0 20px 3em;} .timeline2 dd strong{ display: block; padding:10px 0; height:60.7vh; } .border-line2 { /*線の位置*/ position: absolute; left:0.2em; top:0; width:6px;/*線の太さ*/ height:0;/*はじめは高さを0に*/ background: #00AFEC; } .timeline2 li::after{ content:''; position: absolute; top:0; left:0; } .timeline1{ max-width: 400px; width:5%; margin:0px auto; padding:0 30px; position:absolute; z-index:3; overflow:hidden; height:474vh; } /* 2000px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 2000px){ .timeline1{height:472vh;}} /* 1900px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 1900px){ .timeline1{height:470vh;}} /* 1800px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 1800px){ .timeline1{height:464vh;}} /* 1700px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 1700px){ .timeline1{height:460vh;}} /* 1600px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 1600px){ .timeline1{height:457vh;}} /* 1500px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 1500px){ .timeline1{height:455vh;}} /* 1399px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 1399px){ .timeline1{height:450vh;}} /* 1322px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 1322px){ .timeline1{height:448vh;}} /* 1230px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 1230px){ .timeline1{height:446vh;}} /* 1190px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 1190px){ .timeline1{height:476vh;}} /* 1180px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 1180px){ .timeline1{height:474vh;}} /* 1175px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 1175px){ .timeline1{height:472vh;}} /* 1170px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 1170px){ .timeline1{height:472vh;}} /* 1150px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 1150px){ .timeline1{height:470vh;}} /* 1141px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 1141px){ .timeline1{height:456vh;}} /* 1140px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 1140px){ .timeline1{height:456vh;}} /* 1138px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 1138px){ .timeline1{height:454vh;}} /* 1110px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 1110px){ .timeline1{height:454vh;}} /* 1100px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 1100px){ .timeline1{height:452vh;}} /* 1090px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 1090px){ .timeline1{height:450vh;}} /* 1085px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 1085px){ .timeline1{height:412vh;}} /* 1080px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 1080px){ .timeline1{height:412vh;}} /* 1010px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 1010px){ .timeline1{height:408vh;}} /* 991px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 991px){ .timeline1{height:404vh;}} /* 930px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 930px){ .timeline1{height:400vh;}} /* 920px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 920px){ .timeline1{height:404vh;}} /* 910px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 910px){ .timeline1{height:400vh;}} /* 840px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 840px){ .timeline1{height:398vh;}} /* 800px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 800px){ .timeline1{height:400vh;}} /* 790px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 790px){ .timeline1{height:394vh;}} /* 767px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 767px){ .timeline1{height:484vh;}} /* 700px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 700px){ .timeline1{height:483vh;}} /* 590px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 590px){ .timeline1{display:none;}} .timeline1 li{ /*線の起点とするためrelativeを設定*/ position: relative; list-style: none; padding:0 0 20px 0; } .timeline1 dl{ margin:0 0 20px 3em; } .timeline1 dd strong{ display: block; padding:10px 0; height:100vh; } /*絶対配置で線を設定*/ .border-line1{ /*線の位置*/ position: absolute; left:0.2em; top:0; width:6px;/*線の太さ*/ height:0;/*はじめは高さを0に*/ background: linear-gradient(#fff,#00AFEC,#fff,#00AFEC,#00AFEC); } /* 767px以下に適用されるCSS（スマホ・ダブレット用） */ @media screen and (max-width: 767px){ .border-line1{height:113% !important;}} /*タイムラインの見出し横の丸の位置と形状*/ .timeline1 li::after{ content:''; position: absolute; top:0; left:0; } /*スクロールダウン*/ @import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap'); * { margin: 0; padding: 0; } html { scroll-behavior: smooth; } .scroll_down-dsk { position: relative; z-index:4; width: 5%; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover; margin-top:0%; } #type01 a{writing-mode:horizontal-tb !important; word-wrap:normal; } .scroll_down-dsk:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 80%; background: linear-gradient(180deg,rgba(#000, 0) 0, rgba(#000, .8) 80%, rgba(#000, .8) 100%); } .scroll_down-dsk a { display: inline-block; position: absolute; right: 0; bottom: 0; left: 0; z-index: 2; width: auto; padding: 10px 10px 110px; color: #fff !important; font-size: 14px; font-family: 'Josefin Sans', sans-serif; line-height: 1; letter-spacing: .2em; text-transform: uppercase; text-decoration: none; writing-mode: vertical-lr; transition: .2s; margin: auto; } .scroll_down-dsk a:before { content: ''; position: absolute; bottom: 0; left: 50%; width: 6px; height: 100px; background: #fff; } .scroll_down-dsk a:after { content: ''; position: absolute; bottom: 0; left: 50%; width: 7px; height: 100px; background: #7D7D7D; } .scroll_down-dsk a:hover { opacity: .5; } #type01 a:after { animation: sdl01 1.5s cubic-bezier(1, 0, 0, 1) infinite; } @keyframes sdl01 { 0% { transform: scale(1, 0); transform-origin: 0 0; } 50% { transform: scale(1, 1); transform-origin: 0 0; } 50.1% { transform: scale(1, 1); transform-origin: 0 100%; } 100% { transform: scale(1, 0); transform-origin: 0 100%; } } /*ズームアップ */ .zoom-up-a{width:500px !important; height:320px !important; margin-left:10px; margin-right:10px; margin-bottom:10px; margin-top:10px;} .zoom-up-a img{width:600px !important; transition:0.3s;} /* 1199px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 1199px) { .zoom-up-a{width:400px !important; height:260px !important; margin-left:5px; margin-right:5px; margin-bottom:5px; margin-top:5px;} .zoom-up-a img{width:500px !important;}} /* 991px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 991px) { .zoom-up-a{width:300px !important; height:190px !important; margin-left:5px; margin-right:5px; margin-bottom:5px; margin-top:5px;} .zoom-up-a img{width:400px !important;}} /* 767px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 767px) { .zoom-up-a{width:400px !important; height:250px !important; margin-left:15%; margin-right:10%; margin-bottom:30px; margin-top:5px;} .zoom-up-a img{width:700px !important;}} /* 600px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 600px) { .zoom-up-a{width:400px !important; height:250px !important; margin-left:5%; margin-right:5%; margin-bottom:30px; margin-top:5px;} .zoom-up-a img{width:700px !important;}} /* 430px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 430px) { .zoom-up-a{width:250px !important; margin-left:5px; margin-right:5px; margin-bottom:5px; margin-top:5px;} .zoom-up-a img{width:400px !important;}} .zoom-up-a img:hover{ transform: scale3d(1.1,1.1,1) ; /* hover時の倍率を指定 */ transition:0.5s;} .zoom-up-a{width:270px ; height:auto ; overflow:hidden !important;} /* 430px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 430px) { .zoom-up-a{width:250px ; height:auto ; overflow:hidden !important;}} /* .zoom-up-b img:hover{transform: scale3d(1.1,1.1,1) ; hover時の倍率を指定 transition:0.5s;}*/ .zoom-up-b{width:100% ; height:auto ; overflow:hidden;} .zoom-up-b img{width:650px !important; transition:0.5s;} /* 1180px以下に適用されるCSS（iPad air 横用） */ @media screen and (max-width: 1180px) { .zoom-up-b{width:100% !important; height:auto; overflow:hidden;} .zoom-up-b img{margin-top:28px;}} /* 1024px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 1024px) { .zoom-up-b{width:100% !important; height:auto; overflow:hidden;} .zoom-up-b img{margin-top:0px;}} /* 915px以下に適用されるCSS（Galaxy S20 横用） */ @media screen and (max-width: 915px) { .zoom-up-b{width:100% !important; height:auto; overflow:hidden;} .zoom-up-b img{margin-top:38px;}} /* 912px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 912px) { .zoom-up-b{width:100% !important; height:auto; overflow:hidden;}} /* 720px以下に適用されるCSS（Surface Duo 横用） */ @media screen and (max-width: 720px) { .zoom-up-b{width:100% !important; height:auto; overflow:hidden;}} /* 540px以下に適用されるCSS（Surface Duo 縦用） */ @media screen and (max-width: 540px) { .zoom-up-b{width:100% !important; height:auto; overflow:hidden;}} /* 414px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 414px) { .zoom-up-b{width:100% !important; height:200px; overflow:hidden;}} /* 412px以下に適用されるCSS（Galaxy S20_GalaxyA51/71 縦用） */ @media screen and (max-width: 412px) { .zoom-up-b{width:100% !important; height:200px; overflow:hidden;}} /* 393px以下に適用されるCSS（Pixel5 縦用） */ @media screen and (max-width: 393px) { .zoom-up-b{width:100% !important; height:200px; overflow:hidden;} .zoom-up-b img{margin-top:0px;}} /* 390px以下に適用されるCSS（iPhone12 pro 縦用） */ @media screen and (max-width: 390px) { .zoom-up-b{width:100% !important; height:200px; overflow:hidden;} .zoom-up-b img{margin-top:0px;}} /* 280px以下に適用されるCSS（Galaxy Fold 縦用） */ @media screen and (max-width: 280px) { .zoom-up-b{width:100% !important; height:160px; overflow:hidden;}} .zoom-up-b img:hover{ transform: scale3d(1.1,1.1,1) ; /* hover時の倍率を指定 */ transition:0.5s;} .zoom-up-c{width:100% ; height:auto ; overflow:hidden;} .zoom-up-c img{width:650px !important; transition:0.5s;} /* 1180px以下に適用されるCSS（iPad air 横用） */ @media screen and (max-width: 1180px) { .zoom-up-c{width:100% !important; height:auto; overflow:hidden;} .zoom-up-c img{margin-top:28px;}} /* 1024px以下に適用されるCSS（iPad Mini_Nest Hub 横用） */ @media screen and (max-width: 1024px) { .zoom-up-c{width:100% !important; height:auto; overflow:hidden;} .zoom-up-c img{margin-top:0px;}} /* 915px以下に適用されるCSS（Galaxy S20 横用） */ @media screen and (max-width: 915px) { .zoom-up-c{width:100% !important; height:auto; overflow:hidden;} .zoom-up-c img{margin-top:38px;}} /* 912px以下に適用されるCSS（Surface Pro7 横用） */ @media screen and (max-width: 912px) { .zoom-up-c{width:100% !important; height:auto; overflow:hidden;}} /* 720px以下に適用されるCSS（Surface Duo 横用） */ @media screen and (max-width: 720px) { .zoom-up-c{width:100% !important; height:auto; overflow:hidden;}} /* 540px以下に適用されるCSS（Surface Duo 縦用） */ @media screen and (max-width: 540px) { .zoom-up-c{width:100% !important; height:auto; overflow:hidden;}} /* 414px以下に適用されるCSS（iPhone XR 縦用） */ @media screen and (max-width: 414px) { .zoom-up-c{width:100% !important; height:200px; overflow:hidden;}} /* 412px以下に適用されるCSS（Galaxy S20_GalaxyA51/71 縦用） */ @media screen and (max-width: 412px) { .zoom-up-c{width:100% !important; height:200px; overflow:hidden;}} /* 393px以下に適用されるCSS（Pixel5 縦用） */ @media screen and (max-width: 393px) { .zoom-up-c{width:100% !important; height:200px; overflow:hidden;} .zoom-up-c img{margin-top:0px;}} /* 390px以下に適用されるCSS（iPhone12 pro 縦用） */ @media screen and (max-width: 390px) { .zoom-up-c{width:100% !important; height:200px; overflow:hidden;} .zoom-up-c img{margin-top:0px;}} /* 280px以下に適用されるCSS（Galaxy Fold 縦用） */ @media screen and (max-width: 280px) { .zoom-up-c{width:100% !important; height:160px; overflow:hidden;}} .zoom-up-c img:hover{ transform: scale3d(1.1,1.1,1) ; /* hover時の倍率を指定 */ transition:0.5s;} div.ccm-page .main-wrap h1:after{border-bottom:0px;} div.ccm-page .main-wrap h1{margin-bottom:0px ; margin-top:0px ;} /*Googleマップのマイマップ表示設定 */ .mymap iframe.kenshinmap.i4ewOd-pzNkMb-haAclf{background-color:rgba(46,49,47,0) !important;} .mymap iframe.kenshinmap.HzV7m-b7CEbf.neVct-IlgHgd .i4ewOd-pzNkMb-nK2kYb{display:none !important;} .mymap iframe.kenshinmap.SfQLQb-QClCJf-giiMnc .i4ewOd-pzNkMb-QClCJf-giiMnc-xJzy8c-haAclf{display:none !important;} .mymap iframe.kenshinmap.SfQLQb-dIxMhd-bN97Pc-b3rLgd.SfQLQb-QClCJf-giiMnc.neVct-IlgHgd .i4ewOd-pzNkMb-r4nke{display:none !important;} .mymap iframe.kenshinmap.SfQLQb-fI6EEc .i4ewOd-pzNkMb-fI6EEc{display:none !important;} .mymap iframe.kenshinmap.SfQLQb-dIxMhd-bN97Pc-b3rLgd.SfQLQb-QClCJf-giiMnc.neVct-IlgHgd .dIxMhd-bN97Pc-b3rLgd{display:none !important;} /*Googleマップのレスポンシブ設定 */ .map{ height: 0; overflow: hidden; padding-bottom: 56.25%; position: relative; } .map iframe { position: absolute; left: 0; top: 0; height: 100%; width: 100%; } /*会社情報ページ-たすく会のバナー*/ .tasukukai-banner-a{width:199px !important; height:auto ;} /* 480px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 480px) {.tasukukai-banner-a{width:190px !important;}} /*事業内容ページ-頭の余白調整*/ /* 767px以下に適用されるCSS（Galaxy Fold 縦用） */ @media screen and (max-width: 767px) { .ccm-custom-style-container.ccm-custom-style-main-621{padding-top:50px ; margin-top:50px ; padding-bottom:30px;}} /* 480px以下に適用されるCSS（スマホ用） */ @media screen and (max-width: 480px) { .ccm-custom-style-container.ccm-custom-style-main-1231{padding-top:50px !important;}} /* 画像を徐々に表示-左から右 */ .img-wrap-a{ overflow: hidden; position: relative; } .img-wrap-a::before { animation: img-wrap-a 1.5s cubic-bezier(0.4, 0, 0.2, 1) forwards; background: #fff; content: ''; inset: 0; pointer-events: none; position: absolute; z-index: 1; } @keyframes img-wrap-a { 100% { transform: translateX(100%); } } /* 画像を徐々に表示-右から左 */ .img-wrap-b { overflow: hidden; position: relative; } .img-wrap-b::before { animation: img-wrap-b 2s cubic-bezier(0.4, 0, 0.2, 1) forwards; background: #fff; content: ''; inset: 0; pointer-events: none; position: absolute; z-index: 1; } @keyframes img-wrap-b { 100% { transform: translateX(-100%); } } /* 画像を徐々に表示-中心から外に円 */ .img-wrap-c { animation: img-wrap-c 2s cubic-bezier(0.4, 0, 0.2, 1); } @keyframes img-wrap-c { 0% { clip-path: circle(0 at 50% 50%); -webkit-clip-path: circle(0 at 50% 50%); } 100% { clip-path: circle(100% at 50% 50%); -webkit-clip-path: circle(100% at 50% 50%); } } /* ページネーションのボタンの色 */ .page-item.active .page-link{background-color:#003389 !important; border-color:#003389 !important;} /* ループテキスト */ .loop-wrapper { display: flex; width: 100%; overflow: hidden; margin-top:-12%; } .loop_text { flex: 0 0 auto; white-space: nowrap; font-size: 8em; font-weight:800; overflow: hidden; padding-left: 40px; color: #0089d1; opacity:0.2; } .loop_text:nth-child(odd) { animation: loop 50s -25s linear infinite; } .loop_text:nth-child(even) { animation: loop2 50s linear infinite; } @keyframes loop { 0% { transform: translateX(100%); } to { transform: translateX(-100%); } } @keyframes loop2 { 0% { transform: translateX(0); } to { transform: translateX(-200%); } } .shikaku-waku{border:none !important;} .shikaku-waku td{border:none !important;} .shikaku-waku th{border:none !important;}