@charset "UTF-8";
/* CSS Document */

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Zen+Old+Mincho&display=swap');
@import url("../plugins/bootstrap/font/bootstrap-icons.css");

/*---------------------------------------------
	reset css
  ---------------------------------------------*/
/* CSS Document */ 

/*!
 * ress.css • v5.0.0
 * MIT License
 * github.com/filipelinhares/ress
 */
/* resset.dev • v5.0.2 */

html {
  -webkit-text-size-adjust: 100%;
  box-sizing: border-box;
  -moz-tab-size: 4;
  tab-size: 4;
  word-break: normal
}
*, :after, :before {
  background-repeat: no-repeat;
  box-sizing: inherit
}
:after, :before {
  text-decoration: inherit;
  vertical-align: inherit
}
* {
  margin: 0;
  padding: 0
}
hr {
  color: inherit;
  height: 0;
  overflow: visible
}
details, main {display: block}
summary {display: list-item}
small {font-size: 80%}
[hidden] {display: none}
abbr[title] {
  border-bottom: none;
  text-decoration: underline;
  text-decoration: underline dotted
}
a {background-color: transparent}
a:active, a:hover {outline-width: 0}
code, kbd, pre, samp {font-family: monospace, monospace}
pre {font-size: 1em}
b, strong {font-weight: bolder}
sub, sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline
}
sub {bottom: -.25em}
sup {top: -.5em}
table {
  border-color: inherit;
  text-indent: 0;
}
iframe {border-style: none}
input {border-radius: 0}
[type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button {height: auto}
[type=search] {
  -webkit-appearance: textfield;
  outline-offset: -2px
}
[type=search]::-webkit-search-decoration {-webkit-appearance: none}
textarea {
  overflow: auto;
  resize: vertical
}
button, input, optgroup, select, textarea {font: inherit}
optgroup {font-weight: 700}
button {overflow: visible}
button, select {text-transform: none}
[role=button], [type=button], [type=reset], [type=submit], button {cursor: pointer}
[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button::-moz-focus-inner {
  border-style: none;
  padding: 0
}
[type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner, button:-moz-focusring {outline: 1px dotted ButtonText}
[type=reset], [type=submit], button, html [type=button] {-webkit-appearance: button}
button, input, select, textarea {
  background-color: transparent;
  border-style: none
}
a:focus, button:focus, input:focus, select:focus, textarea:focus {outline-width: 0}
select {
  -moz-appearance: none;
  -webkit-appearance: none
}
select::-ms-expand {display: none}
select::-ms-value {color: currentColor}
legend {
  border: 0;
  color: inherit;
  display: table;
  max-width: 100%;
  white-space: normal
}
::-webkit-file-upload-button {
  -webkit-appearance: button;
  color: inherit;
  font: inherit
}
[disabled] {cursor: default}
img {border-style: none}
progress {vertical-align: baseline}
[aria-busy=true] {cursor: progress}
[aria-controls] {cursor: pointer}
[aria-disabled=true] {cursor: default}

    
/*---------------------------------------------
	汎用
  ---------------------------------------------*/
:root {
  --width-max: 1120px;
  --blue: #2390b8;
  --blue-light: #40bccb;    
  --yellow: #eec027;  
  --yellow-light: #FFFDEE;  
  --green: #459e37;    
  --red: #DF0000;      
  --beige: #F8F7F1;    
  --base-font-size: clamp(0.938rem, 0.912rem + 0.12vw, 1rem); /* 基本文字 min350-max1200：最小15px 最大16px */
  --font-size-4xl: clamp(2rem, 1.846rem + 0.71vw, 2.375rem); /* 最小32px  最大38px */
  --font-size-3xl: clamp(1.875rem, 1.746rem + 0.59vw, 2.188rem); /* 最小30px  最大35px */
  --font-size-2xl: clamp(1.375rem, 1.221rem + 0.71vw, 1.75rem); /* 最小22px  最大28px */
  --font-size-xl: clamp(1.25rem, 1.147rem + 0.47vw, 1.5rem); /* 最小20px  最大24px */
  --font-size-l: clamp(1.125rem, 1.022rem + 0.47vw, 1.375rem); /* 最小18px  最大22px */
  --font-size-m: clamp(1.063rem, 0.985rem + 0.35vw, 1.25rem); /* 最小17px  最大20px */
  --font-size-s: 15px;
  --font-size-xs: 14px; 
  --font-num: "Roboto", sans-serif;  
  --font-mincho: "Zen Old Mincho", serif;  
  --line-height: 1.8;
  --line-height-s: 1.4;    
  --transition: all 0.3s ease;
}

html{
    scroll-behavior: smooth;
    scroll-padding-top: 60px;
    background-color: var(--yellow-light)}
body {
    font-family: "Zen Kaku Gothic New", sans-serif;
    line-height: var(--line-height);
    text-align: justify;
    text-justify: inter-ideograph;
	font-feature-settings:"palt";
}
body p, body li, body table, dt, dd{ font-size: var(--base-font-size); }
li{list-style:none;}
table {border-collapse:collapse;}
@media (width <= 768px) {
body p, body li, body table, dt, dd{ font-size: 16px; }    
}

a {text-decoration: none; transition: var(--transition);}
a:link {color: #000000; transition: var(--transition);}
a:visited {color: #000000;}
a:hover {color: #000000; transition: var(--transition); }
a:active { color: #000000; }
img{width: 100%}

.mt-0 { margin-top: 0px !important; }
.mt-5 { margin-top: 5px !important; }
.mt-10 { margin-top: 10px !important; }
.mt-20 { margin-top: 20px !important; }
.mt-30 { margin-top: 30px !important; }
.mt-40 { margin-top: 40px !important; }
.mt-50 { margin-top: 50px !important; }
.mt-80 { margin-top: 80px !important; }
.mt-100 { margin-top: 100px !important; }
.mb-0 { margin-bottom: 0px !important; }
.mb-5 { margin-bottom: 5px !important; }
.mb-10 { margin-bottom: 10px !important; }
.mb-20 { margin-bottom: 20px !important; }
.mb-30 { margin-bottom: 20px !important; }
.mb-50 { margin-bottom: 50px !important; }
.mb-100 { margin-bottom: 100px !important; }
.ml-10 { margin-left: 10px !important; }
.ml-20 { margin-left: 20px !important; }
.mr-10 { margin-right: 10px !important; }
.mr-20 { margin-right: 20px !important; }
.ml-mr-5 { margin-left: 5px !important; margin-right: 5px !important; }
.ml-mr-10 { margin-left: 10px !important; margin-right: 10px !important; }
.ml-mr-20 { margin-left: 20px !important; margin-right: 20px !important; }
.ml-mr-50 { margin-left: 50px !important; margin-right: 50px !important; }
.margin-auto{ margin-left: auto !important; margin-right: auto !important;}
.pt-0 { padding-top: 0px !important; }
.pt-10 { padding-top: 10px !important; }
.pt-20 { padding-top: 20px !important; }
.pt-30 { padding-top: 30px !important; }
.pt-50 { padding-top: 50px !important; }
.pb-0 { padding-bottom: 0px !important; }
.pb-10 { padding-bottom: 10px !important; }
.pb-30 { padding-bottom: 30px !important; }
.pb-50 { padding-bottom: 50px !important; }
.pl-0 { padding-left: 0px !important; }
.pl-10 { padding-left: 10px !important; }
.pr-10 { padding-right: 10px !important; }
.plr-10 { padding-left: 10px !important;padding-right: 10px !important; }

.margin-auto{
    margin-left: auto !important;
    margin-right: auto !important
}

.width-auto { width: auto !important; }
.width-5em { width: 5em !important; }
.width-10em { width: 10em !important; }
.width-15em { width: 15em !important; }
.width-100per{width: 100% !important}

/* text */
.txt-bold{font-weight: bold !important;}
.txt-right {text-align: right !important;}
.txt-left {text-align: left !important;}
.txt-center {
	text-align: center !important;
	margin-left: auto;
	margin-right: auto;
}
.txt-center__pc {text-align: center !important;}
.txt-caption,
.txt-caption li,
li.text-caption{
	font-size: var(--font-size-xs);
	line-height: var(--line-height-s)
}
.txt-indent, li.txt-indent {
    padding-left: 1.2em;
    text-indent: -1.2em;
    line-height: 1.6
}
.line-height-s{line-height: var(--line-height-s)}

.txt-red{color: var(--red) !important}
.txt-yl{color: #FFF900 !important}
.txt-nowrap{white-space: nowrap !important}

.txt-number{font-family: var(--font-num)}
@media screen and (max-width: 768px){
.txt-center__pc {text-align: left !important;}    
}

/* flexbox */
.flex,
.flex-left,
.flex-right,
.flex-center{
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;}
.flex-left{justify-content: flex-start !important;}
.flex-right{justify-content: flex-end !important;}
.flex-center{justify-content: center !important;}
.flex-align-center{align-items: center !important;}
.flex-align-stretch{align-items: stretch !important;}
.flex-align-end {align-items: flex-end !important;}
.flex-all{flex: 1 0 100%}
.flex-gap-20{gap:20px}
.flex-gap-30{gap:30px}
.flex-gap-15_30{gap: 15px 30px}
.flex-gap-0_30{gap: 0px 30px}
.flex-gap-50{gap:30px 50px}
.flex-gap-80{gap:30px 80px}


/* -----------------------------------
   Clear Fix
 * ----------------------------------- */
.clearfix:after,
.clearfix:before{
  content: "";
  display: block;
  clear: both;
} 
.clearfix {display: block;}

/* -----------------------------------
   フォーム
 * ----------------------------------- */
input,
select,
label {vertical-align: baseline;}

/* -----------------------------------
   PC/SP 表示切り替え
 * ----------------------------------- */
.pc{display: block !important}
.sp{display: none !important}
.block-wide {width: 90% !important;}
.block-medium {width: 65% !important;}
.block-half {width: 48.5% !important}
.block-small {width: 33.3333% !important}
@media (width <= 768px) {
.pc{display: none !important}
.sp{display: block !important}    
.block-wide,
.block-medium,
.block-half,
.block-small{width: 100% !important}    
}

.block{display: block !important}
.inline-block{display: inline-block!important}

/* -----------------------------------
   ヘッダー
 * ----------------------------------- */
header{
    background-color: #ffffff;
    display: flex;
    align-items: center;
}
header:not(#index header){
    height: 60px;
} 
#h1 a{
    display: block;
    max-width: 180px;
    padding-left: 10px;
    line-height: 0
} 
.menu-wrapper {position: relative;}

/* ハンバーガー*/
.menu-icon {
    width: 50px;
    height: 50px;
    position: fixed;
    top: 0px;
    right: 0px;
    cursor: pointer;
    z-index: 3;
    display: inline-block;
    padding: 10px
}
/*header.fixed .menu-icon {background-color: rgba(255,255,255,.85);}*/
.menu-icon span {
    display: block;
    height: 4px;
    margin: 3px 0 6px;
    background: #000000;
    border-radius: 2px;
    transition: var(--transition);
} 
#menu-toggle:checked + .menu-icon span{background: #ffffff;}   
#menu-toggle:checked + .menu-icon{background-color: var(--blue-light);}
#menu-toggle:checked + .menu-icon span:nth-child(1) {
  transform: translateY(10px) rotate(45deg);
}
#menu-toggle:checked + .menu-icon span:nth-child(2) {
  opacity: 0;
}
#menu-toggle:checked + .menu-icon span:nth-child(3) {
  transform: translateY(-10px) rotate(-45deg);
}

/* オーバーレイ背景 */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  opacity: 0;
  pointer-events: none;
  transition: 0.4s;
  z-index: 1;
}
#menu-toggle:checked ~ .overlay {
  opacity: 1;
  pointer-events: auto;
}

/* メニュー本体*/
 .menu {
  position: fixed;
  top: 0;
  right: -480px;
  width: 400px;
  height: 100%;
  background: var(--blue-light);
  transition: right 0.4s ease;
  z-index: 2;
    transform:skewX(7deg);
}
header.fixed .menu {}
#menu-toggle:checked ~ .menu {right: -80px;}
.menu > *{transform:skewX(-7deg);}
.menu ul {
    padding: 1rem 1rem 1rem 3rem
}
.menu li {margin: 20px 0;}
.menu a {
    color: #ffffff;
    font-weight: 500;
    display: block;
    transition: var(--transition);}
.menu li.active a,
.menu li a:hover {

}
@media (width <= 768px) {    
header{height: 50px;} 
#h1 a{max-width: 150px;}    
.menu {
    right: -500px;
    width: 360px;}   
#menu-toggle:checked ~ .menu {right: -110px;}   
}

/* -----------------------------------
   カラム
 * ----------------------------------- */
main{padding-bottom: 5rem}
.container-main,
.container-1000px,
.container-900px,
.container-800px,
.container-700px{
    max-width: var(--width-max);
    width: 100%;
    margin: auto;
    padding-left: 20px;
    padding-right: 20px;
}
.container-1000px{max-width: 1000px}
.container-900px{max-width: 900px}
.container-800px{max-width: 800px}
.container-700px{max-width: 700px}
#wrapper{
    padding-bottom: 3rem;
    background-color: #ffffff;
}
.bg-yl{background-color:var(--yellow);}
.bg-bl{background-color: var(--blue-light)}
@media (width <= 768px) {    
   
}

#hero{position: relative}
#hero-img{
    min-height: 450px;
    background-size: cover;
    background-position: center;
}
#hero #logo{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
#hero #logo img{filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, 0.7)); }
@media (width <= 768px) {
#hero-img{ min-height: 250px;}  
}


/* -----------------------------------
   見出し
 * ----------------------------------- */
.ttl{
    font-weight: 500;
    line-height: var(--line-height-s);
}
h2.ttl{
    font-size: var(--font-size-xl);
    text-align: center;
    margin-bottom: 3rem;
}
h3.ttl{
    color: var(--blue);
    text-align: left;
    margin-top: 2rem;
    margin-bottom: .35rem;
    padding-bottom: .15rem;
    border-bottom: 1px solid rgba(35,144,184,.3)    
}


.txt-2xl{font-size: var(--font-size-2xl)}
.txt-xl{font-size: var(--font-size-xl)}
.txt-l{font-size: var(--font-size-l)}
.txt-small{font-size: 75%}
.txt-14px{font-size: 14px !important}
.txt-bold{font-weight: 700}
.txt-lineheight-s{line-height: var(--line-height-s)}

/* -----------------------------------
   カラム
 * ----------------------------------- */
article{margin-top: 2rem}
.box{
    border: 3px solid rgba(35,144,184,.3);
    padding: 0.85rem 1rem;
    text-align: center;
    margin-top: 1rem;
    margin-bottom: 1rem;
    background-color: #f5f9ff;
}
.box strong{
    font-weight: 700;
    font-size: 140%;
    color: var(--blue)
}



/* -----------------------------------
   リスト
 * ----------------------------------- */
article dt{font-weight: 900}
article dd{margin-bottom: 1rem}
@media (width <= 768px) { 

}



/* -----------------------------------
   ボタン・リンク
 * ----------------------------------- */
.container-btn{
    margin-top: calc(50px + 2vw);
    margin-bottom: calc(50px + 2vw);
}
a.btn {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    max-width: 280px;
    min-height: 60px;
    margin-inline: auto;
    border: 2px solid var(--blue);
    background-color: var(--blue);
    color: #ffffff;
    transition: var(--transition);
    font-weight: 500;
    border-radius: 6px;
    font-size: var(--font-size-m);
    line-height: var(--line-height-s);
    padding: 0.5rem 1rem;
}

a.btn:hover{
    background-color: var(--yellow);
    color: var(--blue);
    border-radius: 0px;
    background-color: #ffffff;
}
a.btn::after {
    font-family: "bootstrap-icons";
    content: "\f232"; 
    transition: var(--transition);
}
a.btn:hover::after {
    margin-right: -.4rem;
  transition: var(--transition);
}
a.btn_yl{
    background-color: var(--yellow);
    border: 2px solid var(--yellow);
    color: #000000 !important
}
a.btn_wh{
    background-color: #ffffff;
    border: 2px solid #ffffff;
    color: #000000 !important
}
@media (width <= 768px) {
   
}

/* リンク */
a.txt-link{color: var(--blue);}
a.txt-link:after,
a.txt-link:after,
a.__external:after{
    font-family: "bootstrap-icons";
    content: "\f285";
    padding-left: 5px;
    padding-right: 5px;
    vertical-align: text-top;
}
a.__external:after{content: "\f1c5";}
a.icon-download:after{
    content: "";
    mask-image: url(../images/common/icon-download.svg);
    mask-repeat: no-repeat;
    mask-size: 18px auto;
    mask-position: right bottom;
    background: #000000;
    width: 30px;
    height: 25px;
    display: inline-block;
    padding-right: 2rem;
}
a.icon-download:hover {
    background: #fff;
    color: var(--yellow);
}
a.icon-download:hover:after {background: var(--yellow);}

a.icon-pdf:after{
    font-family: "bootstrap-icons";
    content: "\F63D"; 
    transition: var(--transition);
}
a.btn.icon-pdf:hover:after{color: var(--blue);}
a.btn_yl.icon-pdf:hover:after{color: var(--yellow);}

.btn-attention{
    background-color: var(--red);
    padding-top: 4rem;
    padding-bottom: 4rem;
    margin-top: 4rem;
    margin-bottom: 4rem;
    color: #ffffff;
}
.btn-attention h2{
    border: 2px solid #ffffff;
    width: fit-content;
    margin: auto;
    padding: 5px 10px 8px;
    line-height: 1.2;
    margin-bottom: 1.5rem;
    outline: solid 1px #ffffff;
    outline-offset: 2px;
    font-size: var(--font-size-2xl)
}
.btn-attention p{
    text-align: center;
    font-weight: bold;
    font-size: var(--font-size-m);
    margin-bottom: 1rem;
    line-height: 1.6
}


figure,
.inquiry{
    margin: 1.5rem auto auto;
    text-align: center;
}
figcaption,
.inquiry p{
    font-size: 16px;
    font-weight: bold;
}
figure div{
    max-width: 250px;
    margin: 0.25rem auto auto
}
@media (width <= 768px) { 

}


/* -----------------------------------
    罫線
   ----------------------------------- */
hr{
	height: 0;
	margin: 0;
	padding: 0;
    padding-top: calc(50px + 1vw);
    margin-top: calc(50px + 1vw);
	border-left: 0;
	border-right: 0;
	border-bottom: 0;
    border-top: 1px solid var(--blue-light);
}
.hr-wh{border-top: 1px dotted #ffffff}

/* -----------------------------------
   TELリンク
 * ----------------------------------- */
a.txt-tel,
.txt-tel{
    color: #000000 !important;
    font-size: 120%;
}
@media (min-width: 769px) {
a[href^="tel:"] {
    pointer-events: none;
    cursor: default;
}
}

/* -----------------------------------
   スクロールトップボタン
 * ----------------------------------- */
#page-top {
	position: fixed;
	bottom: 2px;
	right: 2px;
	display: block;
	z-index: 1;
}
#page-top:before{
    font-family: "bootstrap-icons";
    content: "\f148";
    color: #ffffff;
    font-size: 25px;
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #000000;
    border-radius: 0;
    transition: var(--transition)
}
#page-top:hover:before {
    height: 50px;
    border-radius: 50% 50% 0% 0%;
    transition: var(--transition);
}


/* -----------------------------------
   アニメーション
 * ----------------------------------- */
.fadeup{opacity: 0}
.anime-fadeup {animation: fadeup .85s ease .35s forwards;}
@keyframes fadeup {
 0% { opacity: 0; 
	 transform: translateY(45px); }
 100% { opacity: 1; 
	 transform: translateY(0px); }
}

.faderight{opacity: 0}
.anime-faderight {animation: faderight .6s ease .5s forwards;}
@keyframes faderight {
 0% { opacity: 0; 
	 transform: translateX(1000px); }
 100% { opacity: 1; 
	 transform: translateX(0px); }
}

.fadeleft{opacity: 0}
.anime-fadeleft {animation: fadeleft .6s ease .5s forwards;}
@keyframes fadeleft {
 0% { opacity: 0; 
	 transform: translateX(-1000px); }
 100% { opacity: 1; 
	 transform: translateX(0px); }
}


/* -----------------------------------
    フッター
   ----------------------------------- */
footer{
    text-align: center;
    background-color: #FFFFFF;
    padding-top: 3rem;
    padding-bottom: 3rem;
    margin-top: auto;
}
footer h2{
    width: 190px;
    display: block;
    margin: 0 auto 1rem;
}
#inq{
    width: 185px;
    margin: 0.5rem auto 1rem;
}
.inq{
    font-size: var(--font-size-2xl);
    font-weight: bold;
    font-family: var(--font-num);
    margin: 0 auto;
    line-height: var(--line-height-s)
}
footer #info{
    gap:10px 40px;
}
footer dt{font-weight: 700}
footer dd{
    margin-bottom: .5rem;
    line-height: var(--line-height-s)
}
footer li + li{margin-top: .2rem}

/* フッターを下に固定 */
#flex-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}