@charset "utf-8";

@font-face {
  font-family: "Urbanist";
  src: url("../fonts/Urbanist-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "IBMPlexSansJP-Bold";
  src: url("../fonts/IBMPlexSansJP-Bold.ttf") format("truetype");
}
@font-face {
  font-family: "IBMPlexSansJP-Medium";
  src: url("../fonts/IBMPlexSansJP-Medium.ttf") format("truetype");
}

/*-------------------------------------------
　全ページ共通　
-------------------------------------------*/

html {
scroll-behavior: smooth;
font-family:IBMPlexSansJP-Medium,"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka;
color:#333;
line-height: 1.5;
background-color: var(--bg_gray);
}
strong{font-weight: bold;}

h1{
font-family:Urbanist,IBMPlexSansJP-Bold,"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka;
font-size: clamp(22px, 2.8vw, 30px);
line-height: 1.5;
font-weight: 750;
}

h1.page_title{   /*---- 下層のページタイトルはこのクラスをつける---*/
font-size: clamp(30px, 3.5vw, 40px);
margin: 0 auto  clamp(40px, 8vw, 80px) ;
background: linear-gradient(90deg, #00b1ff 0%, #8639ff 50%, #ff3372 100%);
display: inline-block;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
width:auto;
}
p.h1_subtitle{
    margin:-40px auto clamp(40px, 8vw, 80px) ;
    font-size:16px;
    color: #333;
    font-weight: bold;
    text-align: center;
}
h2{
font-family:IBMPlexSansJP-Bold,"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka;
width:95%;
font-size:  clamp(22px, 3vw, 30px);
line-height: 1.5;
margin:  clamp(30px, 6vw, 60px) auto;
max-width:760px;
}
#contents_top h2{
font-family:Urbanist;
font-size: clamp(30px, 3.5vw, 40px);
background: linear-gradient(90deg, #00b1ff 0%, #8639ff 50%, #ff3372 100%);
display: inline-block;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
width:auto;
}
h3{
font-size: clamp(18px, 2.2vw, 26px);
line-height: 1.5;
font-weight: bold;
text-align: center;
color:  #1450C8;
margin-bottom:  clamp(10px, 1.5vw, 20px);
}
h3.kakko::before{    /*---- ＜カッコ＞ありh3はこのクラスをつける---*/
    content: url(../images/common_icon_l.svg);
    margin: 0 2vw;
    vertical-align: middle;
}
h3.kakko::after{
    content: url(../images/common_icon_r.svg);
    margin: 0 2vw;
    vertical-align: middle;
}
h4{
font-size: clamp(16px, 2.2vw, 24px);
line-height: 1.5;
font-weight: bold;
margin-bottom:  clamp(10px, 1.5vw, 20px);
}
h5{
font-size: clamp(16px, 2.0vw, 22px);
line-height: 1.5;
font-weight: bold;
margin-bottom:  clamp(10px, 1.5vw, 20px);
}
p{
font-size: clamp(14px, 1.6vw, 18px);
line-height: 1.5;
letter-spacing: 2px;
padding-bottom: clamp(20px,3vw,30px);          /*---- pには下部30pxほどつけた---*/
}

a{text-decoration: none; color:var(--link);}
a:hover{color:var(--hover);}
a img {transition: all 0.1s;}
a img:hover {opacity: 0.6;}



/*-------------------------------------------
決まっている色の指定
-------------------------------------------*/
html{
--link   :#1450C8;
--hover  :#FF008C;
--blue   :#1450C8;
--aqua   :#167BFF;
--pink   :#FF008C;
--yellow :#FFFF64;
--black  :#000;
--white  :#fff;
--bg_blue:#EAF4FF;
--bg_gray:#dfebf4;
}

/*-------------------------------------------
［共通］ユーティリティ　主にCMSなど一時的用
-------------------------------------------*/

.red   { color:#C10003;}
.blue  { color:#1450C8;}
.aqua  { color:#167BFF;}
.yellow{ color:#FFFF64;}
.green { color:#00888A;}
.purple{ color:#8C23B2;}
.pink  { color:#FF008C;}
.orange{ color:#FF7000;}
.brown { color:#573F18;}
.gray  { color:#666;}
.black { color:#000;}
.white { color:#fff;}



/*-------------------------------------------
どこでも使っていい
-------------------------------------------*/


p.text strong{ /*---- 読ませる文章には class="text"をつけてください---*/
font-weight: bold; 
background-color:  #FFFF64;/*---- 黄色マーカーあり ---*/
font-weight: bold; 
}
p.text em{
font-weight: bold; 
font-style:normal;
}

p.btn{/*---------青いボタン---------*/
clear: both;
padding-bottom:3vw;
}
p.btn a{
display:block;
margin: 0 auto;
width:fit-content;
background-color: #1450C8;
padding:10px 25px 10px 30px;
color: #fff;
font-size: clamp(16px, 1.8vw, 18px);
font-weight: bold;
border-radius:30px;
}
.btn a::after{
content: " ＞";
font-size: clamp(12px, 1.4vw, 16px);
line-height: 0.5;
}
p.btn a:hover{
color: var( #1450C8);
background-color: var(--yellow);
transition: .5s;
}

ul.bnr_torio{/*---------3点バナーセット---------*/
width:100%;
padding:30px 0;
display: flex;
flex-wrap: wrap;
justify-content: center;
margin-bottom:6vw;
background-color: #ececec;
gap: 2vw;
}
ul.bnr_torio li{
width:clamp(220px, 26vw, 400px);
}


.inner_box{/*---------白ボックス---------*/
width:100%;
max-width:1000px;
margin:0 auto;
padding: clamp(20px, 6vw, 60px);
border-radius: clamp(10px, 1.5vw, 20px);
background-color: #fff;
clear: both;
}


/*-------------------------------------------
ヘッダ　header
-------------------------------------------*/

header{
width: 100%;
margin: 0 auto;
padding:0 20px;
position: fixed;
right: 0;
left: 0;
top: 0;
z-index: 9999;
/*background:rgba(255, 255, 255, 0.9);*/
}
header div.inner{
width:80%;
margin:0 auto;
padding:0 20px;
}
header #logo{
font-size: clamp(8px, 0.85vw, 11px);
color: #333;
line-height: 2;
letter-spacing: 0.2px;
float: left;
margin:0;
padding:0;
}
header #logo img{
width: clamp(120px, 16vw, 180px);
}

header nav p{
width:clamp(80px, 10%, 100px);
margin-left:1.8vw;
position: absolute;
right:0;
top:0;
z-index:999;
}

/*---------------ドロップダウン------------------------*/

header nav ul.gnavi__lists{
display: flex;
justify-content: flex-end;
font-family: 'Urbanist';
margin-top: clamp(15px,1.5vw,25px);
}
header nav ul.gnavi__lists li{
margin-left: clamp(10px, 2vw, 30px);
font-size: clamp(16px, 1.8vw, 20px);
display: inline;
}
header nav ul.gnavi__lists li a{      color:#333;}
header nav ul.gnavi__lists li a:hover{color: var(--hover);}


ul.dropdown__lists {
visibility: hidden;/*デフォルトでは非表示の状態にしておく*/
opacity: 0;/*不透明度0*/
transition: all .5s;/*表示の変化の秒数*/
width: 100%;
position: absolute;
top: clamp(40px, 4vw, 60px);
}
li.gnavi__list:hover .dropdown__lists {
visibility: visible;/*Gナビメニューにホバーしたら表示*/
opacity: 1;/*不透明度*/
}
li.gnavi__list {
position: relative;
}
li.dropdown__list {
background-color: #fff;
width: clamp(140px, 20vw, 240px);
height:  clamp(30px, 3vw, 40px);
transition: all 1s;
position: relative;
box-shadow: 1px 1px 3px #ccc;
}
li.dropdown__list:not(:first-child)::before{
content: "";
width: 100%;
height: 1px;
background-color:#333;
position: absolute;
top: 0;
left: 0;
}
li.dropdown__list:hover {
color: var(--hover);
background-color: #ececec;
transition: all .5s;
}
li.dropdown__list a {
display: flex;
justify-content:left;
text-decoration: none;
position: relative;
line-height:2.5;/*テキストの位置*/
padding:0 1vw;
}

/*---------------バーガーメニュー------------------------*/
.hamburger-menu{ display:none;}

/*---------------スマホ下部追従バナーPCでは非表示-----------*/
#sp_bottom{display:none;}


/*----------------------ぱんくず------------------------*/
header nav.breadCrumb{
font-size: 12px;
clear:both;
display:block;
margin-top:20px;
}

/*-------------------------------------------
メイン　main
-------------------------------------------*/
main{
width:100%;
text-align:center;
margin: clamp(150px,17.5vw,200px)  auto clamp(30px,6vw,90px);
}
main p{
padding: 0 15px 30px;
}

/*----------------------ページナビのタイトル非表示------------------------*/
nav.pagination h2{
    display: none;
}

/*-------------------------------------------
フッタ　footer
-------------------------------------------*/

p.up{
position: fixed;
right:20px;
bottom:0px;
z-index:99999;
}

footer{
width:100%;
max-width: 1200px;
margin:0 auto;
padding:20px;
}
footer a{
color:#333;
}
#search_box{ /*******検索Box*********/
margin-top:30px;
float: right;
}
#search_box label{
border:1px solid #ccc;
padding:5px 10px;
font-size:16px;
margin-right:20px;
}
#search_box input.search-submit{
margin-top:-2px;
padding:2px 10px;
background-color: #1450C8;
border-radius: 5px;
color:#fff;
font-weight:bold;
}
#search_box span.screen-reader-text{
display: none;
}
#foot_logo {
width:100%;
height: auto;
margin-bottom:30px;
}
#foot_logo p{
letter-spacing:0;
font-size: clamp(10px, 1.0vw, 11px);
}
#foot_logo p img{
width: clamp(160px, 20vw, 200px);
margin:10px 0;
}

#foot_link{
    width: 90%;
    font-size: clamp(14px, 1.4vw, 16px);
    margin: 0 auto 30px;
}
#foot_link li.foot_link ul{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
#foot_link li.foot_link ul li{
margin:10px 20px;
}

#foot_com {
font-size:14px;
}
#foot_com dt {
margin-bottom:10px;
}
#foot_com dt strong{
font-weight:bold;
font-size:16px;
}
#foot_com dd.tel_time {
color:#1450C8;
margin:10px 0 10px;
}
#foot_com dd.tel_time strong{
font-size:20px;
}
#foot_com dd.tel_time span{
font-weight: bold;
font-size:12px;
}
#foot_com dd.link-btn img{
width:100px;
}

#foot_logo_sp { display: none;}

#copyright{
clear: both;
font-size: clamp(10px, 0.8vw, 10px);
padding-bottom:10px;
}



/*-------------------------------------------
［共通］PC、SPのみ表示
-------------------------------------------*/

.pc{display:block;}
.tab{display: none;}
.pc_tab{display: block;}
.sp{display: none;}

@media screen and (min-width:640px) and ( max-width:768px) {
.pc{display: none;}
.pc_tab{display: block;}
.tab{display: block;}
.sp{display:  none;}
}

@media screen and (max-width: 639px) {/*スマホの横向きの最小機種幅640以下はスマホレイアウト*/
.pc{display: none;}
.pc_tab{display: none;}
.tab{display: none;}
.sp{display: block;}
}


/*-------------------------------------------
　common　タブレット　768以下
-------------------------------------------*/

@media screen and (max-width: 768px) {
header div.inner{
width:100%;
padding:0;
}
header #logo{
margin-top:10px;
}
header #logo img{
width: clamp(140px, 20vw, 200px);
}
#gnavi_contact{
display: none;
}
header nav ul.gnavi__lists{/*Gナビ*/
display: none;
}

#sp_bottom{display: none;}/*スマホ下部追従バナー　タブレット非表示？*/



/*---バーガーメニューここから---*/

.hamburger-menu{
    display:block;
}
l-drawer-nav__inner {/*背景スクロールさせない*/
  height: 100%;
  overflow: scroll;
}
.menu-btn {
position: fixed;
top: 5px;
right: 5px;
display: flex;
flex-wrap:wrap;
height: 50px;
width: 50px;
justify-content: center;
align-items: center;
z-index: 9999;
}
.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
    content: '';
    display: block;
    height: 3px;
    width: 25px;
    border-radius: 3px;
    background-color: #333;
    position: absolute;
}
.menu-btn span:before {
    bottom: 8px;
}
.menu-btn span:after {
    top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
    background-color: rgba(255, 255, 255, 0);/*　× のとき真ん中線透明*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
    bottom: 0;
    transform: rotate(45deg);
    background-color: #333;
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
    background-color: #333;
}
#menu-btn-check {
    display: none;
}
.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    background-color: #fff;
    transition: all 0.5s;/*アニメーション設定*/
    padding: 5% 10%;
    overflow-y:scroll;
}
.menu-content ul {
    margin-top:50px;
}
.menu-content ul li{
    width:80%;
    min-width: 300px;;
    margin:1px auto 0;
    padding-left:30px;
    border-bottom:1px solid #ececec;
}
.menu-content ul li a {
display: block;
width: 100%;
font-size: 20px;
box-sizing: border-box;
color: #000;
padding: 20px;
position: relative;
}
.menu-content ul li a::before {
    content: "▶︎";
    font-size:8px;
    color: var( #1450C8);
    width: 4px;
    height: 4px;
    position: absolute;
    left: 10px;
    top: 28px;
}

#menu-btn-check:checked ~ .menu-content {
    left: 0;/*メニューを画面内へ*/
}
.menu-content  .burger_logo{
font-size:10px;
padding-bottom:1vw;
}
.menu-content .burger_logo img{
width: clamp(160px, 30vw, 200px);
}
#burger_box{
    background-color: #fff;;
    border-radius: 20px;
    padding:20px 10px 0;
    margin:30px auto 0;
    text-align: center;
}
#burger_box p.burger_btn img{
width:  clamp(100px, 26vw, 160px);
margin:0 5px;
}
#burger_box p.burger_tel{
    color: var( #1450C8);
    font-size: 10px;
    font-weight:bold;
}
#burger_box .burger_tel a{
    color: var( #1450C8);
    font-size: 16px;
}
#burger_box .burger_tel a strong{
    font-size: 26px;
}

/*---------------バーガーメニューここまで--------------------*/


#foot_com dt {
margin-bottom:10px;
}
#foot_com,
#copyright{
text-align: center;
margin-bottom:10px;
}

}

/*----------------------------------------------------
　common　タブレット　768以下　ここまで
------------------------------------------------------*/

/*----------------------------------------------------
　common　スマホ　640以下　ここから
------------------------------------------------------*/

@media screen and (max-width: 639px) {/*スマホの横向きの最小機種幅640以下はスマホレイアウト*/
header #logo{
margin-top:  clamp(10px, 5vw, 30px);
}
header #logo img {
    width: clamp(120px, 30vw, 200px);
}
main p{
padding: 0 10px 20px;
text-align: left;
}
p.up{
/*display: none;*/
width:30px;
}
#gnavi_contact{
display: none;
}
.menu-btn {
right: 5px;
}
p.btn{/*---------青いボタン---------*/
padding-bottom:3vw;
}

h2{
margin: 0 auto 6vw;
}
header nav.breadCrumb{
display:none;
}

/*---------------スマホ下部追従バナー------------------------*/
nav#sp_bottom{
display: block;
position: fixed;
bottom:5px;
right:0;
left:0;
padding:0 5px;
z-index:9;
text-align: center;
}
nav #sp_bottom ul{
max-width:400px;
display: flex;
gap:5px;
margin:0 auto;
align-items: center;
justify-content: center;
}
nav #sp_bottom ul li img{
    height:60px;
}

#search_box{ /*******検索Box*********/
display: none;
}

#foot_logo{
text-align: center;
}
footer #copyright{
margin:30px 0 80px;
}
}

/*----------------------------------------------------
　common　スマホ　640以下　ここまで
------------------------------------------------------*/


/*-------------------------------------------
［共通］ユーティリティ　padding
-------------------------------------------*/
.center{text-align:center; margin:0 auto;}
.b{font-weight:bold;}
.fr{float:right; margin-right:10px;}/*スマホではクリア*/
.fl{float:left; margin-right:10px;}/*スマホではクリア*/

.pt10{padding-top:10px;}
.pt20{padding-top:20px;}
.pt30{padding-top:30px;}
.pt40{padding-top:40px;}
.pt50{padding-top:50px;}
.pt60{padding-top:60px;}
.pt70{padding-top:70px;}
.pt80{padding-top:80px;}
.pt90{padding-top:90px;}
.pt120{padding-top:120px;}
.pt150{padding-top:150px;}

.pb10{padding-bottom:10px;}
.pb20{padding-bottom:20px;}
.pb30{padding-bottom:30px;}
.pb40{padding-bottom:40px;}
.pb50{padding-bottom:50px;}
.pb60{padding-bottom:60px;}
.pb70{padding-bottom:70px;}
.pb80{padding-bottom:80px;}
.pb90{padding-bottom:90px;}
.pb120{padding-bottom:120px;}
.pb150{padding-bottom:150px;}

.pl10{padding-left:10px;}
.pl20{padding-left:20px;}
.pl30{padding-left:30px;}
.pl40{padding-left:40px;}
.pl50{padding-left:50px;}
.pl60{padding-left:60px;}
.pl70{padding-left:70px;}
.pl80{padding-left:80px;}
.pl90{padding-left:90px;}
.pl120{padding-left:120px;}
.pl150{padding-left:150px;}

.pr10{padding-right:10px;}
.pr20{padding-right:20px;}
.pr30{padding-right:30px;}
.pr40{padding-right:40px;}
.pr50{padding-right:50px;}
.pr60{padding-right:60px;}
.pr70{padding-right:70px;}
.pr80{padding-right:80px;}
.pr90{padding-right:90px;}
.pr120{padding-right:120px;}
.pr150{padding-right:150px;}

/*-------------------------------------------
［共通］ユーティリティ　margin
-------------------------------------------*/
.mt10{padding-top:10px;}
.mt20{padding-top:20px;}
.mt30{padding-top:30px;}
.mt40{padding-top:40px;}
.mt50{padding-top:50px;}
.mt60{padding-top:60px;}
.mt70{padding-top:70px;}
.mt80{padding-top:80px;}
.mt90{padding-top:90px;}
.mt120{padding-top:120px;}
.mt150{padding-top:150px;}

.mb10{padding-bottom:10px;}
.mb20{padding-bottom:20px;}
.mb30{padding-bottom:30px;}
.mb40{padding-bottom:40px;}
.mb50{padding-bottom:50px;}
.mb60{padding-bottom:60px;}
.mb70{padding-bottom:70px;}
.mb80{padding-bottom:80px;}
.mb90{padding-bottom:90px;}
.mb120{padding-bottom:120px;}
.mb150{padding-bottom:150px;}

.ml10{padding-left:10px;}
.ml20{padding-left:20px;}
.ml30{padding-left:30px;}
.ml40{padding-left:40px;}
.ml50{padding-left:50px;}
.ml60{padding-left:60px;}
.ml70{padding-left:70px;}
.ml80{padding-left:80px;}
.ml90{padding-left:90px;}
.ml120{padding-left:120px;}
.ml150{padding-left:150px;}

.mr10{padding-right:10px;}
.mr20{padding-right:20px;}
.mr30{padding-right:30px;}
.mr40{padding-right:40px;}
.mr50{padding-right:50px;}
.mr60{padding-right:60px;}
.mr70{padding-right:70px;}
.mr80{padding-right:80px;}
.mr90{padding-right:90px;}
.mr120{padding-right:120px;}
.mr150{padding-right:150px;}

/*------------------------------------------------------
　common　タブレット　768以下　ここから
------------------------------------------------------*/

@media screen and (max-width: 768px) {
.fr ,.fl{
float: none;
padding: 10px;
text-align: center;
}
}

/*----------------------------------------------------
　common　タブレット　768以下　ここまで
------------------------------------------------------*/