/* Theme Name: リスキリングサミット Theme URI: SUMMIT Author: 株式会社KIZASHI Author URI: reskilling-summit.com Description: Donate: 生成AI時代のリスキリングサミットは、企業へのDX・生成AI 促進、リスキリングを推進するためにIT製品やサービス、リスキリングサービスが一同に集まる展示会です。 Tags: リスキリング, 生成AI, サミット Version: 2024.4 Requires at least: 5.2 Tested up to: 6.5 Requires PHP: 7.0 License: GNU General Public License v3 or Later License URI: https://www.gnu.org/licenses/gpl.html Text Domain: リスキリングサミット BlankSlate WordPress Theme 2011-2024 BlankSlate is distributed under the terms of the GNU GPL */ /* reset.css */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; font-family: 'Noto Sans JP', sans-serif; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable="false"])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable="true"]) { -webkit-user-drag: element; } /* common */ html {scroll-behavior: smooth;} :root { --main-primary: #3A34FF; --title-font: 'Roboto', sans-serif; } p {line-height: 2; letter-spacing: 0.8px; color: var(--main-text); word-wrap: break-word;} a {transition: 0.3s ease-in-out;} .btn__wrapper { display: flex; justify-content: flex-end; align-items: center; gap: 30px; } a.primaryBtn { border-radius: 5px; border: 1px solid #ccc; color: #fff; display: flex; width: 270px; height: 55px; padding-bottom: 2px; justify-content: center; align-items: center; letter-spacing: 0px; position: relative; background: var(--main-secondary, linear-gradient(90deg, #FF00E5 0%, #B25CE6 100%)); box-shadow: 0px 2px 12px 0px rgba(58, 52, 255, 0.20); } a.primaryBtn:after { font-family: "Font Awesome 5 Free"; content: "\f1c1"; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-weight: 100; opacity: 0.6; transition: 0.3s ease-in-out; } a.secondaryBtn { border-radius: 5px; border: 1px solid #707070; background: #000; box-shadow: 0px 2px 12px 0px rgba(58, 52, 255, 0.20); color: #fff; display: flex; width: 250px; height: 55px; padding-bottom: 2px; justify-content: center; align-items: center; letter-spacing: 1px; position: relative; cursor: pointer; } a.secondaryBtn:after { font-family: "Font Awesome 5 Free"; content: "\f105"; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); font-weight: 900; opacity: 0.6; transition: 0.3s ease-in-out; } a.primaryBtn:hover, a.secondaryBtn:hover { opacity: 0.8; } a.primaryBtn:hover:after, a.secondaryBtn:hover:after { right: 10px; color: #ffff00; } .heading { display: flex; align-items: center; flex-direction: column; gap: 30px; } .heading h2 { display: flex; flex-direction: column; align-items: center; gap: 25px; color: #fff; font-size: 2.8rem; font-weight: 500; letter-spacing: 2px; } .heading h2 span { font-family: var(--title-font); font-size: 2rem; letter-spacing: 2.4px; color: #ffff00; font-style: italic; } .heading p { color: #fff; font-size: 1.1rem; } .heading.accessver { align-items: flex-start; margin-bottom: -40px; } .heading.accessver h2 { align-items: flex-start; color: #000; } .heading.accessver h2 span { color: var(--main-primary); opacity: 0.6; } @keyframes fadeHeader { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; } } /* スクロールCSS */ .fade-in { opacity: 0; transition-duration: 500ms; transition-property: opacity, transform; } .fade-in-up { transform: translate(0, 50px); } .fade-in-down { transform: translate(0, -50px); } .fade-in-left { transform: translate(-50px, 0); } .fade-in-right { transform: translate(50px, 0); } .scroll-in { opacity: 1; transform: translate(0, 0); } .headFade { animation: fadeHeader 1s ease 0s 1 normal; } .fadeout { animation : fadeOut 1s; animation-fill-mode: both; } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } #container{ opacity: 0;/*はじめは透過0に*/ } /*bodyにpageOnクラスがついたら出現*/ body.pageOn #container{ animation-name:PageAnimeOn; animation-duration:1s; animation-delay: 0.8s; animation-fill-mode:forwards; opacity: 0; } @keyframes PageAnimeOn{ 0% { opacity: 0; } 100% { opacity: 1; } } /* トップに戻るボタン */ a.backToTop { background: var(--main-secondary, linear-gradient(90deg, #FF00E5 0%, #B25CE6 100%)); width: 55px; height: 55px; position: fixed; right: 50px; bottom: 50px; opacity: 0; z-index: 999; border-radius: 9999px; display: inline-block; transition: opacity 0.8s; pointer-events: none; } /* 上三角 */ a.backToTop:before { display: inline-block; color: #FFF; line-height: 1; width: 0.8rem; height: 0.8em; border: 0.2em solid currentColor; border-left: 0; border-bottom: 0; box-sizing: border-box; content: ""; z-index: 1000; opacity: 1; left: 50%; top: 55%; position: absolute; transform: translate(-50%, -50%) rotate(-45deg); } /* hover時 */ a.backToTop:hover { opacity: 0.8 !important; } /* header */ header#header { display: block; position: fixed; top: 0; width: 100%; left: 0; z-index: 10; } .header__inner { display: flex; justify-content: space-between; align-items: center; padding: 12px 2%; position: relative; } a.header__inner--logo { position: relative; } a.header__inner--logo:hover { opacity: 0.7; } header#header .btn__wrapper a { height: 46px; } /* scroll */ .header__inner:before { content: ""; width: 100%; height: 100%; position: absolute; background: rgb(0 14 138 / 36%); left: 0; top: 0; opacity: 0; pointer-events: none; transition: 0.3s ease-in-out; backdrop-filter: blur(20px); } header#header.view .header__inner:before { opacity: 1; } /* mv video */ #mv__video { width: 100vw; height: 100svh; position: fixed; pointer-events: none; top: 0; } #mv__video:before { content: ""; width: 100%; height: 100svh; opacity: 0.75; background: linear-gradient(90deg, #5800FF 0%, #5CE1E6 100%); position: absolute; top: 0; left: 0; } #mv__video video { width: 100vw; height: 100svh; object-fit: cover; pointer-events: none; } /* mv */ section#mv { display: block; position: relative; } .mv__inner { width: 100%; max-width: 1250px; margin: 0 auto; padding: 90px 0; display: flex; flex-direction: column; align-items: center; gap: 30px; } .mv__inner h1 { width: 100%; max-width: 950px; } .mv__inner--sponsored { display: flex; flex-direction: column; gap: 5px; background: #fff; border-radius: 5px; align-items: center; padding: 10px 15px 15px; width: 200px; } .mv__inner--sponsored img { height: 50px; margin-top: 5px; } p.mv__inner--place { color: #fff; font-size: 1.1rem; } p.mv__inner--mv__inner--sponsoredTitle { background: var(--main-primary); color: #fff; font-size: 0.85rem; width: 100%; display: flex; justify-content: center; } p.mv__inner--mv__inner--sponsoredName { font-size: 0.8rem; color: #707070; } .mv__inner .btn__wrapper { padding-top: 10px; } /* about */ section#about { position: relative; background: linear-gradient(180deg, rgba(0, 26, 94, 0.00) 0%, rgba(0, 26, 94, 0.80) 11%, #001A5E 52.5%, rgba(0, 26, 94, 0.80) 83.5%, rgba(0, 26, 94, 0.00) 100%); padding-top: 500px; padding-bottom: 300px; overflow: hidden; } .about__inner { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 220px; } .about__inner .heading { align-items: flex-start; } .about__inner .heading h2 { align-items: flex-start; } .about__inner .heading br { display: block; content: ""; height: 15px; } .about__inner--top { display: flex; flex-direction: column; gap: 70px; position: relative; } .about__inner-graph { display: flex; justify-content: center; } .about__inner-graph img { max-width: 900px; pointer-events: none; } .about__inner--typo { width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); margin-top: -60px; position: relative; } .about__inner--typo img { transform: scale(1.5) translateX(0px); opacity: 0.6; transition: transform 0.3s ease-out; /* アニメーション効果をスムーズに */ will-change: transform; /* パフォーマンス最適化 */ } /* box */ .about__inner--box { border: solid 1px #5DDEE7; border-radius: 5px; margin-top: -70px; position: relative; z-index: 1; display: flex; flex-direction: column; } h3.about__inner--boxHeading { display: flex; text-align: center; background: linear-gradient(90deg, #5800FF 0%, #5CE1E6 100%); height: 60px; justify-content: center; align-items: center; font-size: 1.8rem; color: #fff; letter-spacing: 7px; font-weight: 500; } .about__inner--boxInner { display: flex; flex-direction: column; padding: 40px 50px; gap: 35px; } p.about__inner--boxHeadDesc { color: #fff; } p.about__inner--boxHeadDesc br { content: ""; display: block; height: 12px; } ul.about__inner--boxInnerList { display: flex; flex-direction: row; gap: 45px; justify-content: space-between; } ul.about__inner--boxInnerList li { display: flex; flex-direction: column; gap: 15px; } ul.about__inner--boxInnerList li h4 { display: flex; text-align: center; background: linear-gradient(90deg, #5800FF 0%, #5CE1E6 100%); height: 50px; justify-content: center; align-items: center; font-size: 1.6rem; color: #fff; letter-spacing: 4px; font-weight: 500; } ul.about__inner--boxInnerList li p { font-size: 0.9rem; color: rgb(255, 255, 255, .8); line-height: 2.13; } /* about bottom */ .about__inner--topBottom { width: 100%; max-width: 1075px; margin: 0 auto; display: flex; flex-direction: column; gap: 70px; } .about__inner--topBottomLine { display: inline-flex; justify-content: space-between; flex-wrap: wrap; gap: 50px 70px; } .about__inner--topBottomLineLeft, .about__inner--topBottomLineRight { width: 46%; } .about__inner--topBottomLineLeft { display: flex; flex-direction: column; gap: 45px; } .about__inner--topBottomLineLeft p { color: #fff; line-height: 2.43; } .about__inner--topBottomLineBottom { width: 100%; text-align: center; } .about__inner--topBottomLineBottom h3 { color: #fff; font-size: 1.8rem; font-weight: 500; letter-spacing: 2px; line-height: 1.83; } /* benefit */ .about__inner--middle { display: flex; flex-direction: column; gap: 70px; } ul.about__inner--Point { display: flex; flex-direction: column; gap: 80px; } ul.about__inner--Point li { background: #fff; border-radius: 12px; display: flex; flex-direction: row; align-items: center; justify-content: space-between; overflow: hidden; } .about__inner--PointLeft { width: 700px; padding: 40px 45px; display: flex; flex-direction: column; gap: 2px; } .about__inner--PointRight { width: 600px; } .about__inner--PointRight img { vertical-align: top; } p.pointStep { background: var(--main-secondary, linear-gradient(90deg, #FF00E5 0%, #B25CE6 100%)); font-weight: 500; width: fit-content; font-size: 1.4rem; background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .about__inner--PointLeft h3 { font-size: 2rem; font-weight: 600; letter-spacing: 2px; line-height: 1.83; color: var(--main-primary); } p.pointDesc { color: #313131; } /* visitors */ section#visitors { display: block; position: relative; background: rgb(0,0,0); background: linear-gradient(270deg, rgba(0,0,0,0.6306897759103641) 0%, rgba(2,0,36,1) 100%); } .visitors__inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 140px 0; display: flex; flex-direction: column; gap: 180px; } .visitors__inner--top { display: flex; flex-direction: column; gap: 35px; } ul.visitors__inner--topList { width: 100%; max-width: 700px; margin: 0 auto; display: flex; flex-direction: column; padding: 30px 40px; border: solid 1px rgb(255, 255, 255, 0.4); border-radius: 5px; gap: 10px; } ul.visitors__inner--topList li { position: relative; font-size: 1.1rem; line-height: 1.83; color: #fff; padding-left: 30px; letter-spacing: 1.3px; } ul.visitors__inner--topList li:before { font-family: "Font Awesome 5 Free"; content: "\f00c"; position: absolute; left: 0; top: 0px; font-weight: 900; transition: 0.3s ease-in-out; color: #ffff00; font-size: 1.15rem; } /* visitors middle */ .visitors__inner--middle { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 50px; } ul.support__inner { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 50px; } ul.support__inner li { width: 100%; max-width: 360px; background: #fff; border-radius: 5px; overflow: hidden; display: flex; flex-direction: column; gap: 15px; } .support__inner--heading { background: var(--main-primary); position: relative; display: flex; justify-content: center; align-items: center; height: 120px; padding: 0 25px; } .support__inner--heading h3 { font-size: 1.6rem; color: #fff; font-weight: 500; letter-spacing: 1px; position: relative; line-height: 1.43; text-align: center; } p.support__inner--number { position: absolute; font-size: 3.8rem; font-family: var(--title-font); color: rgb(255, 255, 255, 0.2); left: 25px; } img.supportIcon { width: 120px; margin: 0 auto; } p.supportDesc { padding: 0 35px 25px; } .support__inner--heading h3.supportheadmini { font-size: 1.3rem; } /* flow */ .visitors__inner--flow { display: flex; flex-direction: column; gap: 50px; } .visitors__inner--flow .heading p { text-align: center; } .visitors__inner--flowBtn { display: inline-block; background: rgb(255, 255, 255, .4); width: fit-content; padding: 30px 45px; border-radius: 5px; margin: 0 auto; } .visitors__inner--flowBtn a.primaryBtn { width: 300px; } ul.visitors__inner--flowList { width: 100%; max-width: 900px; display: flex; flex-direction: column; gap: 45px; position: relative; margin: 0 auto; padding-top: 10px; } ul.visitors__inner--flowList li { background: #fff; display: flex; flex-direction: row; border-radius: 5px; padding: 10px 15px; position: relative; gap: 25px; flex-wrap: wrap; } ul.visitors__inner--flowList li:after { content: ""; position: absolute; top: 100%; left: 50%; margin-left: -20px; border: 20px solid transparent; border-top: 20px solid #fff; } ul.visitors__inner--flowList li:last-child:after { content: none; } .visitors__inner--flowListRight { width: 190px; height: auto; display: flex; justify-content: center; align-items: center; background: #f9f9f9; } .visitors__inner--flowListRight img { width: 90px; max-height: 90px; } .visitors__inner--flowListLeft { width: calc(100% - 215px); } .visitors__inner--flowListLeft { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; } p.stepNumber { display: inline-block; width: fit-content; background: linear-gradient(90deg, #5800FF 0%, #5CE1E6 100%); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: 500; font-size: 0.9rem; margin-bottom: -7px; } .visitors__inner--flowListLeft h3 { color: var(--main-primary); font-weight: 600; font-size: 1.8rem; letter-spacing: 1.4px; } p.stepDescription { font-size: 0.9rem; color: #313131; line-height: 1.83; } p.headingAlert { display: flex; justify-content: center; width: 100%; align-items: center; gap: 8px; border: solid 1px #fff; border-radius: 8px; padding: 4px 0 6px; font-size: 1.2rem; } p.headingAlert i { color: #ffff00; } /* guest */ .about__inner--bottom { display: flex; flex-direction: column; gap: 70px; } ul.guest { display: flex; justify-content: center; gap: 55px; flex-wrap: wrap; } ul.guest li { background: #fff; border-radius: 12px; overflow: hidden; width: 340px; position: relative; } .guest__img { width: 100%; background: #f8f8f8; height: 260px; } .guest__img.dummy { display: flex; flex-direction: column; align-items: flex-end; justify-content: end; } .guest__img img { object-fit: cover; height: 260px; width: 100%; vertical-align: top; } .guest__img.dummy img { object-fit: contain; padding-top: 20px; } .guest__name { padding: 12px 25px 22px; display: flex; flex-direction: column; gap: 0; position: relative; } p.guest__name--corp { color: #707070; font-size: 0.8rem; } h3.guest__name--name { font-size: 1.8rem; font-weight: 600; color: var(--main-primary); letter-spacing: 2px; } h3.guest__name--name span { font-size: 1.2rem; padding-left: 4px; } li.comingsoon .guest__name:after { content: "Coming Soon"; position: absolute; background: var(--main-primary); color: #FFF; left: 50%; top: 50%; width: 94%; height: 87%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; font-size: 1.8rem; letter-spacing: 1px; font-family: var(--title-font); font-style: italic; border-radius: 5px; } .accodion_block { position: relative; background: #fff; border-radius: 5px; overflow: hidden; } .accordion { display: flex; line-height: 1.34; border: none; cursor: pointer; font-size: 1.1rem; transition: 0.5s ease-in; position: relative; padding-left: 60px; height: 73px; margin: 0; font-weight: 500; align-items: center; padding-right: 25px; } .accordion:before { content: "Q"; position: absolute; left: 15px; top: 50%; display: inline-block; width: 35px; height: 35px; line-height: 35px; vertical-align: middle; text-align: center; font-family: Arial, sans-serif; font-size: 21px; background: var(--main-primary); color: #fff; border-radius: 50%; transform: translateY(-50%); } .accordion.active { margin-bottom: 0; } .panel{ max-height:0; overflow:hidden; transition: 0.3s ease-out; } .panel p { padding: 10px 20px; margin: 0 0 15px; position:relative; padding-left: 60px; } .panel p:before { content: "A"; position: absolute; left: 15px; display: inline-block; width: 35px; height: 35px; line-height: 35px; vertical-align: middle; text-align: center; font-size: 21px; background: var(--main-secondary, linear-gradient(90deg, #FF00E5 0%, #B25CE6 100%)); color: #fff; border-radius: 50%; } .acco { position: relative; width: 100%; max-width: 700px; margin: 50px auto 0; display: flex; flex-direction: column; gap: 25px; } .accordion:hover{ background-color: #ddd; } .accordion:after { content: '\02795'; font-size: 1rem; color: #777; position: absolute; right: 20px; top: 50%; transform: translateY(-50%); } .accordion.active:after { content: "\2796"; } /* access */ section#access { position: relative; display: block; background: #fff; } .access__inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 140px 0; display: flex; flex-direction: column; gap: 80px; } .access__inner--img { display: flex; justify-content: space-between; align-items: flex-start; } dl.accessList { display: flex; flex-direction: column; gap: 30px; } .accessListInner { display: flex; flex-direction: column; gap: 15px; } dl.accessList dt { background: var(--main-primary); display: inline-flex; width: fit-content; min-width: 160px; justify-content: center; color: #fff; font-size: 0.9rem; padding: 5px 0 7px; border-radius: 3px; } .access__inner--map iframe { width: 100%; } .access__inner--guidance { display: flex; justify-content: space-between; flex-wrap: wrap; } .access__inner--guidance dl.accessList { width: 43%; } img.placemap { width: 52%; height: fit-content; } .access__inner--guidance .accessListInner { gap: 25px; } /* table */ table.accessListInner__table { border: solid 1px #aaa; } table.accessListInner__table tr td:first-child { background: #ddd; width: 140px; text-align: center; vertical-align: middle; border-right: solid 1px #aaa; border-bottom: solid 1px #aaa; height: 90px; } table.accessListInner__table tr td:last-child { text-align: left; vertical-align: middle; border-bottom: solid 1px #aaa; height: 60px; padding: 8px 15px; line-height: 1.93; font-size: 0.9rem; color: #707070; } p.accessListInner__hosoku { font-size: 0.8rem; color: #707070; } a.accessListInner__hosokuLink { color: var(--main-primary); } /* cta */ section.cta { position: relative; background: rgb(0, 0, 0, .12); } .cta__inner { display: flex; flex-direction: column; width: 100%; max-width: 1200px; margin: 0 auto; padding: 90px 0; gap: 35px; align-items: center; } p.cta__inner--catch { text-align: center; color: #fff; font-size: 1.4rem; font-weight: 500; letter-spacing: 2px; } img.cta__inner--title { max-width: 900px; display: inline-block; width: 100%; } p.cta__inner--desc { text-align: center; color: #fff; } /* footer */ footer#footer { position: relative; background: #001A5E; } .footer__inner { width: 100%; max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; } .footer__inner--top { display: flex; justify-content: space-between; align-items: center; padding: 80px 0 70px; } .footer__inner--topLeft { width: 50%; display: flex; flex-direction: column; gap: 30px; } .footer__inner--topLeft p { color: #fff; font-size: 0.8rem; } .footer__inner--topLeftTop { display: flex; flex-direction: column; gap: 5px; position: relative; } .footer__inner--topLeftTop a:hover { opacity: 0.7; } .footer__inner--topLeftTop:after { content: ""; width: 120px; height: 1px; background: rgb(255, 255, 255, 0.3); position: absolute; bottom: -15px; } .footer__inner--topLeftTop p { color: #fff; } .footer__inner--bottom { display: flex; justify-content: center; border-top: solid 1px rgb(255, 255, 255, .3); padding: 10px 0 14px; } .footer__inner--bottom p { color: #fff; font-size: 0.75rem; opacity: 0.4; } /* modal */ .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; visibility: hidden; /* 初期状態では見えないように設定 */ opacity: 0; transition: opacity 0.25s ease; z-index: 9999; } .modal-content { background: white; padding: 20px; border-radius: 4px; position: relative; z-index: 2; max-width: 500px; width: 90%; } .close { position: absolute; top: 10px; right: 15px; font-size: 25px; cursor: pointer; width: 40px; height: 40px; display: flex; justify-content: center; align-items: center; border-radius: 9999px; transition: 0.3s ease-in-out; } .close:hover { background: #eee; } .modal-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); cursor: pointer; } /* モーダル表示時のスタイル */ .modal.show { visibility: visible; opacity: 1; } p.formInfo { text-align: center; font-size: 0.9rem; color: #707070; } /* form */ .modal-content input.wpcf7-form-control, .modal-content textarea.wpcf7-form-control { border-radius: 4px; width: 100%; background: #f9f9f9; padding: 4px 12px; } .modal-content textarea.wpcf7-form-control { height: 140px; } form.wpcf7-form { height: 400px; overflow: scroll; display: flex; flex-direction: column; gap: 10px; } input.wpcf7-form-control.wpcf7-submit { background: var(--main-primary); color: #fff; width: 200px; display: flex; justify-content: center; padding: 7px 0 10px; font-size: 1.1rem; letter-spacing: 3px; } .wpcf7 form .wpcf7-response-output { margin: 0 0 1em; padding: 0.2em 1em; border: 2px solid #00a0d2; font-size: 0.9rem; text-align: center; color: #707070; } img.sp_logo { display: none; } @media screen and (max-width: 1200px) { /* （ここに1200px以下スタイルを記述） */ .about__inner { padding-left: 4%; padding-right: 4%; } .visitors__inner { padding-left: 4%; padding-right: 4%; } ul.support__inner { justify-content: center; } .access__inner { padding-left: 4%; padding-right: 4%; } .footer__inner { padding-left: 4%; padding-right: 4%; } } @media screen and (max-width: 1000px) { /* （ここに1000px以下スタイルを記述） */ .mv__inner { padding-left: 4%; padding-right: 4%; } .about__inner-graph img { width: 100%; } .access__inner--img { gap: 35px; flex-wrap: wrap; } .access__inner--img img { max-width: 500px; } .about__inner--topBottomLine { gap: 60px 30px; } .about__inner--topBottomLineBottom h3 { text-align: left; } .about__inner--topBottomLineBottom h3 br { display: none; } ul.about__inner--Point { flex-direction: row; flex-wrap: wrap; gap: 45px 5%; justify-content: center; } ul.about__inner--Point li { flex-direction: column-reverse; width: 45%; gap: 0; justify-content: flex-end; } .about__inner--PointRight { width: 100%; } .about__inner--PointLeft { width: 100%; padding: 25px 30px; gap: 12px; } .about__inner--PointLeft h3 { line-height: 1.43; } } @media screen and (max-width: 767px) { /* （ここにモバイル用スタイルを記述） */ img.sp_bgmv { width: 100%; object-fit: cover; height: 100svh; } header#header .btn__wrapper { display: none; } .header__inner { justify-content: center; padding-top: 5px; padding-bottom: 2px; } .btn__wrapper { flex-direction: column; } .mv__inner { padding-left: 8%; padding-right: 8%; } .access__inner--img img { width: 100%; } .about__inner--boxInner { padding: 15px 20px; } ul.about__inner--boxInnerList { flex-direction: column; } .about__inner--topBottomLine { flex-direction: column; } .about__inner--topBottomLineLeft, .about__inner--topBottomLineRight { width: 100%; gap: 20px; } ul.about__inner--Point li { width: 100%; } .about__inner--PointLeft { padding-bottom: 35px; padding-top: 15px; } ul.guest li { width: 300px; } ul.visitors__inner--topList { padding: 15px 20px; } ul.visitors__inner--flowList li { flex-direction: column; gap: 10px; } .visitors__inner--flowListRight, .visitors__inner--flowListLeft { width: 100%; } .visitors__inner--flowListRight { height: 150px; } .access__inner--guidance { flex-direction: column; gap: 30px; } .access__inner--guidance dl.accessList { width: 100%; } img.placemap { width: 100%; } .cta__inner { padding-left: 4%; padding-right: 4%; } p.cta__inner--desc { text-align: left; } p.cta__inner--desc br { display: none; } a.secondaryBtn { width: 270px; } .footer__inner--top { padding-top: 30px; padding-bottom: 30px; flex-direction: column; align-items: center; text-align: center; gap: 25px; } .footer__inner--topLeftTop:after { left: 50%; transform: translateX(-50%); } .about__inner { gap: 120px; } .heading h2 { font-size: 2rem; } form.wpcf7-form { height: 580px; } img.pc_logo { display: none; } img.sp_logo { width: 100%; display: block; } a.backToTop { right: 20px; bottom: 20px; } .visitors__inner--flowBtn { width: 100%; display: flex; justify-content: center; padding-top: 20px; padding-bottom: 20px; } }