@charset "UTF-8";

/* 基本
=========================================*/
@import url('https://fonts.googleapis.com/css2?family=Cardo:ital,wght@0,400;0,700;1,400&family=Noto+Serif+JP:wght@200..900&family=Questrial&family=Shippori+Mincho&display=swap');

:root {
  --main-color: #517C8F;
  --main-color2: #6CA7B6;
  --txt-color: #434856;
  --font-jp-serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif !important;
  --font-jp-noto: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif !important;
  --font-en-serif: "Cardo", serif !important;
  --font-en-sans: "Questrial", sans-serif !important;
}

* {
  margin: 0;
  padding: 0;
}

html {
	scroll-behavior: smooth;
  scroll-padding-top: 100px;
}


body{
	text-align:center;
  font-size:clamp(13px , 1.33vw , 16px);
	line-height:2.125 !important;
	color:var(--txt-color) !important;
  position: relative;
}
.jp-serif{
	font-family: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif !important;
  font-weight:500;
}
.jp-noto{
	font-family: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif !important;
  font-weight:300;
}
.en-serif{
  font-family: "Cardo", serif !important;
  font-weight: 400;
  font-style: normal;
}
.en-sans{
  font-family: "Questrial", sans-serif !important;
  font-weight: 400;
  font-style: normal;
}

a{
	text-decoration:none;
	color:var(--txt-color);
  transition: .6s;
}
video,
img{
	border:0;
  max-width:100%;
  vertical-align:bottom;
}

ul,
ol{
	list-style-type: none;
}
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-jp-serif);
	line-height:1.4 !important;
}
p,
li{
	line-height:2.125 !important;
}
.ib{
  display:inline-block;
}
.att{
  font-size:10px;
}
.txtS{
  font-size:0.8em;
}

sub{
  font-size:0.8em;
  vertical-align: baseline;
}
/* link-line
----------------------------------------*/
.link-line{
  font-family: var(--font-en-serif);
  font-size:clamp(13px , 1.67vw , 20px);
  display:flex;
  width:200px;
  justify-content: space-between;
  align-items: center;
  color:#fff;
  transition: .6s;
  text-align:left;
}
.link-line span{
  width:2.4em;
  height:2.4em;
  border-radius:50%;
  border:1px solid #fff;
  position:relative;
}
.link-line span::before{
  content:"";
  height:100%;
  width:100%;
  background:url(../img/ico_arrow.svg) no-repeat center center;
  background-size:37.5% auto;
  position:absolute;
  left:0;
  top:0;
  transition: .6s;
}
.link-line:hover{
  opacity:.6;
}
.link-line:hover span::before{
  left:0.5em;
}

.link-line.lineB{
  color:var(--txt-color);
}
.link-line.lineB span{
  border:1px solid var(--txt-color);
}
.link-line.lineB span::before{
  background:url(../img/ico_arrow_b.svg) no-repeat center center;
  background-size:37.5% auto;
}

@media only screen and (max-width: 767px){
  .link-line{
    width:138px;
  }

}


/* link-btn
----------------------------------------*/
.link-btn{
  font-family: var(--font-en-serif);
  font-size:clamp(14px , 1.67vw , 20px);
  width:270px;
  border:1px solid #fff;
  border-radius:2em;
  line-height:2.5em;
  display:block;
  color:#fff;
  padding:0 1em;
  box-sizing:border-box;
  position:relative;
  transition: .6s;
  text-align:left;
}
.link-btn::after{
  content:"";
  width:10px;
  height:10px;
  position:absolute;
  right:1em;
  top:50%;
  transform: translateY(-50%);
  background:#fff;
  border-radius:50%;
  display: block;
  transition: .6s;
}
.link-btn:hover{
  opacity:.8;
  background:rgba(255,255,255,.28);
  transition: .6s;
}
.link-btn.btnB{
  color:var(--txt-color);
  border:1px solid var(--txt-color);
}
.link-btn.btnB::after{
  background:var(--txt-color);
}
.link-btn.btnB:hover{
  opacity:.8;
  background:rgba(67,72,86,.28);
  transition: .6s;
}

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

/* 調整
----------------------------------------*/
.boxC,
.imgC,
.txtC{
	text-align:center;
}
.txtL{
	text-align:justify;
}
.txtR{
	text-align:right;
}
.none{
	display:none;
}

.width100{width:100%;}

.sp{display:none;}

@media only screen and (max-width: 767px){
.sp{display:block;}
.pc{display:none;}
  br.sp{display:inline;}
}

/* header
=========================================*/
header#main-header{
  position:fixed;
  padding:27px 44px;
  width:100%;
  z-index:1000;
  box-sizing:border-box;
}
header#main-header nav{
  display: flex;
  justify-content: space-between;
  align-items: center;
  width:100%;
}
header#main-header nav .logo{
  width:165px;
}
header#main-header nav ul{
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap:2em;
  font-family:var(--font-en-sans);
}
header#main-header nav ul li img{
  width:1.44em;
}
header#main-header a{
  position:relative;
}
#header-order-quantity{
  background: var(--main-color);
  color: #fff;
  border-radius: 50%;
  height: 1.6em;
  width: 1.6em;
  display: inline-block;
  line-height: 1.6;
  font-size: clamp(10px, 1vw, 12px);
  position: absolute;
  right: -1.2em;
  top: -1em;
}
@media only screen and (max-width: 767px){
  header#main-header{
    padding:27px;
  }
  header#main-header nav .logo{
    width:88px;
  }
}


/* ハンバーガー
----------------------------------------*/
header ul.h-navi li.menu{
  width: 32px;
  height: 13px;
  position: relative;
  cursor: pointer;
  z-index:101;
  margin-left:1em;
}
header ul.h-navi li.menu p{
  width: 12px;
  display:block;
  position: absolute;
  border: none;
  background: transparent;
  appearance: none;
  right:10px;
  top: 50%;
  transform: translateY(-50%);
  height:100%;
}
header ul.h-navi li.menu p span {
  display: inline-block;
  width: 100%;
  height:1px;
  background: var(--txt-color);
  position: absolute;
  left: 0;
  transition: .5s;
}
header ul.h-navi li.menu p span:first-child {
  top: calc(50% - 7px);
}
header ul.h-navi li.menu p span:last-child {
  bottom: calc(50% - 7px);
}

header ul.h-navi li.menu.active p span:first-child {
  transform: translateY(7px) rotate(-30deg);
}
header ul.h-navi li.menu.active p span:last-child {
  transform: translateY(-6px) rotate(30deg);
}
@media only screen and (min-width: 768px){
  header ul.h-navi li.menu{
    display:none;
  }
}

/* menu
----------------------------------------*/
header nav ul.sp-navi{
  position:fixed;
  width:100%;
  max-width:767px;
  height:100vh;
  background: #6CA7B6;
  z-index:100;
  right:-104vw;
  top:0;
  box-sizing:border-box;
  padding:clamp(40px, 4.69vw, 60px) 0;
  transition: 0.8s;
  transition-timing-function: ease-in;
  overflow-y: scroll;
  display:block !important;
  padding:200px 0 0 24.43vw;
  box-sizing:border-box;
  text-align: left;
}
header nav.open ul.sp-navi{
  right:0;
}
header nav ul.sp-navi li + li{
  margin-top:22px;
}
header nav ul.sp-navi a{
  position:relative;
  font-size:16px;
  color: #fff;
  font-family:var(--font-en-sans);
}

@media only screen and (min-width: 768px){
  header nav ul.sp-navi{
    display:none;
  }
}

/* footer
=========================================*/
.l-wrapper-none {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
footer#main-footer{
  background:var(--main-color);
  color:#fff;
  padding: clamp(40px , 5.83vw , 70px) 0;
  z-index:100;
  position: relative;
  margin-top: auto;
}
footer#main-footer a{
  color:#fff;
  position:relative;
}
footer#main-footer .inner{
  width:min(86.67% , 1248px);
  margin:0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
footer#main-footer .inner .footer-logo{
  width:165px;
}
footer#main-footer .inner .footer-link{
  font-family:var(--font-en-sans);
  width:calc(100% - 165px - clamp(30px , 3.33vw , 40px));
  max-width:420px;
}
footer#main-footer .inner .footer-link .cts-link{
  display: flex;
  flex-wrap: wrap;
  gap:1em 1.5em;
}
footer#main-footer .inner .footer-link .mypage-link{
  margin-top:clamp(35px , 4.17vw , 50px);
  display: flex;
  justify-content: flex-end;
  gap:1.5em;
}
footer#main-footer .inner .footer-link .mypage-link li img{
  width:1.44em;
}
footer#main-footer #header-order-quantity{
  background: #fff;
  color: var(--main-color);
}


@media only screen and (max-width: 767px){
  footer#main-footer .inner{
    display:block;
  }
  footer#main-footer .inner .footer-link{
    width:100%;
    max-width:100%;
    margin:40px 0 0;
  }
}

/* アニメーション
=========================================*/
.fadeUp{
  animation-name:fadeUpAnime;
  animation-duration:1.2s;
  animation-fill-mode:forwards;
  transition: ease-out 0s;
}
@keyframes fadeUpAnime{
  from {
    opacity: 0;
    transform: translateY(50px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes fadeUpAnimeCenter{
  from {
    opacity: 0;
    transform: translateY(50px) translateX(-50%);
  }

  to {
    opacity: 1;
    transform: translateY(0) translateX(-50%);
  }
}
.blurIn{
  animation-name:blurInAnime;
  animation-duration:2s;
  animation-fill-mode:forwards;
  transition: ease-out 0s;
}
@keyframes blurInAnime{
  from {
    opacity: 0;
    filter: blur(10px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}


.fadeUpTrigger,
.blurInTrigger,
.blurInTrigger2{
  opacity: 0;
  position:relative;
  z-index:2;
}
.blurInTrigger,
.blurInTrigger2{
  opacity:0;
  filter: blur(10px);
}
.delay1{
  animation-delay: .3s;
}
.delay2{
  animation-delay: .6s;
}
.delay3{
  animation-delay: .9s;
}
.delay4{
  animation-delay: 1.2s;
}
.delay5{
  animation-delay: 1.5s;
}

/* 問い合わせフォーム
=========================================*/
#new_contact tr,
#new_contact th,
#new_contact td{
  display:block;
  width:100%;
}
#new_contact th{
  padding:40px 20px 15px 0 !important;
}
#new_contact tr:first-of-type th{
  padding-top:0;
}
#new_contact td>div{
  width:100%;
}
#new_contact .p-contact__head{
  margin:clamp(80px , 10vw , 120px) auto clamp(50px , 6.67vw , 80px);
}
#new_contact label,
#new_contact input,
#new_contact select,
#new_contact textarea{
  font-family:var(--font-jp-noto) !important;
}
#contacts-form-view h2{
  margin:clamp(80px , 10vw , 120px) auto clamp(35px , 4.17vw , 50px);
  font-size:clamp(18px , 2vw , 24px);
  font-family:var(--font-jp-noto);
  
}
#contacts-form-view .p-page_header__inner__btn{
  margin:clamp(80px , 10vw , 120px) auto 0;
}

main#contacts-form-view{
  padding-top:clamp(120px , 16.67vw , 200px);
}


/* 表示調整
=========================================*/
main#confirm-view,
main#new-view,
main#cart-show-view,
main.l-container{
  padding-top:clamp(120px , 16.67vw , 200px);
  padding-bottom:clamp(90px , 12.5vw , 150px);
}


.c-form_table > tbody > tr > td{
  padding:0 !important;
}
.c-form_table > tbody > tr > td input[type=text],
.c-form_table--confirm > tbody > tr > td input[type=text],
.c-form_table > tbody > tr > td input[type=email],
.c-form_table--confirm > tbody > tr > td input[type=email],
.c-form_table > tbody > tr > td input[type=tel],
.c-form_table--confirm > tbody > tr > td input[type=tel],
.c-form_table > tbody > tr > td input[type=number],
.c-form_table--confirm > tbody > tr > td input[type=number],
.c-form_table > tbody > tr > td input[type=password],
.c-form_table--confirm > tbody > tr > td input[type=password]{
  background:#F8F8F8 !important;
  background-color:#F8F8F8 !important;
  border:1px solid #D9D9D9 !important;
  padding: 1.4em 20px !important;
  line-height: 1.4;
  font-weight:300;
  font-family:var(--font-jp-noto);
}
input[type="email"]:-webkit-autofill,
input[type="password"]:-webkit-autofill {
  transition: background-color 50000s ease-in-out 0s;
  -webkit-text-fill-color: var(--txt-color); 
}

.c-form_table__tel{
  justify-content: flex-start;
}
.c-form_table__tel input{
  max-width:unset !important;
}
.c-form_table__tel > input:not(:first-child){
  width:30% !important;
}
.c-form_table__tel > input:first-child{
  width:24% !important;
}
.c-form_table > tbody > tr > td textarea, .c-form_table--confirm > tbody > tr > td textarea{
  padding: 1.2em 20px !important;
  font-weight:300;
}
.c-form_table__select select{
  height: 4em;
  font-weight:300;
  border: 1px solid #D9D9D9 !important;
}
label{
  font-weight:300 !important;
  font-family:var(--font-jp-noto);
}
input[type=text]::placeholder{
  color:#C3C3C3 !important;
}

.c-form_table > tbody > tr > th,
.c-form_table--confirm > tbody > tr > th{
  font-family:var(--font-jp-noto);
  font-size:clamp(14px , 1.33vw , 16px) !important;
  padding: 20px 1em 10px 0;
  min-width:10em;
}
.c-form_table--confirm > tbody > tr > th,
.c-form_table--confirm > tbody > tr > td{
  padding:clamp(30px , 3.33vw , 40px) 0 clamp(15px , 2.5vw , 30px) !important;
  text-align:left;
  font-size: clamp(14px, 1.33vw, 16px) !important;
}
.c-form_table--confirm > tbody > tr > th{
  width:10em !important;
}
.c-form_table--confirm > tbody > tr > td{
  width:calc(100% - 10em) !important;
}
.p-account_form__inner__bottom__mailbtn,
.p-payment_list__add__win__form__bottom__btn,
.p-account__inner__content__form__bottom__btn,
.p-checkout_confirm__inner__list__block__submit,
.p-checkout__bottom__submit,
.p-login__inner__registration__bottom__btn,
.p-login__inner__login__bottom__submit,
.p-page_header__inner__btn,
.p-account_form__inner__bottom__btn{
  border-radius:2em;
  width:min(86vw , 416px);
  margin-left:auto;
  margin-right:auto;
  max-width: unset !important;
}
.c-cart_submit__block__submit,
.p-payment_list__add__btn,
.p-address_list__add,
.p-checkout_confirm__submit{
  border-radius:2em;
}
.c-cart_submit__block__submit,
  width:100%;
}
.p-account_form__inner__bottom__btn:hover{
  opacity:0.7 !important;
}
.u-color__border--input,
.c-form_table__checkbox input{
  background:#F8F8F8 !important;
}
.u-color__text--alert {
  color: #FF0004;
  font-weight:300;
  font-size:14px;
  font-family:var(--font-jp-serif);
}

.c-form_table--confirm{
  font-size:clamp(15px , 1.42vw , 17px) !important;
  margin-top:clamp(80px , 10vw , 120px) !important;
}
h2 + .c-form_table--confirm{
  margin-top:0 !important;
}
.p-account_form__inner__bottom{
  margin-top:clamp(80px , 10vw , 120px) !important;
}
.p-account_form__inner__bottom__link{
  color:var(--main-color) !important;
  text-decoration:none;
}
.u-text--body,
.u-text--link,
.u-text--btn {
  font-family:var(--font-jp-noto);
}
.c-form_table__checkbox__text{
  line-height:1.45 !important;
}
@media only screen and (max-width: 767px){
  .p-login__inner {
    display: block;
  }
  .p-login__inner__login{
    width: 100%;
  }
  .p-login__inner__registration {
    width: 100%;
    margin-top: 60px;
  }
}


@media screen and (max-width: 719px) {
  .c-form_table--confirm > tbody > tr > td{
    padding-top:0 !important;
  }
  .c-form_table--confirm > tbody > tr > th,
  .c-form_table--confirm > tbody > tr > td{
    width:100% !important;
  }
  h2 + .c-form_table--confirm > tbody > tr > th{
    padding-top:0 !important;
  }

}

/* カート
=========================================*/
.c-cart_item__info__title{
  display: block;
  text-align: left;
  width: 100%;
  font-family:var(--font-jp-noto);
  font-weight:300;
  line-height:1.45;
}
.c-cart_item__info__quantity__submit{
  font-size: clamp(14px, 1.33vw, 16px) !important;
}
.p-order_confirmation__heading,
.p-checkout_confirm__inner__list__block__title,
.p-checkout__list__block__inner__title{
  text-align:left;
  font-weight:500;
  margin-bottom:clamp(30px , 3.33vw , 40px);
}
.c-cart_list__list__item__info__title,
.c-confirm_field,
.c-form_table td{
  text-align:left;
}
.c-cart_list__list__item__info__title{
  line-height:1.8 !important;
}
.c-form_table__checkbox input{
  margin-right:1em;
}
.p-checkout_confirm__inner__list__block + .p-checkout_confirm__inner__list__block{
  margin-top:clamp(30px , 3.33vw , 40px);
}
.c-billing_list__detail__item__tax{
  font-family:var(--font-jp-noto);
}
.u-font__en,
.p-checkout_confirm__total{
  font-family:var(--font-jp-noto);
  font-weight:500;
}
.p-cart_content .c-billing_list .att{
  line-height:1.6;
  margin-top:1em;
  text-align:left;
}
.p-checkout__list__block__inner{
}
.teiki-info{
  text-align:left;
}
#view-payment-schedule .c-form_table > tbody > tr > td,
#view-credit-card-information .c-form_table > tbody > tr > td,
#view-credit-card-information .c-form_table--confirm > tbody > tr > td{
  padding:0 0 15px !important;
}
.u-text--body.att{
  font-size:clamp(11px , 1.17vw , 14px);
  line-height:1.8;
}
.c-cart_list__list__item__img__inner{
  background-size: contain;
}
.p-cart_content__inner__side,
.p-checkout_confirm__inner__side {
  width: 360px;
}
.p-checkout_confirm__inner__list{
  width: calc(100% - 420px);
}

.c-cart_submit__block__submit{
  max-width:416px;
  font-size:clamp(16px , 1.5vw , 18px);
}
#perform-view .p-page_header__inner__lead.u-text--subhead{
  margin-top:0;
}
@media screen and (max-width: 1023px) {
  .p-shipping_address_table th br{
    display:none;
  }
  .p-cart_content__inner__side{
    width: 100%;
  }
  .p-checkout_confirm__inner__side{
    width: 100%;
    display: flex;
    flex-direction: column;
  }
  .p-checkout_confirm__inner__list{
    order: 2;
    width: 100%;
    margin-top: 60px;
  }
  .p-checkout_confirm__inner__side .c-billing_list{
    order: 2;
    margin-bottom: 0;
  }
  .p-checkout_confirm__inner {
    width: 100%;
    flex-direction: column;
  }
  .p-checkout_confirm__inner__side .law-link{
    margin:0 0 20px;
  }
  .c-cart_submit__block__submit{
    max-width:320px;
  }
}

/* law-link
=========================================*/
.law-link{
  margin-top:20px;
  text-align:left;
}
.law-link a.u-text--link{
  text-decoration: underline;
}
.law-link a.u-text--link:hover{
  opacity: 0.4;
}


/* 利用規約／特商法／プライバシーポリシー
=========================================*/
.terms-cts h2,
.privacy-cts h2,
.law-cts h2{
  text-align:left;
  font-size:clamp(16px , 1.83vw , 22px);
}
.terms-cts p,
.privacy-cts p,
.law-cts p,
.terms-cts li,
.privacy-cts li,
.law-cts li{
  text-align:left;
}
.law-cts .c-table tbody tr th{
  white-space: nowrap;
  text-align:left;
}
.law-cts .c-table tbody tr td{
  text-align:left;
}


/* マイページ
=========================================*/
.c-account_menu__list li .u-text--subhead{
  font-size: clamp(14px, 1.33vw, 16px);
}
.p-account__inner__menu{
  border:0;
}
.c-account_menu__list li{
  text-align: left;
}
.c-account_menu__list li i,
.c-account_menu__list li img{
  display:none;
}
.c-breadcrumbs{
  display:none;
}
.p-account__inner__content__title,
.p-favorite__header{
  margin-top:0;
}
.side-tit{
  font-size:clamp(16px , 1.83vw , 22px);
  text-align: left;
  letter-spacing: 0.05em;
}
.p-mypage__name{
  font-size:clamp(20px , 2.67vw , 32px);
  text-align: left;
  line-height: 1;
}
.p-mypage__block__title{
  font-size:clamp(14px , 1.67vw , 20px);
  text-align: left;
}
.p-mypage{
  margin-top:0;
}
.p-account_form__inner .c-form_table > tbody > tr > th,
.p-payment_list__add__win__form .c-form_table > tbody > tr > th,
.p-account__inner__content__form .c-form_table > tbody > tr > th{
  padding: 40px 20px 15px 0 !important;
}
.p-account_form__inner .c-form_table > tbody > tr > td,
.p-payment_list__add__win__form .c-form_table > tbody > tr > td,
.p-account__inner__content__form .c-form_table > tbody > tr > td{
  vertical-align: text-top;
  padding-top: 40px !important;
}
#contacts-form-view .p-account_form__inner .c-form_table > tbody > tr > td{
  padding-top: 0 !important;
}
@media screen and (max-width: 719px) {
  .p-account_form__inner .c-form_table > tbody > tr > td,
  .p-payment_list__add__win__form .c-form_table > tbody > tr > td,
  .p-account__inner__content__form .c-form_table > tbody > tr > td{
    padding-top: 0 !important;
  }
}
.p-account__inner__content__lead{
  text-align: left;
}
.p-payment_list__add__win__form__text,
.p-account__inner__content__form__text{
  text-align: left;
  font-size:clamp(11px , 1.17vw , 14px);
}
.c-account_table > tbody > tr > th{
  white-space:nowrap;
}
.c-account_table > tbody > tr > td{
  text-align:left;
  line-height:1.45;
}
.c-account_table > tbody > tr > td[data-title="お名前："],
.c-account_table > tbody > tr > td[data-title="フリガナ："]{
  white-space:nowrap;
}


.c-account_table__edit,
.c-account_table__delete{
  white-space:nowrap;
}
.c-account_table > tbody > tr > td:first-child {
  padding-left: 20px;
}

#view-input-card-cvv img{
  width:min(80% , 300px);
}
.c-account_menu__toggle-button{
  background:var(--main-color);
}
@media screen and (max-width: 1100px) {
  .c-account_table > tbody > tr:first-child {
      display: none;
  }
  .c-account_table > tbody > tr > td {
    display: block;
    padding: 6px 15px;
  }
  .c-account_table > tbody > tr > td:before {
    content: attr(data-title);
  }
  .c-account_table > tbody > tr > td br {
    display: none;
  }
  .c-account_table > tbody > tr > td span + span {
    margin-inline-start: 0.5em;
  }
}
@media screen and (max-width: 719px) {
  .side-tit{
    display:none;
  }
  .c-account_menu {
    margin: 0 -15px;
    width: calc(100% + 30px);
  }
  .c-account_menu__content.--main-heading{
    padding-block: 5px;
  }
  .p-account__inner__content{
    margin-top:40px;
  }
}
/* password
=========================================*/
.js-password-wrapper{
 position: relative;
}
.js-toggle-password{
 position: absolute;
 right: 10px;
 top: 50%;
 transform: translateY(-50%);
 cursor: pointer;
  z-index:5;
  line-height: 1;
}
.js-toggle-password svg{
  width:1.5em;
  fill:#C2C2C2;
}