@charset "utf-8";
@import url("animation.css");

@font-face {
  font-family: "Urbanist";
  src: url("../fonts/Urbanist-Bold.ttf") format("truetype");
  font-weight: bold;
}
@font-face {
  font-family: "M PLUS Rounded 1c";
  src: url("../fonts/MPLUS1p-Medium.ttf") format("truetype");
  font-weight: bold;
}


/*-------------------------------------------
［共通］
-------------------------------------------*/

html {
scroll-behavior: smooth;
font-family:"ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka;
color:#333;
line-height: 1.5;
scroll-padding-top: 160px;
}
strong{font-weight: bold;}

h1{
font-size: clamp(22px, 2.8vw, 30px);
line-height: 1.5;
font-weight: 750;
text-align: center;
}

h1.page_title{   /*---- 下層のページタイトルはこのクラスをつける---*/
font-size: clamp(28px, 3.2vw, 36px);
margin: clamp(150px, 20vw, 200px) auto  clamp(40px, 8vw, 80px);
}
h1.page_title span{
display: block;
width: 80%;
font-size:  clamp(14px, 1.6vw, 18px);
color:  var(--blue);
margin:10px auto;
padding-bottom:1vw;
border-top:none;
font-family: "Urbanist";
}

h2{
width:95%;
font-size:  clamp(20px, 2.8vw, 28px);
line-height: 1.5;
font-weight: 750;
text-align: center;
margin: 0 auto clamp(30px, 6vw, 60px);
max-width:760px;
}
h2 span{   /*---- 英字部分  ---*/
display: block;
width: 80%;
font-size: clamp(13px, 1.4vw, 16px);
color:  var(--blue);
margin:10px auto;
padding-top:1vw;
border-top:2px solid var(--blue);
font-family: "Urbanist";
}

h3{
font-size: clamp(18px, 2.2vw, 26px);
line-height: 1.5;
font-weight: bold;
text-align: center;
color:  var(--blue);
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(17px, 2.1vw, 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.5vw, 16px);
line-height: 1.6;
letter-spacing: 1px;
padding-bottom: clamp(20px,3vw,30px); /*---- pには下部30pxほどつけた---*/
}

a{
text-decoration: none;
color:#333;
}
a:hover{
color:var(--light_blue);
}
a img {
transition: all 0.1s;
}
a img:hover {
opacity: 0.6;
}
a.anchor{
    display: block;
    padding-top: 100px;
    margin-top: -100px; /*---- ページ内リンクのズレ補正---*/
}
main{
text-align:center;
}
main a{
color: var(--light_blue);
}
main a:hover{
color: #333;
}


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

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

.red{ color: #C10003; }
.blue{ color:var(--blue);}
.aqua{ color:var(--light_blue);}
.yellow{ color:var(--yellow);}
.green{color:#00888A;}
.purple{color:#8C23B2;}
.pink{color: var(--pink);}
.orange{color:#FF7000;}
.brown{color:#573F18;}
.gray{color:#666;}
.black{ color: var(--black);}
.white{ color: var(--white);}



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


p.text strong{ /*---- 読ませる文章には class="text"をつけてください---*/
font-weight: bold; 
background-color:  var(--yellow);/*---- 黄色マーカーあり ---*/
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: var(--blue);
padding:10px 25px 10px 30px;
color: #fff;
font-size: clamp(14px, 1.5vw, 18px);
font-weight: bold;
border-radius:30px;
}
.btn a::after{
content: " ＞";
font-size: clamp(14px, 1.4vw, 16px);
line-height: 0.5;
}
p.btn a:hover{
color: var(--blue);
background-color: var(--yellow);
transition: .5s;
}
p.btn_mini{/*---------青いボタン mini---------*/
clear: both;
padding-bottom:10px;
}
p.btn_mini a{
display:block;
margin: 0 auto;
width:fit-content;
background-color: var(--blue);
padding: 5px 15px 5px 20px;
color: #fff;
font-size: clamp(14px, 1.5vw, 16px);
font-weight: bold;
border-radius:30px;
}
.btn_mini a::after{
content: " ＞";
font-size: clamp(10px, 1.2vw, 14px);
line-height: 0.5;
}

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(300px, 30vw, 400px);
}
.foot_bnr {
width:95%;
max-width: 1000px;
margin:0 auto 6vw;
}

.inner_box{/*---------白ボックス---------*/
width:100%;
max-width:1000px;
margin:0 auto;
padding: clamp(20px, 6vw, 60px);
border-radius: clamp(10px, 1.5vw, 20px);
background-color: var(--white);
clear: both;
}
.box_BtoB{/*---------ブルー背景---------*/
width:100%;
background-color: var(--bg_blue);
clear: both;
padding:clamp(10px, 6vw, 60px);
margin-bottom: clamp(20px, 12vw, 120px);
}
.box_gray{/*---------グレー背景---------*/
width:100%;
background-color: var(--bg_gray);
clear: both;
padding:clamp(10px, 6vw, 60px);
margin-bottom: clamp(20px, 12vw, 120px);
}
.bg_white{/*---------白背景---------*/
width:100%;
background-color: #fff;
clear: both;
padding:clamp(10px, 6vw, 60px) clamp(10px, 6vw, 60px) 0;
}

.ending_copy{/*---------シメのキャッチコピー---------*/
display:block;
font-size: clamp(20px,2.8vw,30px);
font-weight:bold;
margin: clamp(20px, 3vw, 60px) 20px;
}

p.scroll_icon{display:none;}/*---------スクロール矢印---------*/


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

header{
width: 100%;
margin: 0 auto;
position: fixed;
right: 0;
left: 0;
top: 0;
z-index: 99;
background-color: #fff;
padding: 0 20px;
}
header p#logo{
font-size: clamp(10px, 1vw, 11.5px);
color: #333;
line-height: 2;
letter-spacing: 0.2px;
float: left;
margin-top: 0.5vw;
padding-bottom:10px;
}
header #logo img{
width: clamp(200px, 22vw, 240px);
}

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

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

header nav ul.gnavi__lists{
display:flex;
justify-content: flex-end;
margin-right: clamp(60px, 8vw, 100px);
margin-top: clamp(12px, 1vw, 15px);
}
header nav ul.gnavi__lists li{
margin-right: clamp(10px, 1.8vw, 40px);
line-height: 4;
font-size: clamp(11px, 1.2vw, 16px);
}
header nav ul.gnavi__lists li a{
color:#333;
}
header nav ul.gnavi__lists li a:hover{
color: var(--light_blue);
}
.gnavi__list {
position: relative;
}
.dropdown__lists {
visibility: hidden;/*デフォルトでは非表示の状態にしておく*/
opacity: 0;/*不透明度0*/
transition: all .5s;/*表示の変化を0.3秒に指定*/
width: 100%;
position: absolute;
top: clamp(40px, 4vw, 60px);
}
.gnavi__list:hover .dropdown__lists {
visibility: visible;/*Gナビメニューにホバーしたら表示*/
opacity: 1;/*不透明度1*/
}
.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;
}
.dropdown__list:not(:first-child)::before{
content: "";
width: 100%;
height: 1px;
background-color:#ccc;
position: absolute;
top: 0;
left: 0;
}
.dropdown__list:hover {
color: var(--blue);
background-color:  var(--bg_blue);
transition: all .5s;
}
.dropdown__list a {
display: flex;
justify-content:left;
text-decoration: none;
position: relative;
line-height:2.5;/*テキストの位置*/
padding:0 1vw;
}


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

/*---------------スマホ下部追従バナー------------------------*/
#sp_bottom{display:none;}


/*-------------------------------------------
ぱんくず
-------------------------------------------*/
main p.pan{
display: block;
width: 100%;
text-align: left;
padding:10px 20px; 
font-size: clamp(12px, 1.2vw, 14px);
margin: clamp(60px,6vw,75px) auto 0;
position: fixed;
left: 0;
top: 0;
background:rgba(255,255,255,0.9);
z-index: 98;
}
main p.pan a{
color: var(--blue);
display: inline-block;
padding-right:20px;
position: relative;
}
main p.pan a::after {
    content: "＞";
    font-size:8px;
    color: #333;
    width: 4px;
    height: 4px;
    position: absolute;
    right: 10px;
    top: 4px;
}


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

p.up{
position: fixed;
right:20px;
bottom:0px;
z-index:99999;
}
footer{
width:95%;
max-width: 1200px;
margin:0 auto;
}
#foot_logo {
width:100%;
height: auto;
border-bottom:1px solid #ccc;
margin-bottom:30px;
display: flex;
justify-content: space-between;
}
#foot_logo figure{
width: clamp(200px, 30vw, 400px);
}
#foot_logo p{
margin-top:10px;
padding-bottom:1vw;
font-size: clamp(10px, 1.2vw, 14px);
}
#foot_logo p img{
width: clamp(200px, 24vw, 300px);
margin-bottom:10px;
}

#foot_link{
float:right;
width:55%;
display: flex;
justify-content: flex-end;
font-size: clamp(10px, 1.2vw, 14px);
margin-bottom:30px;
}
#foot_link li.foot_link{
margin-left: 6%;
}
#foot_link li.foot_link li{
margin-bottom:10px;
}
#foot_link  li a{
color:#333;
}
#foot_link  li a:hover{
color: var(--light_blue);
}
#foot_com {
font-size:14px;
}
#foot_com dt {
margin-bottom:5px;
}
#foot_com dt strong{
font-weight:bold;
font-size:16px;
}
#foot_com dd.tel_time {
color:var(--blue);
margin:5px 0 10px;
font-family: "Urbanist";
}
#foot_com dd.tel_time strong{
font-size:24px;
letter-spacing: 1px;
}
#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;
text-align: right;
font-size: clamp(10px, 0.8vw, 10px);
padding-bottom:10px;
}



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

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

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

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


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

@media screen and (max-width: 768px) {


#gnavi_contact{
display: none;
}

header nav ul.gnavi__lists{/*Gナビ*/
display: none;
}

#sp_bottom{display: none;}/*スマホ下部追従バナー*/


p.scroll_icon{/*---------スクロール矢印---------*/
display:block;
float:right;
width:60px;
margin:0 10px 0 0;
}




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

.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: var(--blue);
    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: var(--blue);
}
#menu-btn-check:checked ~ .menu-btn span::after {
    top: 0;
    transform: rotate(-45deg);
    background-color: var(--blue);
}
#menu-btn-check {
    display: none;
}
.menu-content {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 100%;/*leftの値を変更してメニューを画面外へ*/
    z-index: 99;
    background-color: var(--bg_blue);
    transition: all 0.5s;/*アニメーション設定*/
    padding: 5% 10%;
    overflow-y:scroll;
}
.menu-content ul:first-child {
width:80%;
margin:0 auto;
}
.menu-content ul li ul li {
padding-left:60px;
}
.menu-content ul li a {
display: block;
        width: 100%;
        font-size: 16px;
        box-sizing: border-box;
        color: #000;
        text-decoration: none;
        padding: 20px 0 10px 30px;
        position: relative;
        border-bottom: solid 1px var(--blue);
}
.menu-content ul li.home a{
        border-bottom: solid 2px var(--blue);
}
.menu-content ul li a::before {
    content: "▶︎";
    font-size:8px;
    color: var(--blue);
    width: 4px;
    height: 4px;
    position: absolute;
    left: 10px;
    top: 28px;
}
.menu-content ul li.studio a::after{
content: '';
display: block;
width: 11px; 
height: 12px;
background-image: url(../images/common_icon_brank.png);
background-size: contain;
background-repeat:no-repeat;
position:absolute;
top:30px;
right:0;
}

#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(180px, 50vw, 220px);
}
#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, 28vw, 160px);
margin:0 5px;
}
#burger_box p.burger_tel{
    color: var(--blue);
    font-size: 10px;
    font-weight:bold;
    letter-spacing: 1px;
}
#burger_box .burger_tel a{
    color: var(--blue);
    font-size: 16px;
}
#burger_box .burger_tel a strong{
    font-size: 34px;
    font-family: "Urbanist";
}

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

#foot_link {
display: none;
}
#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以下はスマホレイアウト*/

p.up{
/*display: none;*/
width:30px;
}
#gnavi_contact{
display: none;
}
.menu-btn {
right: 5px;
}
p.btn{/*---------青いボタン---------*/
padding-bottom:3vw;
}

h2{
margin: 0 auto 6vw;
}


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

#foot_logo{    display: none;}

#foot_logo_sp{
    display: block;
    width:  clamp(300px, 8vw, 400px);
    margin:0 auto 40px;
}

footer #copyright{
margin:30px 0 80px;
}
}
/*-------------------------------------------
　common　スマホ　640以下　ここまで
-------------------------------------------*/


/*-------------------------------------------
［共通］ユーティリティ　padding
-------------------------------------------*/
.center{text-align:center; margin:0 auto;}
.left{text-align:left; }
.right{text-align:right; }
.b{font-weight:bold;}
.fr{float:right; margin-right:10px;}
.fl{float:left; margin-right:10px;}
.clear{clear: both;}

.pdt10{padding-top:10px;}
.pdt20{padding-top:20px;}
.pdt30{padding-top:30px;}
.pdt40{padding-top:40px;}
.pdt50{padding-top:50px;}
.pdt60{padding-top:60px;}
.pdt70{padding-top:70px;}
.pdt80{padding-top:80px;}
.pdt90{padding-top:90px;}
.pdt120{padding-top:120px;}
.pdt150{padding-top:150px;}

.pdb10{padding-bottom:10px;}
.pdb20{padding-bottom:20px;}
.pdb30{padding-bottom:30px;}
.pdb40{padding-bottom:40px;}
.pdb50{padding-bottom:50px;}
.pdb60{padding-bottom:60px;}
.pdb70{padding-bottom:70px;}
.pdb80{padding-bottom:80px;}
.pdb90{padding-bottom:90px;}
.pdb120{padding-bottom:120px;}
.pdb150{padding-bottom:150px;}

.pdl10{padding-left:10px;}
.pdl20{padding-left:20px;}
.pdl30{padding-left:30px;}
.pdl40{padding-left:40px;}
.pdl50{padding-left:50px;}
.pdl60{padding-left:60px;}
.pdl70{padding-left:70px;}
.pdl80{padding-left:80px;}
.pdl90{padding-left:90px;}
.pdl120{padding-left:120px;}
.pdl150{padding-left:150px;}

.pdr10{padding-right:10px;}
.pdr20{padding-right:20px;}
.pdr30{padding-right:30px;}
.pdr40{padding-right:40px;}
.pdr50{padding-right:50px;}
.pdr60{padding-right:60px;}
.pdr70{padding-right:70px;}
.pdr80{padding-right:80px;}
.pdr90{padding-right:90px;}
.pdr120{padding-right:120px;}
.pdr150{padding-right:150px;}

/*-------------------------------------------
［共通］ユーティリティ　margin
-------------------------------------------*/
.mgt10{padding-top:10px;}
.mgt20{padding-top:20px;}
.mgt30{padding-top:30px;}
.mgt40{padding-top:40px;}
.mgt50{padding-top:50px;}
.mgt60{padding-top:60px;}
.mgt70{padding-top:70px;}
.mgt80{padding-top:80px;}
.mgt90{padding-top:90px;}
.mgt120{padding-top:120px;}
.mgt150{padding-top:150px;}

.mgb10{padding-bottom:10px;}
.mgb20{padding-bottom:20px;}
.mgb30{padding-bottom:30px;}
.mgb40{padding-bottom:40px;}
.mgb50{padding-bottom:50px;}
.mgb60{padding-bottom:60px;}
.mgb70{padding-bottom:70px;}
.mgb80{padding-bottom:80px;}
.mgb90{padding-bottom:90px;}
.mgb120{padding-bottom:120px;}
.mgb150{padding-bottom:150px;}

.mgl10{padding-left:10px;}
.mgl20{padding-left:20px;}
.mgl30{padding-left:30px;}
.mgl40{padding-left:40px;}
.mgl50{padding-left:50px;}
.mgl60{padding-left:60px;}
.mgl70{padding-left:70px;}
.mgl80{padding-left:80px;}
.mgl90{padding-left:90px;}
.mgl120{padding-left:120px;}
.mgl150{padding-left:150px;}

.mgr10{padding-right:10px;}
.mgr20{padding-right:20px;}
.mgr30{padding-right:30px;}
.mgr40{padding-right:40px;}
.mgr50{padding-right:50px;}
.mgr60{padding-right:60px;}
.mgr70{padding-right:70px;}
.mgr80{padding-right:80px;}
.mgr90{padding-right:90px;}
.mgr120{padding-right:120px;}
.mgr150{padding-right:150px;}

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

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

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