@charset "utf-8";
/* -----------------------------------------------
   Zen Maru Gothic (Regular)
----------------------------------------------- */
@font-face {
  font-family: 'Zen Maru Gothic';
  src: url('../fonts/ZenMaruGothic-Medium.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap; 
}
/* -----------------------------------------------
   Zen Maru Gothic (Bold)
----------------------------------------------- */
@font-face {
  font-family: 'Zen Maru Gothic';
  src: url('../fonts/ZenMaruGothic-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* -----------------------------------------------
   Audiowide
----------------------------------------------- */
@font-face {
  font-family: 'Audiowide';
  src: url('../fonts/Audiowide-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
:root {
    /* --- ブランドカラー --- */
    --color-text:   #4d4d65;
    --color-dark: #232341;
    --color-blue: #3cb4e1;
    --color-lblue: #acd9f6;
    --color-navy: #232341;
    --color-lnavy:#4d4d65;
    --color-white: #ffffff;
    --color-gray:  #e6e6e9;
    --color-yellow: #ffe54f;
    --radius: 10px;
    --shadow: 0 0px 5px rgba(0, 0, 0, 0.3);
    --shadow-yellow: 0 5px 0 rgba(255, 229, 79, 1.0);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-appearance: none;-webkit-text-size-adjust: 100%;}
*:before, *:after {box-sizing: border-box;}
html, body, div, object, iframe,h1, h2, h3, h4, h5, p, blockquote, pre,em, img, strong,b,dl, dt, dd, ol, ul, li,fieldset, form, label, table, caption, tbody, tfoot, thead, tr, th, td,canvas, details,figure,footer, header, hgroup, menu, nav, section, summary,mark, audio, video {margin:0;padding:0;border:0;outline:0;vertical-align: baseline;background: transparent;font-weight: normal;font-style: normal;}
img{max-width: 100%;height:auto;vertical-align: middle;}
ul {list-style: none;}
a {color: #232341;vertical-align:baseline;background:transparent;text-decoration: none;}
a:hover{transition-property: all;transition: 0.2s linear;opacity: 0.8;}
a[href^="tel:"] {pointer-events: none;}

/* 共通 */
html, body {overflow-x: hidden;}
body {position:relative;font-feature-settings: "palt";font-family:"Zen Maru Gothic", "Hiragino Sans", sans-serif;font-weight: 400; color: var(--color-text);line-height: 2.2;font-size:clamp(14px,calc(18/1440*100vw),18px);}
.inner-1440{width:93%;max-width:1440px;padding:clamp(50px,calc(150/1440*100vw),150px) 0; margin:auto;}
.inner-1200{width:93%;max-width:1200px;padding:clamp(50px,calc(150/1200*100vw),150px) 0; margin:auto;}
.w1440{width:93%;max-width:1440px; margin:auto;}
/*余白*/
.mb30{margin-bottom: clamp(20px,calc(30/1440*100vw),30px);}
.mb40{margin-bottom: clamp(20px,calc(40/1440*100vw),40px);}
.mb60{margin-bottom: clamp(30px,calc(60/1440*100vw),60px);}
.mb90{margin-bottom: clamp(45px,calc(90/1440*100vw),90px);}
.mb130{margin-bottom: clamp(50px,calc(130/1440*100vw),130px);}
.pd40{padding:clamp(15px,calc(40/1440*100vw),40px);}
/*テキスト　サイズ・カラー・*/
.fs16{font-size:clamp(14px,calc(16/768*100vw),16px)!important;}
.fs20{font-size:clamp(16px,calc(20/1440*100vw),20px)!important;}
.fs22{font-size:clamp(16px,calc(22/1440*100vw),22px)!important;}/*最小16*/
.fs26{font-size:clamp(18px,calc(26/1440*100vw),26px)!important;}/*最小20*/
.fs30{font-size:clamp(20px,calc(30/1440*100vw),30px)!important;}/*最小22*/
.fs32{font-size:clamp(20px,calc(32/1440*100vw),32px);}
.fs46{font-size:clamp(22px,calc(46/1440*100vw),46px);}
.fs58{font-size:clamp(22px,calc(58/1440*100vw),58px);}
.fcdark{color: var(--color-dark) !important;}
.fcblue{color: var(--color-blue) !important;}
.fcwhite{color:var(--color-white) !important;}
/*テキスト装飾*/
.lh13{line-height:1.6;}
.center,.center_l{text-align: center;}
.left{text-align:left;}
.wb{font-weight:700;}
.marker {background: linear-gradient(transparent 50%, var(--color-yellow) 0%);}/*マーカー装飾 */
.text-dot{-webkit-text-emphasis: filled dot #ffe54f; text-emphasis: filled dot #ffe54f; -webkit-text-emphasis-position: over; text-emphasis-position: over;}/* 圏点装飾 */
.shadow{text-shadow: 3px 3px 0px rgba(0,0,0,0.3);}/*テキストシャドウ*/
.sp_on{display:none !important;}
/*背景色*/
.bgblue{background:var(--color-blue);}
.bglblue{background:var(--color-lblue);}
.bgg{background:var(--color-gray);}
.bgw{background:var(--color-white);}
.bgn {background: #4d4d65;}
.radius10{border-radius:10px; }
.flexbox,.flex-center{display:flex; flex-wrap:wrap; row-gap:clamp(20px, calc(40/1440*100vw), 40px);}
.flex-center{flex-wrap:wrap; justify-content:center;}

.wave-blue,
.wave-lblue,
.wave-gray,
.wave-white,
.wave-navy {
    position: relative;
}
/*青波背景*/
.wave-blue::after,
.wave-lblue::after,
.wave-gray::after,
.wave-white::after,
.wave-navy::after {
    content: "";
    position: absolute;
    left: 0;
    top: 100%;
    width: 100%;
    aspect-ratio: 1920 / 90;
    background: url("../images/bg-wave.svg") no-repeat top / 100% 100%;
    margin-top: -2px;
	z-index: 50;
}
/*水色波背景*/
.wave-lblue::after{
    background-color:var(--color-lblue);
    -webkit-mask:url("../images/bg-wave.svg") no-repeat top / 100% 100%;
    mask:url("../images/bg-wave.svg") no-repeat top / 100% 100%;
    background-image:none;
}
/*グレーの波（背景 #e6e6e9）*/
.wave-gray::after{
    background-color:var(--color-gray);
    -webkit-mask:url("../images/bg-wave.svg") no-repeat top / 100% 100%;
    mask:url("../images/bg-wave.svg") no-repeat top / 100% 100%;
    background-image:none;
}
/*白の波*/
.wave-white::after{
    background-color:#ffffff;
    -webkit-mask:url("../images/bg-wave.svg") no-repeat top / 100% 100%;
    mask:url("../images/bg-wave.svg") no-repeat top / 100% 100%;
    background-image:none;
}
/*ネイビー（背景 #4d4d65）*/
.wave-navy::after{
    background-color:#4d4d65;
    -webkit-mask:url("../images/bg-wave.svg") no-repeat top / 100% 100%;
    mask:url("../images/bg-wave.svg") no-repeat top / 100% 100%;
    background-image:none;
}
/*箇条書き*/

/*見出し*/
h2,h3,h4{font-weight: 700;}
.deco{
    display:flex;
    justify-content:center;
    align-items:center;
    text-align: center;
    gap:1%;
    width:90%;
    margin-left: auto;
    margin-right:auto;
}
.deco::before,
.deco::after{
    display:block;
    content:"";
    width:4%;
    aspect-ratio:49/64.1;
    background:url("../images/h2-deco.svg") no-repeat center / contain;
}
.deco::after{transform:translateX(0) scaleX(-1);}
@media only screen and (max-width:450px){
    .deco{width:90%;}
    .deco::before,.deco::after{display:none;}
}

/*ボタン*/
.btn-blue,.btn-navy{
    position: relative;
    display:flex;
    justify-content: center;
    align-items:center;
    gap:clamp(10px, calc(14/1440*100vw), 14px);
    background:var(--color-blue);
    color:var(--color-white);
    font-weight:700;
    text-shadow: 0 2px 0 #005aae;
    padding:clamp(14px, calc(18/1440*100vw), 18px) clamp(28px, calc(40/1440*100vw), 40px);
    border-radius:var(--radius);
    box-shadow:0 5px 0 rgba(0, 90, 174, 1.0);
    width:clamp(250px,calc(400/1440*100vw),400px);
    margin-left: auto;
    margin-right: auto;
	transition: opacity 0.5s ease !important;
}
.btn-blue:hover,.btn-navy:hover{
	opacity: 0.6 !important;
}
.btn-blue::after,.btn-navy::after{
    position:absolute;
    right:10%;
    content:"";
    display:block;
    width:clamp(10px, calc(14/1440*100vw), 14px);
    aspect-ratio:21.47/12.23;
    background:url("../images/arrow.svg") no-repeat center / contain;
    transform:rotate(90deg);
}
/*紺色ボタン*/
.btn-navy{
    background:var(--color-lnavy);
    color:var(--color-white);
    box-shadow:0 2px 0 rgba(0, 90, 174, 1.0);
    padding:clamp(6px, calc(10/1440*100vw), 10px) clamp(28px, calc(40/1440*100vw), 40px);
    box-shadow:var(--shadow-yellow);
}


/* ヘッダー
------------------------------------------------------------*/
header{height:100px;background: #FFF;box-shadow:var(--shadow);position:relative;z-index:100;}
h1{font-size:14px;padding-left:clamp(5px,calc(16/1440*100vw),16px);}
img.logo{display: block; margin:auto;}

/*フッター
------------------------------------------------------------*/
footer{background:var(--color-dark); text-align: center;padding:clamp(10px,calc(20/1440*100vw),20px) 0;}

/* ナビゲーション
------------------------------------------------------------*/
#navigation {
    display: flex;
    position: fixed;
    top: 0;
    left: 0;
    height: 60px;
    width: 100%;
    border-radius: 0 0 10px 10px;
    font-size: clamp(18px, calc(20 / 1500 * 100vw), 20px);
    transition: transform 0.3s ease-out;
    z-index: 999;
    pointer-events: none;
}
#navigation .hamburger-button {pointer-events: auto;}
#navigation .drawer-nav {pointer-events: auto;}
.hamburger-input {display: none;}
.hamburger-mark {
    position: absolute;
    top:50%;
    left:50%;
    background-color: #fff; /* カスタム */
    display: block;
    height: 2px; /* カスタム */
    border-radius: 2px;
    transition: 0.3s; /* カスタム */
    transform-origin: center;
    width: calc(var(--btn-size) * 0.32); /* カスタム */
    transform: translate(-50%, -50%) translateY(var(--line-offset, 0px));
}
.hamburger-mark:nth-of-type(1){--line-offset: calc(-1 * (var(--line-gap) + 2px));}
.hamburger-mark:nth-of-type(3){--line-offset: calc(var(--line-gap) + 2px);}
.drawer-nav {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 400px;
    max-width: 100%;
    height: 100%;
    margin: 0;
    padding: 100px 0 40px;
    display: flex;
    flex-direction: column;
    border: none;
    background: var(--color-dark);
    /* 閉じた状態 */
    transform: translateX(100%);
    /* ★ここが重要 */
    transition: transform 0.5s ease;
    z-index: 998;
}
#hamburger:checked ~ .drawer-nav {
    transform: translateX(0);
}
.hamburger-button {
    position: fixed;
    --btn-top: clamp(20px,calc(30/1440*100vw),30px);
    --btn-right: clamp(10px,calc(30/1440*100vw),30px);
    top:var(--btn-top);
    right:var(--btn-right);
    --btn-size: clamp(60px, calc(100/1440*100vw), 100px);
    --line-gap: clamp(5px, calc(8/1440*100vw), 8px);
    background-color: var(--color-dark); /* カスタム */
    display: block;
    height: var(--btn-size);
    width: var(--btn-size);
    border-radius: 50%;
    z-index: 999;
    cursor:pointer;
	 transition: background-color 0.5s ease;
}
.hamburger-button:hover {
	background-color: var(--color-text);
}
.hamburger-button span:last-child {position:fixed;top:4px; right:calc(var(--btn-right) + var(--btn-size) / 2); transform: translateX(50%);font-size:clamp(16px, calc(22/1440*100vw), 22px);font-family: "Audiowide";line-height:1;white-space: nowrap;z-index: 999;}
#hamburger:checked ~ .hamburger-button{z-index: 9999;}
#hamburger:checked	~ .hamburger-button	.hamburger-mark:nth-of-type(1) {transform:translate(-50%, -50%) rotate(45deg);}
#hamburger:checked ~ .hamburger-button .hamburger-mark:nth-of-type(2) {opacity: 0;}
#hamburger:checked ~ .hamburger-button .hamburger-mark:nth-of-type(3) {transform:translate(-50%, -50%) rotate(-45deg);}
#hamburger:checked ~ .hamburger-button span:last-child{display:none;}

/*開閉パネル*/
.drawer-nav > li{width:85%;margin:0 auto;background:transparent;border-bottom: 1px solid rgba(255,255,255,0.15);}
.drawer-nav > li  > a{display:block; padding:16px 10px;color:var(--color-white);text-align: center;transition:color 0.2s;}/*子階層*/
.drawer-nav > li  > a:hover{color:var(--color-blue);opacity:1;}
.drawer-nav >li:last-child{background:none;border-bottom:none;margin-top:30px;}
.drawer-nav >li:last-child > a{display:block;background:var(--color-blue);color:var(--color-white);border-radius:10px;padding:12px 40px;transition: background-color 0.5s ease;}
.drawer-nav >li:last-child > a:hover{background:var(--color-text);}

/* サイド固定ボタン
------------------------------------------------------------*/
#sidebtn{
    position:fixed;
    bottom:10%;
    right:0;
    z-index:900;
    display:flex;
    flex-direction:column;
    align-items:flex-end;
    opacity:0;
    pointer-events:none;
    transition:opacity 0.3s;
}
#sidebtn.visible{opacity:1; pointer-events:auto;}
.sidebtn-contact{position:relative;}
.sidebtn-contact a{
    position:relative;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:clamp(6px, calc(10/1440*100vw), 10px);
    background:var(--color-blue);
    color:var(--color-white);
	border: 2px solid #fff;
	border-bottom: 1px solid #fff;
	width:clamp(44px, calc(66/1440*100vw), 66px);
    padding:clamp(14px, calc(20/1440*100vw), 20px) clamp(8px, calc(12/1440*100vw), 12px);
    border-radius:clamp(10px, calc(16/1440*100vw), 16px) 0 0 0;
    font-size:clamp(13px, calc(15/1440*100vw), 15px);
    letter-spacing:0.1em;
    box-shadow:var(--shadow);
	transition: background-color 0.3s ease;
}
.sidebtn-contact a:hover{
	background:var(--color-dark);
	opacity: 1.0;
}
/* 装飾用アイコン（意味を持たないため疑似要素で表示） */
.sidebtn-contact a::before{
    content:"";
    position:absolute;
    top:clamp(-25px, calc(-52/1440*100vw), -20px);
    left:50%;
    transform:translateX(-50%);
    width:clamp(24px, calc(38/1440*100vw), 38px);
    aspect-ratio:45/23;
    background:url("../images/contact-icon.webp") no-repeat center / contain;
}
.sidebtn-contact a::after{
    content:"";
    order:-1;
    width:clamp(18px, calc(24/1440*100vw), 24px);
    aspect-ratio:24/21;
    background:url("../images/icon-mail.svg") no-repeat center / contain;
}
.sidebtn-contact span{writing-mode:vertical-rl;}
#pagetop a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:clamp(44px, calc(66/1440*100vw), 66px);
    height:clamp(44px, calc(40/1440*100vw), 40px);
    background:var(--color-navy);
	border: 2px solid #fff;
	border-top: 1px solid #fff;
	border-radius:0 0 0 clamp(10px, calc(16/1440*100vw), 16px);
    box-shadow:var(--shadow);
}
#pagetop a:hover{
	background:var(--color-text);
	opacity: 1.0;
}
#pagetop img{width:40%;}


/* 1024px以下から
------------------------------------------------------------*/
@media only screen and (max-width:1024px){
	/* 共通 	------------------------------------------*/
	a[href^="tel:"] {pointer-events: auto;}
    /* フッター	--------------------------------------*/
    footer .copyright{font-size: 14px;}

}
/* 768px以下から
------------------------------------------------------------*/
@media only screen and (max-width:768px){
    footer{background-position: top 0px right 30%;}
	.center_l{text-align: left;}
    .shadow{text-shadow: 2px 2px 0px rgba(0,0,0,0.3);}/*テキストシャドウ*/

    /* サイド固定ボタン（スマホ）--------------------------------*/
    #sidebtn{bottom:15px; transform:none; gap:10px;}
    .sidebtn-contact a{padding:12px 10px; border-radius: 5px;border: 2px solid #fff;}
    .sidebtn-contact span{display:none;}
    .sidebtn-contact a::before{display:none;}
    .sidebtn-contact a::after{width:18px;}
    #pagetop a{width:44px;height:44px;border-radius: 5px;border: 2px solid #fff;}
}
    
/* 450px以下から
------------------------------------------------------------*/
@media only screen and (max-width:450px){
	h1{margin-right:65px;white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
    img.logo{width:100px;padding-top:10px;}
    #hamburger:checked ~ ul.drawer-nav {width:100%;}
    .drawer-nav{overflow-y: scroll; -webkit-overflow-scrolling: touch;}
	/* 共通 */
	.sp_on{display: inherit !important;}
	.sp_non{display: none !important;}

}