/* reset */
*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    interpolate-size: allow-keywords;
  }
}

body {
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

img, picture, video, canvas, svg {
  display: block;
  max-width: 100%;
}

input, button, textarea, select {
  font: inherit;
}

p, h1, h2, h3, h4, h5, h6 {
  overflow-wrap: break-word;
}

p {
  text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
  text-wrap: balance;
}

#root, #__next {
  isolation: isolate;
}

/* GeneratePress Reset css */

.site-header .inside-header{
padding: 0;
}
.site-content{
display:block
}
.main-navigation{
background: transparent;
}
ul{
list-style: none;
}
.ol, ul{
margin: 0;
}
/* =========================
 Common
========================= */

:root{
  --white:#FFFFFF;
  --text-primary:#322E28;
  --text-secondary:#676767;
  --yellow:#F4C830;
  --red:#FF535C;
  --blue:#54BFCA;
  --blue-gray:#DCE3E3;
  --text-yellow:#E1B61E;
  --text-blue:#1eacba;
  --bg-red:#FFE5E8;
  --bg-yellow:#FEFADF;
  --gray-95:#F2F2F0;
  --gray-90:#E3E1DC;
  --gray-75:#C1B9AC;
}
a{
  color: var(--text-blue);
}
a:hover{
  opacity: .75;
  transition: .8s;
}

/*
PCのみ表示
*/
.show-pc{
  display:none;
}
@media(min-width:768px){
  .show-pc{
    display:block;
  }
}
/*
spのみ表示
*/
@media(min-width:768px){
  .show-sp{
    display:none;
  }
}
/* =========================
 Container
========================= */

.l-container {
max-width: 1440px;
margin-inline: auto;
padding-inline: 15px; /* SP */
}
@media (min-width: 768px) {
.l-container {
  padding-inline: clamp(15px, 4vw, 50px);
}
}
@media (min-width: 1024px) {
.l-container {
  padding-inline: 100px;
}
}

/* =========================
 Header
========================= */
.site-header{background-color: transparent;padding-top: 15px;padding-inline: 15px;}
@media(min-width: 1024px){
  .site-header .inside-header{
      padding-inline: 50px;
  }
}
@media(min-width: 768px){
  .site-header .inside-header{
    padding-inline: clamp(15px, 4vw, 50px);
  }
}
.site-header .main-title a{
  position: relative;
  display: block;
  width: clamp(133px, 18.4vw, 266px);
  height: clamp(28px, 3.8vw, 56px);
  color: transparent;
  font-size: 0;
}
.site-header .main-title a::before{
  content: "";
  position: absolute;
  inset: 0;
  background-image: url(../images/common/logo_white.svg);
  background-repeat: no-repeat;
  background-size: contain;
}

@media(min-width: 1024px){
  .main-navigation .main-nav{
    background-color: var(--white);
    border-radius: 100px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .25);
    padding: 20px 32px;
  }
  .main-navigation .main-nav > ul li a{
    font-size: 12px;
    line-height: 2;
    text-align: center;
    padding: 0 2vw;
  }
  .main-navigation .main-nav > ul li a::before{
    content: "ABOUT";
    color: var(--blue);
    display: block;
    font-size: 14px;
    font-family: "Roboto", sans-serif;
    font-weight: 600;
    text-align: center;
    line-height: 1.5;
    letter-spacing: .3px;
  }
  .main-navigation .main-nav > ul li.nav-profile a::before{
    content: "PROFILE";
  }
  .main-navigation .main-nav > ul li.nav-column a::before{
    content: "COLUMN";
  }
  .main-navigation .main-nav > ul li.nav-news a::before{
    content: "NEWS";
  }
  .main-navigation .main-nav > ul li.nav-contact a::before{
    content: "CONTACT";
  }

  .main-navigation .main-nav > ul li a::after{
    content: "";
    display: block;
    border-right: 1px solid var(--gray-75);
    height:20px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    margin: auto;
  }
  .main-navigation .main-nav > ul li:last-of-type a::after{
    display:none;
  }
}
/*
 navigation btn( Tablet - SP )
*/
.has-inline-mobile-toggle .mobile-menu-control-wrapper button {
  background-color: var(--white);
  border-radius: 300px;
  width: 50px;
  height: 50px;
}

button.menu-toggle {
  padding: 0 .8rem;
}
button .gp-icon svg{
  fill: var(--blue);
  top: 0;
}
button.menu-toggle:hover .gp-icon svg, button.menu-toggle:focus .gp-icon svg{
  fill: var(--white);
}
/* 
  - mobile menu open
 */
 html.mobile-menu-open:before{
  content: "";
  background-color: var(--blue);
  height: 100vh;
  width: 100%;
  position: absolute;
  top: 0;
  z-index:100;
 }
 html.mobile-menu-open .main-nav{
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    z-index:101;
 }

 html.mobile-menu-open .main-nav  ul li a {
    color:var(--white);
 }

/* =========================
 Body
========================= */
body{
background-color: var(--gray-95);
color: var(--text-primary);
font-family: 'Noto Sans JP', sans-serif;
font-weight:500;
font-size: 13px;
line-height: 2;
}
@media(min-width: 1024px){
body{
  font-size: 14px;
}
}
/* =========================
 Footer
========================= */
footer{
border-top: 1px solid var(--gray-75);
margin-top: clamp(45px, 10.4vw, 150px);
}
footer > * li{
list-style: none;
}

footer .my-footer-container{
    display: block;
    margin: 45px 0;
}
@media(min-width : 1025px){
  footer .my-footer-container{
    display: grid;
    grid-template-columns: 1fr 310px;
    gap:100px;
    margin: 72px auto;
  }
}

footer .my-footer-container #menu-footermenu{
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}

footer .my-footer-container #menu-footermenu li{
  margin-bottom: 0.5rem;
  width: 50%;
}
@media(min-width:768px){
  footer .my-footer-container #menu-footermenu li{
    width: auto;
  }
}
footer .my-footer-container .footer-top{
  margin-bottom: 15px;
  width: 100%;
}
footer .my-footer-container .footer-btm{
display: block;
margin: auto;
width: 100%;
}
@media(min-width : 1025px){
footer .my-footer-container .footer-btm{
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;  
}
}

footer .my-footer-container .footer-btm .footer-btm_btn,
footer .my-footer-container .footer-btm .footer-btm_sns,
footer .my-footer-container .footer-btm .footer-logo
{
text-align: center;
margin: auto;
width: 100%;
}
footer .my-footer-container .footer-btm .footer-btm_sns{
display: flex;
flex-wrap: wrap;
justify-content: space-around;
max-width: 250px;
}
footer .my-footer-container a{
  color: var(--text-primary);
  text-decoration: none;
}
footer .my-footer-container .footer-btm .footer-logo > img{
  margin: 10px auto;
}
footer .my-footer-container .footer-btm .footer-btm_url{
  font-family: "Roboto", sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
}
/*
Parts
*/
.btn-fill_blue{
  background-color: var(--blue);
  border-radius: 100px;
  color: var(--white);
  display: block;
  font-size: clamp(12px, 1.04vw, 15px);
  font-weight: 600;
  line-height: 1.8;
  text-decoration: none;
  padding: 0.4rem;
  width: 100%;
}
.btn-fill_blue:hover{
  color: var(--white);
}
@media(min-width: 1024px){
    .btn-fill_blue{
        line-height: 2.5;
  }
}
.btn-solid_white{
  background-image: url(../images/common/arrow_circle_white.svg);
  background-position: calc(100% - 0.75rem) center;
  background-repeat: no-repeat;
  background-size: 1.8rem
28.8px
;
  border: 1px solid var(--white);
  border-radius: 100px;
  color: var(--white);
  display: block;
  font-size: clamp(12px, 1.04vw, 15px);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  padding: 0.6rem 2.8rem 0.6rem 2rem;
  width: 100%;
  max-width: 270px;
}
.btn-solid_white:hover{
  background-color: var(--text-blue);
  color: var(--white);
}
@media(min-width:768px){
  text-align: left;
}
.btn-arrow_round:after{
  content: "";
  background-image: url(../images/common/arrow_black.svg);
  background-size:12px;
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--white);
  border-radius: 300px;
  display: block;
  width:40px;
  height:40px;
}

@media(min-width: 768px){
    .btn-arrow_round:after{
    background-size: clamp(12px, 1.5vw, 22px);
    width:  clamp(40px, 4.1vw, 60px);
    height: clamp(40px, 4.1vw, 60px);
    }
}
.btn-arrow_round-blue{
  background-image: url(../images/common/arrow_circle_blue.svg);
  background-repeat: no-repeat;
  background-position: right center;
  background-size: contain;
  padding-right: 2rem;
  text-decoration: none;
  font-weight: 600;
  line-height: 2;
}
.btn-arrow_round-blue.btn-white {
  border: 1px solid var(--text-primary);
  background-color: var(--white);
  background-size: 1.6rem;
  background-position: calc(100% - 0.5rem) center;
  border-radius: 300px;
  color: var(--text-primary);
  padding: 0.7rem 4rem 0.7rem 2rem;
  display: inline-block;
}
.btn-arrow_fill-blue{
  background-color: var(--blue);
  background-image: url(../images/common/arrow_circle_white.svg);
  background-repeat: no-repeat;
  background-position: calc(100% - 1rem) center;
  background-size: 1.7rem;
  border-radius: 300px;
  color: var(--white) !important;
  display: inline-block;
  font-weight: 700;
  font-size: 12px;
  padding: 1rem 3rem 1rem 1.5rem;
}
/*
* btnLayout
*/
.btn-wrap_center > a{
  margin-left: auto;
  margin-right: auto;
}