@charset "UTF-8";

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: "Noto Sans JP", "Yu Gothic", "YuGothic", sans-serif;
  color: #333;
  background: #eaf7ff;
  line-height: 1.8;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
}

.header {
  position: fixed;
  top: 28px;
  left: 50%;
  z-index: 100;
  width: min(1200px, calc(100% - 40px));
  transform: translateX(-50%);
}

.header__inner {
  display: flex;
  align-items: center;
  height: 64px;
  padding: 0 34px;
  background: rgba(240, 240, 240, .9);
  border-radius: 16px;
  gap: 45px;
}

.header__logo {
  flex: 0 0 auto;
}

.header__logo img {
  width: 150px;
}

.header__nav {
  flex: 1;
}

.header__nav ul {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 44px;
  flex-wrap: nowrap;
}

.header__nav li {
  flex: 0 0 auto;
}

.header__nav a {
  display: block;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .08em;
}


.header__hamburger {
  display: none;
}

.lower{
  background:#eaf7ff;
}

.lowerContents{
  width:min(1300px, calc(100% - 40px));
  margin:0 auto;
  background:#fff;
  border-radius:24px;
  padding:60px 100px 80px;
}

@media screen and (max-width: 767px) {
    .header {
        position: relative;
        top: auto;
        left: auto;
        width: calc(100% - 24px);
        margin: 14px auto;
        transform: none;
    }

  .header__inner {
    height: 58px;
    padding: 0 16px;
    border-radius: 14px;
    justify-content: space-between;
  }

  .header__logo img {
    width: 138px;
  }

  .header__nav {
    display: none;
  }

  .header__hamburger {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 42px;
    height: 42px;
    padding: 0;
    border: none;
    background: transparent;
    cursor: pointer;
  }

  .header__hamburger span {
    display: block;
    width: 28px;
    height: 2px;
    background: #11175f;
    border-radius: 999px;
  }
  .lowerContents{
    width:calc(100% - 24px);
    padding:32px 16px 50px;
    border-radius:18px;
  }
}


.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 190px;
  min-height: 40px;
  padding: 0 28px;
  border-radius: 999px;
  background: #10165f;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
}

.center {
  text-align: center;
}

.sectionTitle {
  text-align: center;
}

.sectionTitle p {
  margin: 0 0 4px;
  color: #e8752b;
  font-size: 30px;
  font-weight: 900;
  letter-spacing: .12em;
  font-family: "LINE Seed JP", sans-serif;
}

.sectionTitle h2 {
    margin: 0;
    font-size: 50px;
    font-family: "LINE Seed JP", sans-serif;
    font-weight: 900;
    line-height: 1;
    letter-spacing: .15em;
}

.sectionTitle--white h2 {
  color: #fff;
}

.footer {
  width: min(1300px, calc(100% - 64px));
  margin: 34px auto 28px;
  padding: 56px 80px 28px;
  background: #fff;
  border-radius: 26px;
}

.footer__inner {
  display: grid;
  grid-template-columns: 300px 1fr 250px;
  gap: 45px;
  align-items: start;
}

.footer__logo {
  width: 245px;
  margin-bottom: 22px;
}

.footer__company,
.footer__address {
  margin: 0 0 18px;
  font-size: 13px;
  line-height: 1.9;
}

.footer__sns {
  display: flex;
  gap: 18px;
  font-size: 20px;
}

.footer__nav {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 60px;
  padding-top: 8px;
}

.footer__navMain {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 70px;
}

.footer__navSub {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 70px;
  margin-top: 42px;
}

.footer__navCol > a,
.footer__navSub a {
  display: block;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 700;
}

.footer__navCol ul {
  margin-top: 18px;
}

.footer__navCol li + li {
  margin-top: 10px;
}

.footer__navCol li a {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .04em;
}

.footer__buttons {
	display: grid;
	gap: 14px;
	width: 250px;
}

.footer__buttons a {
	display: block;
	overflow: hidden;
	border-radius: 10px;
	transition: opacity .3s;
}

.footer__buttons a:hover {
	opacity: .8;
}

.footer__buttons img {
	display: block;
	width: 100%;
	height: auto;
}

.copyright {
  margin: 34px 0 0;
  text-align: center;
  font-size: 12px;
}

@media screen and (max-width: 767px) {
   .footer__nav {
     display: grid;
     gap: 20px 70px;
     padding-top: 8px;
     grid-template-columns: repeat(1, 1fr);
   }
  .footer {
    width: calc(100% - 24px);
    padding: 36px 24px 22px;
  }

  .footer__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .footer__nav ul {
    grid-template-columns: 1fr 1fr;
    gap: 18px;
  }

	.footer__buttons {
		width: 100%;
		justify-items: center;
		gap: 12px;
	}

	.footer__buttons a {
		width: min(250px, 80%);
	}

	.footer__buttons img {
		width: 100%;
		height: auto;
		display: block;
	}
}


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

  .header__nav{
    display:block;
    position:fixed;
    top:72px;
    left:12px;
    right:12px;
    padding:24px;
    background:#fff;
    border-radius:18px;
    box-shadow:0 10px 30px rgba(0,0,0,.12);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-10px);
    transition:.3s;
  }

  .header__nav.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }

  .header__nav ul{
    display:block;
  }

  .header__nav li + li{
    margin-top:16px;
  }

  .header__hamburger.is-active span:nth-child(1){
    transform:translateY(8px) rotate(45deg);
  }

  .header__hamburger.is-active span:nth-child(2){
    opacity:0;
  }

  .header__hamburger.is-active span:nth-child(3){
    transform:translateY(-8px) rotate(-45deg);
  }

  .header__hamburger span{
    transition:.3s;
  }
}

.shopDetail__item{
  margin-bottom:60px;
}

.shopDetail__lead{
  display:flex;
  align-items:flex-start;
  gap:50px;
}

.shopDetail__photo{
  width:50%;
}

.shopDetail__photo img{
  width:100%;
  display:block;
  border-radius:14px;
}

.shopDetail__text{
  width:50%;
  position:relative;
}

.shopDetail__logo{
  width:120px;
  position:absolute;
  left:-180px;
  top:-40px;
  z-index:2;
}

.shopDetail__logo2{
  width:173px;
  position:absolute;
  left:-226px;
  top:-40px;
  z-index:2;
}

.shopDetail__text h2{
  font-size:36px;
  line-height:1.4;
  letter-spacing:.04em;
  margin-bottom:30px;
  font-weight:500;
  margin-top: 0;
  position:relative;
  z-index:2;
}

.shopDetail__text p{
  font-size:14px;
  line-height:2.2;
  letter-spacing:.08em;
  margin-bottom:18px;
}

.shopInfo{
  position:relative;
  display:flex;
  gap:70px;
  margin-top:70px;
  padding-left:110px;
  padding-right:90px;
}

.shopInfo__left{
  width:120px;
  flex-shrink:0;
}

.shopInfo__title{
  width:170px;
  flex-shrink:0;
  display:flex;
  justify-content:center;
  align-items:flex-start;
  gap:8px;
}

.shopInfo__title::after{
  content:"";
  width:1px;
  height:105px;
  background:#333;
  order:2;
}

.shopInfo__title span{
  writing-mode:vertical-rl;
  font-size:11px;
  line-height:1;
  letter-spacing:.18em;
  padding-top:4px;
  order:3;
}


.shopInfo__title h3{
  writing-mode:vertical-rl;
  font-size:34px;
  line-height:1;
  letter-spacing:.12em;
  margin:0;
  order:1;
}

.shopInfo__sns{
  position:absolute;
  left:100px;
  top:250px;
  display:flex;
  gap:14px;
}

.shopInfo__sns2{
  position:absolute;
  left:50px;
  top:250px;
  display:flex;
  gap:14px;
  font-size: 12px;
}

.shopInfo__sns3{
  position:absolute;
  left:50px;
  top:250px;
  display:flex;
  gap:14px;
  font-size: 12px;
}

.shopInfo__sns a{
  width:32px;
  height:32px;
  border:1px solid #333;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.3s;
}

.shopInfo__sns img{
  width:22px;
  height:22px;
  display:block;
}

.shopInfo__body{
  flex:1;
  max-width:820px;
}

.shopInfo__body dl{
  margin:0;
  border-top:1px solid #333;
}

.shopInfo__body dl div{
  display:flex;
  border-bottom:1px solid #333;
  align-items:flex-start;
  padding:25px 0;
  gap: 24px;
}

.shopInfo__body dt,
.shopInfo__body dd{
  margin:0;
}


.shopInfo__body dt{
  width:100px;
  font-size:13px;
  letter-spacing:.08em;
  flex-shrink:0;
}

.shopInfo__body dd:nth-of-type(2){
  flex:1;
  margin:0;
  font-size:13px;
  letter-spacing:.08em;
}

.shopInfo__btn{
  text-align:right;
  margin-top:40px;
  padding-right:70px;
  display:flex;
  justify-content:flex-end;
  
}
.shopDetail__wave{
  position:absolute;
  right:37px;
  top:60px;
  width:495px;
  z-index:1;
}
.shopDetail__wave img{
  width:100%;
  display:block;
}

@media screen and (max-width: 767px){
  .pageHero__title h1{
    position:absolute;
    left:25%;
    top:35%;
    transform:translateY(-50%);
    font-size:40px;
    letter-spacing:.18em;
  }
  .pageHero__title p{
     position:absolute;
     right:5px;
     bottom:-64px;
     color:#fff;
     font-size:60px;
     line-height:1;
     letter-spacing:.1em;
     font-weight:700;
   }
  .shopDetail__item{
    margin-bottom:80px;
  }

  .shopDetail__lead{
    display:block;
    position:relative;
  }

  .shopDetail__photo{
    width:100%;
    position:relative;
    z-index:1;
  }

  .shopDetail__photo img{
    width:100%;
    border-radius:12px;
  }

  .shopDetail__text{
    position:relative;
    padding-top:0;
  }

  .shopDetail__logo{
    position:absolute !important;
    right:12px;
    top:-62px;
    width:82px;
    margin:0;
    z-index:20;
    display:block !important;
  }

  .shopDetail__text h2{
    padding-top:10px;
    font-size:21px;
    line-height:1.65;
  }

  .shopDetail__text p{
    font-size:13px;
    line-height:2;
    text-align:left;
  }

  .shopDetail__wave{
    width:180px;
    margin:12px auto 24px;
  }
  .shopDetail__wave img{
    width:100%;
  }
}
@media screen and (max-width:767px){

  .shopDetail__lead,
  .shopDetail__text{
    overflow:visible;
  }

  .shopDetail__text{
    position:relative !important;
    padding-top:42px;
    width: 100%;
  }

  .shopDetail__text .shopDetail__logo{
     display:block !important;
     visibility:visible !important;
     opacity:1 !important;
     position:absolute !important;
     left:auto !important;
     right:18px !important;
     top:-92px !important;
     bottom:auto !important;
     width:78px !important;
     height:auto !important;
     margin:0 !important;
     z-index:20 !important;
     transform:none !important;
  }
 .shopDetail__text .shopDetail__logo2{
     display:block !important;
     visibility:visible !important;
     opacity:1 !important;
     position:absolute !important;
     left:auto !important;
     right:18px !important;
     top:-45px !important;
     bottom:auto !important;
     width:100px !important;
     height:auto !important;
     margin:0 !important;
     z-index:20 !important;
     transform:none !important;
  }
  .shopInfo{
    display:block;
    margin-top:44px;
    padding:0;
  }

  .shopInfo__title{
    width:100%;
    justify-content:center;
    padding-bottom: 20px;
  }

  .shopInfo__sns{
    position:static;
    margin:28px 0 32px;
    justify-content:center;
  }

  .shopInfo__body{
    max-width:none;
    width:100%;
  }

  .shopInfo__body dl div{
    display:block;
    padding:18px 0;
  }

  .shopInfo__body dt{
    width:auto;
    margin-bottom:8px;
    font-size:12px;
    font-weight:700;
  }

  .shopInfo__body dd{
    font-size:13px;
    line-height:1.8;
  }

  .shopInfo__btn{
    margin-top:28px;
    padding-right:0;
    text-align:center;
    justify-content: center;
  }
}