@charset "utf-8";
/* このCSSは、グループページ、フリーページ、商品ページ使えます */
/* 共通 */
:root{
  --L_BTN_COLOR: #2d2d2d;
  --L_BGCOLOR_GRAY: var(--BGCOLOR_GRAY_1);
  --L_BDCOLOR_GRAY:var(--BDCOLOR_GRAY_1);
  --L_BDCOLOR_BLACK: #2d2d2d;
  --L_MARK: #fff799;
  --L_TEXT_RED: #ff0000;
}
/* l-anchor */
.l-anchor{
  display: flex;
}
.l-anchor li:not(:last-child){
  border-right: 1px solid var(--L_BDCOLOR_GRAY);
}
.l-anchor li a{
  display: block;
  text-align: center;
  font-family: var(--FF_MINCHO);
}
@media screen and (min-width: 768px){
  .l-anchor{
    margin-top: var(--GAP_100);
  }
  .l-anchor li{
    flex: 1;
  }
  .l-anchor li a{
    font-size: var(--FZ_18);
  }
}
@media screen and (max-width: 767px){
  .l-anchor{
    margin-top: 70px;
    padding-left: calc((100% - var(--INNER_WIDTH)) / 2);
    overflow-x: auto;
    white-space: nowrap;
    -ms-overflow-style: none;/* IE, Edge 対応 */
    scrollbar-width: none;/* Firefox 対応 */
  }
  .l-anchor::-webkit-scrollbar{/* Chrome, Safari 対応 */
    display: none;
  }
  .l-anchor li{
    flex: 0 0 auto;
    margin-right: 10px;
  }
  .l-anchor li a{
    font-size: 14px;
    padding: 0 20px;
  }
}
/* l-index */
.l-index{
  --GUIDE_NAV_SP_BOX: 200px;
  --GUIDE_NAV_SP_BOX_TRIGGER: 35px;
  position: fixed;
  left: calc(0px - var(--GUIDE_NAV_SP_BOX) + var(--GUIDE_NAV_SP_BOX_TRIGGER));
  top: 150px;
  display: flex;
  align-items: stretch;
  width: var(--GUIDE_NAV_SP_BOX);
  transition: .5s;
  z-index: 99;
  opacity: 0;
}
.l-index:not(:has(.l-index__item li)){
  display: none;
}
body.scroll .l-index{
  opacity: 0;
  animation: var(--ANIME_FADEIN);
}
body.scroll.returnTop .l-index{
  opacity: 1;
  animation: var(--ANIME_FADEOUT);
}
.l-index.active{
  left: 0;
}
.l-index__trigger{
  width: var(--GUIDE_NAV_SP_BOX_TRIGGER);
  height: 100px;
  background-color: var(--TXT_COLOR_BASE);
  color: var(--WHITE);
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--TXT_COLOR_BASE);
  border-left: none;
  font-family: var(--FF_MINCHO);
  font-size: 12px;
}
.l-index__trigger::after{
  content: '目次';
  writing-mode: vertical-rl;
}
.l-index.active .l-index__trigger::after{
  content: '閉じる';
}
.l-index__item{
  flex: 1;
  background-color: var(--WHITE);
  border: 1px solid var(--L_BDCOLOR_GRAY);
}
.l-index__item li:not(:last-child){
  border-bottom: 1px solid var(--L_BDCOLOR_GRAY);
}
.l-index__item li a{
  display: block;
  padding: 8px 15px;
  font-size: 13px;
  font-family: var(--FF_MINCHO);
}
.l-index__item li.is-current a{
  color: var(--GOLD01);
}


/* .l-container */
.l-container{
  letter-spacing: 0.1em;
  line-height: 1.5em;
  color: #333;
}
.l-container h2{
/*   letter-spacing: 0.2em; */
}
.l-container h2,
.l-container h3{
/*   font-family: var(--FF_MINCHO); */
font-weight: bold;
}
.l-container h2 mark{
  background: linear-gradient(transparent 70%, var(--L_MARK) 30%);
}
.l-container h2 u{
  text-decoration: none;
  border-bottom: 1px solid var(--L_BDCOLOR_BLACK);
}
span.l_heading--bgcolorGray{
  background-color: var(--L_BGCOLOR_GRAY);
  display: inline-block;
}
.l_heading--bdcolorBlack{
  border-left: 5px solid var(--L_BDCOLOR_BLACK);
}
.l_heading--center{
  text-align: center;
}
.l-container p{
  font-size: 16px;
  font-weight: 400;
  line-height: 1.8;
}
.l-container p strong{
  font-weight: bold;
}
.l-container p u{
  text-decoration: none;
  border-bottom: 1px solid var(--L_BDCOLOR_BLACK);
}
span.l-text__red{
  color: var(--L_TEXT_RED);
  font-weight: bold;
}
.l-container p mark{
  background: linear-gradient(transparent 70%, var(--L_MARK) 30%);
}
@media screen and (min-width: 768px){
  .l-container{
    --L_CONTAINER_PADDING: 37px;
    padding: var(--GAP_50) var(--L_CONTAINER_PADDING) 0;
  }
  .l-container h2{
    font-size: var(--FZ_24);
    margin-bottom: 10px;
  }
  .l-container h3{
    font-size: 18px;
    margin-bottom: var(--GAP_30);
  }
  .l-container > [class*="l-"],
  .l-container > [id],
  .l-container > [id] > [class*="l-"]{
    margin-bottom: var(--GAP_100);
  }
  span.l_heading--bgcolorGray{
    padding: 8px 15px;
  }
  .l_heading--bdcolorBlack{
    padding-left: 15px;
  }
  .l-container p.g-btn{
    margin-top: var(--GAP_30);
  }
}
@media screen and (max-width: 767px){
  .l-container{
    padding-top: 50px;
    width: var(--INNER_WIDTH);
    margin-left: auto;
    margin-right: auto;
  }
  .l-container h2{
    font-size: 20px;
    margin-bottom: 20px;
  }
  .l-container h3{
    font-size: 16px;
  }
  .l-container p{
  font-size: 14px;
  }
  .l-container > [class*="l-"],
  .l-container > [id],
  .l-container > [id] > [class*="l-"]{
    margin-bottom: 50px;
  }
  span.l_heading--bgcolorGray{
    padding: 5px 12px;
  }
  .l_heading--bdcolorBlack{
    padding-left: 10px;
  }
  .l-container p.g-btn{
    margin-top: 30px;
  }
}

/* viemo */
.l-container iframe[src*="https://player.vimeo.com"]{
  display: block;
  vertical-align: bottom;
  width: 100%;
  height: 100%;
  aspect-ratio: 7/8;
  object-fit: cover;
}

/* l-btn */
.l-btn{
  display: block;
  width: 100%;
  text-align: center;
  background-color: var(--L_BTN_COLOR);
  border: 1px solid var(--L_BTN_COLOR);
  color: var(--WHITE);
  border-radius: 70px;
  margin-left: auto;
  margin-right: auto;
}
.l-btn--reverse{
  background-color: var(--WHITE);
  color: var(--L_BTN_COLOR);
}
@media (hover: hover){
  .l-btn:hover{
    background-color: var(--WHITE);
    color: var(--L_BTN_COLOR);
    opacity: 1;
  }
  .l-btn--reverse:hover{
    background-color: var(--L_BTN_COLOR);
    color: var(--WHITE);
    opacity: 1;
  }
}
@media screen and (min-width: 768px){
  .l-btn{
    padding: 10px 0;
    max-width: 400px;
  }
}
@media screen and (max-width: 767px){
  .l-btn{
    padding: 8px 0;
    max-width: 300px;
  }
}

/* l-intro */
.l-intro p:first-child{
  font-family: var(--FF_MINCHO);
}
@media screen and (min-width: 768px){
  .l-intro p:first-child{
    font-size: var(--FZ_20);
  }
  .l-intro iframe[src*="https://player.vimeo.com"]{
    margin: var(--GAP_30) 0;
  }
  .l-intro h2{
    margin-bottom: var(--GAP_20);
    font-size: var(--FZ_22);
  }
}
@media screen and (max-width: 767px){
  .l-intro p:first-child{
    font-size: 18px;
  }
  .l-intro iframe[src*="https://player.vimeo.com"]{
    margin: 20px 0;
  }
  .l-intro h2{
    margin-bottom: 10px;
  }
}

/* l-videoAndImage */
.l-videoAndImage img{
  aspect-ratio: 7/8;
  object-fit: cover;
}
@media screen and (min-width: 768px){
  .l-videoAndImage iframe[src*="https://player.vimeo.com"],
  .l-videoAndImage img{
    margin-bottom: var(--GAP_30);
  }
}
@media screen and (max-width: 767px){
  .l-videoAndImage iframe[src*="https://player.vimeo.com"],
  .l-videoAndImage img{
    margin-bottom: 20px;
  }
}


/* l-titleWithTxt */
.l-titleWithTxt h2{
  border-bottom: 1px solid var(--TXT_COLOR_BASE);
  text-align: center;
}
@media screen and (min-width: 768px){
  .l-titleWithTxt h2{
    padding-bottom: var(--GAP_10);
  }
}
@media screen and (max-width: 767px){
  .l-titleWithTxt h2{
    padding-bottom: 15px;
  }
}


/* l-titleImgTxt */
@media screen and (min-width: 768px){
  .l-titleImgTxt img{
    margin-bottom: var(--GAP_30);
  }
}
@media screen and (max-width: 767px){
  .l-titleImgTxt img{
    margin-bottom: 20px;
  }
}

/* .l-slide */
[class*="l-slide__arrow--"]{
  --MASK: url(../images/products/slide-arrow.svg) no-repeat center center / 100%;
}
@media screen and (min-width: 768px){
  .l-slide{
    --SLICK_ARROW_TO_BODY: calc((0px - var(--L_CONTAINER_PADDING)));
  }
  [class*="l-slide__arrow--"]{
    width: 20px;
    top: 30%;
  }
  .l-slide p:not(.g-btn){
    margin: var(--GAP_30) 0 var(--GAP_40);
  }
}
@media screen and (max-width: 767px){
  .l-slide{
    --SLICK_ARROW_TO_BODY: calc((0px - 15px));
  }
  .l-slide
  [class*="l-slide__arrow--"]{
    width: 18px;
    top: 20%;
  }
  .l-slide p:not(.g-btn){
    margin: 20px 0 30px;
  }
}

/* l-titleTxtBtn */
@media screen and (min-width: 768px){
  .l-titleTxtBtn p:not(.g-btn){
    margin: var(--GAP_30) 0;
  }
}
@media screen and (max-width: 767px){
  .l-titleTxtBtn p:not(.g-btn){
    margin: 20px 0 30px;
  }
}

/* l-imageWithText */
@media screen and (min-width: 768px){
  .l-imageWithText > img{
    margin-bottom: 12px;
  }
}
@media screen and (max-width: 767px){
  .l-imageWithText > img{
    margin-bottom: 8px;
  }
}

/* l-imageListWithText */
.l-imageListWithText > ul:has(li img){
  display: grid;
}
@media screen and (min-width: 768px){
  .l-imageListWithText > ul:has(li img){
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    margin: var(--GAP_30) 0;
  }
  .l-imageListWithText p:not(.g-btn){
    margin-bottom: var(--GAP_30);
  }
}
@media screen and (max-width: 767px){
  .l-imageListWithText > ul:has(li img){
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin: 20px 0;
  }
  .l-imageListWithText p:not(.g-btn){
    margin-bottom: 30px;
  }
}

/* l-imageTitleTextList */
.l-imageTitleTextList > ul:has(li img){
  display: grid;
}
@media screen and (min-width: 768px){
  .l-imageTitleTextList > ul:has(li img){
    grid-template-columns: repeat(2, 1fr);
    gap: var(--GAP_50) var(--GAP_40);
  }
  .l-imageTitleTextList > ul:has(li img) li img{
    margin-bottom: var(--GAP_30);
  }
  .l-imageTitleTextList > ul:has(li img) li h3{
    margin-bottom: var(--GAP_30);
  }
  .l-imageTitleTextList > ul:has(li img) li p:not(.g-btn){
    margin-bottom: var(--GAP_30);
  }
  .l-imageTitleTextList--col3 > ul:has(li img){
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
  }
}
@media screen and (max-width: 767px){
  .l-imageTitleTextList > ul:has(li img){
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
  }
  .l-imageTitleTextList > ul:has(li img) li img{
    margin-bottom: 20px;
  }
  .l-imageTitleTextList > ul:has(li img) li h3{
    margin-bottom: 10px;
  }
  .l-imageTitleTextList > ul:has(li img) li p:not(.g-btn){
    margin-bottom: 20px;
  }
  .l-imageTitleTextList--col3 > ul:has(li img){
    grid-template-columns: repeat(3, 1fr);
    gap: 11px;
  }
}

/* l-link */
a.l-link{
  display: block;
  width: fit-content;
  margin: 0 auto;
  font-family: var(--FF_MINCHO);
  color: var(--GOLD01);
  border-bottom: 1px solid var(--GOLD01);
  line-height: 1;
  font-size: 16px;
  letter-spacing: 0.05em;
  padding: 0 3px 2px 3px;
}

/* l-imageTextSide */
.l-imageTextSide > ul:has(li div){
  display: grid;
}
@media screen and (min-width: 768px){
  .l-imageTextSide > ul:has(li div){
    gap: var(--GAP_50);
  }
  .l-imageTextSide > ul > li:has(div){
    display: flex;
    gap: 30px;
  }
  .l-imageTextSide > ul > li:has(div) figure,
  .l-imageTextSide > ul > li:has(div) div{
    flex: 1;
  }
  .l-imageTextSide > ul > li:has(div) figcaption{
    font-size: 12px;
    margin-top: 10px;
  }
  .l-imageTextSide > ul > li:has(div) p:not(.g-btn){
    margin-bottom: var(--GAP_30);
  }
  .l-imageTextSide__reverse{
    flex-direction: row-reverse;
  }
}
@media screen and (max-width: 767px){
  .l-imageTextSide > ul:has(li div){
    gap: 40px;
  }
  .l-imageTextSide > ul > li:has(div) div{
    display: contents;
  }
  .l-imageTextSide > ul > li:has(div){
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 15px;
  }
  .l-imageTextSide > ul > li:has(div) h3{
    order: 1;
    grid-column: span 2;
    margin-bottom: 14px;
  }
  .l-imageTextSide > ul > li:has(div) figure{
    order: 2;
  }
  .l-imageTextSide > ul > li:has(div) figcaption{
    font-size: 11px;
    margin-top: 10px;
  }
  .l-imageTextSide > ul > li:has(div) p:not(.g-btn){
    order: 3;
  }
  .l-imageTextSide > ul > li:has(div) .g-btn{
    order: 4;
    grid-column: span 2;
    margin-top: 20px;
  }
}

/* l-productList */
.l-productList > ul:has(li .l-btn){
  display: grid;
}
@media screen and (min-width: 768px){
  .l-productList > ul:has(li .l-btn){
    grid-template-columns: repeat(3,1fr);
    gap: 50px 30px;
  }
  .l-productList > ul:has(li .l-btn) img{
    margin-bottom: 10px;
  }
  .l-productList > ul:has(li .l-btn) p{
    margin-bottom: 15px;
  }
}
@media screen and (max-width: 767px){
  .l-productList > ul:has(li .l-btn){
    grid-template-columns: repeat(2,1fr);
    gap: 40px 10px;
  }
  .l-productList > ul:has(li .l-btn) img{
    margin-bottom: 8px;
  }
  .l-productList > ul:has(li .l-btn) p{
    margin-bottom: 12px;
    font-size: 12px;
  }
  .l-productList > ul:has(li .l-btn) .l-btn{
    font-size: 12px;
  }
}

/* l-textLinkContainer */
.l-textLinkContainer--bgcolorGray{
  background-color: var(--L_BGCOLOR_GRAY);
  border: 1px solid var(--L_BGCOLOR_GRAY);
}
.l-textLinkContainer--bdcolorGray{
  border: 1px solid var(--L_BDCOLOR_GRAY);
}
.l-textLinkContainer--bdcolorBlack{
  border: 1px solid var(--L_BDCOLOR_GRAY);
}
@media screen and (min-width: 768px){
  .l-textLinkContainer{
    padding: var(--GAP_30);
  }
  .l-textLinkContainer .l-btn{
    margin-top: var(--GAP_30);
  }
}
@media screen and (max-width: 767px){
  .l-textLinkContainer{
    padding: 20px 22px;
  }
  .l-textLinkContainer .l-btn{
    margin-top: 30px;
  }
}

/* l-explain */
.l-explain ul{
  display: grid;
}
.l-explain ul li{
  display: grid;
}
@media screen and (min-width: 768px){
  .l-explain ul{
    gap: var(--GAP_30);
  }
  .l-explain ul li{
    grid-template-columns: 184px 1fr;
    gap: 14px;
  }
  .l-explain h3{
    margin: 5px 0 var(--GAP_15);
  }
  .l-explain .l-link{
    margin: var(--GAP_20) 0 0 auto;
  }
}
@media screen and (max-width: 767px){
  .l-explain ul{
    gap: 30px;
  }
  .l-explain ul li{
    grid-template-columns: 102px 1fr;
    column-gap: 11px;
  }
  .l-explain h3{
    font-size: 14px;
    margin-bottom: 10px;
  }
  .l-explain .l-link{
    margin: 10px 0 0 auto;
  }
}

/* l-explain--hasBorder */
.l-explain--hasBorder ul{
  border: 1px solid var(--L_BDCOLOR_GRAY);
}
@media screen and (min-width: 768px){
  .l-explain--hasBorder ul{
    padding: var(--GAP_30);
  }
}
@media screen and (max-width: 767px){
  .l-explain--hasBorder ul{
    padding: var(--GAP_20);
  }
  .l-explain--hasBorder div{
    display: contents;
  }
  .l-explain--hasBorder h3{
    order: 1;
    grid-column: span 2;
    margin-bottom: 13px;
  }
  .l-explain--hasBorder img{
    order: 2;
  }
  .l-explain--hasBorder p{
    order: 3;
  }
  .l-explain--hasBorder a{
    order: 4;
    grid-column: span 2;
  }
}

/* l-explain--titleFlow */
.l-explain--titleFloat{
  position: relative;
}
.l-explain--titleFloat h2{
  margin-bottom: 0;
  width: fit-content;
  background: var(--WHITE);
  position: absolute;
  top: 0;
  z-index: 2;
}
@media screen and (min-width: 768px){
  .l-explain--titleFloat h2{
    left: var(--GAP_30);
    transform: translateY(-50%);
    padding: 0 10px;
  }
}
@media screen and (max-width: 767px){
  .l-explain--titleFloat h2{
    left: var(--GAP_20);
    transform: translateY(-60%);
    padding: 0 5px;
  }
}

/* l-table */
.l-table table{
  width: 100%;
}
.l-table tbody{
  display: grid;
}
.l-table tr{
  display: contents;
}
.l-table th{
  font-family: var(--FF_MINCHO);
  border-top: 1px solid var(--L_BDCOLOR_GRAY);
  font-weight: var(--FF_W_M);
}
@media screen and (min-width: 768px){
  .l-table.bgcolor--gray{
    padding: var(--GAP_30);
  }
  .l-table h2{
    margin-bottom: 20px;
  }
  .l-table tbody{
    grid-template-columns: 100px 1fr;
  }
  .l-table th,
  .l-table td{
    padding: 15px;
  }
  .l-table th{
    font-size: var(--FZ_16);
  }
  .l-table td{
    font-size: var(--FZ_12);
    border-top: 1px solid var(--BDCOLOR_GRAY_1);
  }
}
@media screen and (max-width: 767px){
  .l-table.bgcolor--gray{
    padding: 30px 20px 0 20px;
  }
  .l-table th{
    text-align: left;
    font-size: 16px;
    padding: 20px 0 10px;
  }
  .l-table td{
    font-size: 12px;
    padding-bottom: 30px;
  }
}

.l-container{
  .boldLine {
    border: 0;
    border-bottom: 2px solid #000;
    margin: 6px 0;
  }
  h2.mediumTitle{
    font-size: 19px;
    line-height: 1.6em;
    margin-bottom: 10px;
    font-weight: bold;
  }
  h2.titleIconCheck{
  	font-size: 19px;
  	position: relative;
  	padding-left:33px;
  }
  h2.titleIconCheck::after{
  	content: '';
  	display: block;
  	position: absolute;
  	left: 0;
  	top: 50%;
  	width: 20px;
  	height: 20px;
  	background: #f4f3f3;
  	border-radius: 50%;
  	border: 1px solid #f4f3f3;
  	transform: translateY(-50%);
  }
  h2.titleIconCheck::before {
    display: block;
    position: absolute;
    content: "";
    top: 49%;
    left: 4px;
    height: 10px;
    width: 6px;
    border-right: 2px solid #3f3f3f;
    border-top: 2px solid #3f3f3f;
    transform: scaleX(-1) rotate(134deg);
    transform-origin: left top;
    z-index: 4;
  }
  .dottedLine {
    border: 0;
    border-bottom: 1px dashed #000;
    margin: 6px 0;
  }
  table.block {
    width: 100%;
    margin: 10px auto 50px;
    border-top:1px solid #a9a9a9;
    border-left:1px solid #a9a9a9;
    border-collapse:collapse;
    border-spacing:0;
    empty-cells:show;
  }
  .block th {
  	font-size: 14px;
  	font-weight:normal;
    text-align: center;
    border-right:1px solid #a9a9a9;
    border-bottom:1px solid #a9a9a9;
    background-color:#f0f0f0;
    padding:10px 0 10px;
    width:200px;
  }
  .block td {
    font-size: 14px;
    border-right:1px solid #a9a9a9;
    border-bottom:1px solid #a9a9a9;
    padding:10px 10px 10px 10px;
  }
  .p-linkbtn{
  	text-align: center;
  }
  .p-linkbtn a{
  	display: inline-block;
  	text-align: center;
  	border:1px solid var(--TXT_COLOR_BASE);
  	padding:10px 80px;
  	margin:30px auto;
  }
  .titleIconHash{
	  text-align: center;
	  line-height: 1.8;
	  position: relative;
	  margin:55px 0 15px;
  }
  .titleIconHash span{
	  position: absolute;
	  top:-54px;
	  left: 50%;
	  transform: translateX(-50%);
	  -webkit-transform:translateX(-50%);
	  margin: auto;
	  font-family: var(--FF_MINCHO);
	  color: #000;
	  font-size:1.35em;
  }
  .titleIconHash span:before{
	  content:"#";
  }
  @media screen and (min-width:768px) {
    .p-linkbtn a:hover{
    	background: var(--FS_BTN_COLOR_1);
    	color: var(--WHITE);
    	opacity:1;
    }
  }
  @media screen and (max-width:767px) {
    h2.mediumTitle{
      font-size: 16px;
    }
    h2.titleIconCheck{
    	font-size: 16px;
    }
    .block th{
    	width:100px;
    	font-size:13px;
    }
    .block td{
    	font-size: 13px;
    }
    .p-linkbtn a{
	    display:block;
	    width:80%;
	    max-width:80%;
	    margin:30px auto;
	    padding:13px 0px;
    }
    .titleIconHash span{
	    top:-47px;
	    left: 50%;
	    transform: translateX(-50%);
	    -webkit-transform:translateX(-50%);
	    margin: auto;
	  }
  }

}


/* 個別余白調整用クラス */
.mgb10{
	margin-bottom: 10px;
}
.mgb20{
	margin-bottom: 20px;
}
.mgb30{
	margin-bottom: 30px;
}
.mgb40{
	margin-bottom: 40px;
}
.mgb50{
	margin-bottom: 50px;
}
.mgb60{
	margin-bottom: 60px;
}
.mgb70{
	margin-bottom: 70px;
}
.mgb80{
	margin-bottom: 80px;
}
.mgb90{
	margin-bottom: 90px;
}
.mgb100{
	margin-bottom: 100px;
}