@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');

*{box-sizing:border-box!important;}
body{margin:0;padding:0;}
h1,h2,h3,h4,p,a,ul,li{font-family:'Noto Sans JP', sans-serif!important; font-weight:400; color:#535353; margin:0;}
b,strong{font-weight:600;}
li{list-style:none;}
ul,li{padding:0;}
a{text-decoration:none;}
img{display:block; width:100%;}

/* 汎用テンプレート */
.feature-c{width:100%; max-width:750px; margin:0 auto; font-size:16px; letter-spacing:0.06em; line-height:1.25;}
.feature-c a{transition:0.2s;}
.feature-c a:hover{opacity:0.5;}

.feature-c .breadcrumb ul{display:flex; margin: 3em 0 1em;}
.feature-c .breadcrumb ul li{position:relative; padding-right:12px; margin-right:5px;}
.feature-c .breadcrumb ul li:last-of-type{padding-right:0; margin-right:0;}
.feature-c .breadcrumb ul li::after{content:''; width:0.4em; height:0.4em; border:0; border-top:solid 2px #333; border-right:solid 2px #333; transform:rotate(45deg); position:absolute; top:0; right:0; bottom:0; margin: auto;}
.feature-c .breadcrumb ul li:last-of-type::after{border:none;}

.feature-c header{margin-top:1em;}
.feature-c header h1{padding:1em 0.5em 1em; font-size:1.6em; font-weight:700;}

.feature-c nav{background:#E4E4E4; padding:1.5em 1em; margin-bottom:4em;}
.feature-c nav p{font-weight:600; font-size:1.4em;}
.feature-c nav ul{margin:1em auto 0; padding-left:0;}
.feature-c nav ul li{margin-top:0.5em; padding-bottom:0.5em; border-bottom:dotted 1px #535353;}
.feature-c nav ul li a{font-weight:500;}
.feature-c nav ul li.small a{padding-left:1em; font-weight:400;}

.feature-c section{padding-bottom:1em;}
.feature-c section h2{background:#E4E4E4; padding:0.5em 0.5em 0.5em; margin-bottom:1em; font-size:1.4em; font-weight:700;}
.feature-c section h3{padding:0 0.5em 0; margin-top:1em; margin-bottom:1em; font-size:1.2em; font-weight:700;}
.feature-c section p{padding:0 0.5em 0; margin-top:1em; line-height:1.75; margin-bottom:3em; text-align:justify;}
.feature-c section div p{font-size:0.85em; margin-top: 0.5em;}

.feature-c aside{margin:0 auto 4em; padding:1em; border:dashed 1px #535353; width:98%; max-width:500px;}
.feature-c aside>p{font-weight:600; font-size:1.2em; margin-bottom:1em;}
.feature-c aside ul{padding:0;margin:0;}
.feature-c aside ul li{display:flex; margin-bottom:0.5em;}
.feature-c aside ul li:last-of-type{margin-bottom:0;}
.feature-c aside ul li a{width:35%;}
.feature-c aside ul li p{width:65%; padding-top:1em; font-size:0.9em; text-align:justify;}


/* 商品紹介テンプレート */
.feature-i{width:100%; max-width:750px; margin:0 auto; font-size:16px; letter-spacing:0.06em; line-height:1.25; text-align:center;}
.feature-i .inner{padding:0;}

.feature-i .breadcrumb ul{display:flex; margin: 3em 0 1em;}
.feature-i .breadcrumb ul li{position:relative; padding-right:12px; margin-right:5px;}
.feature-i .breadcrumb ul li:last-of-type{padding-right:0; margin-right:0;}
.feature-i .breadcrumb ul li::after{content:''; width:0.4em; height:0.4em; border:0; border-top:solid 2px #333; border-right:solid 2px #333; transform:rotate(45deg); position:absolute; top:0; right:0; bottom:0; margin: auto;}
.feature-i .breadcrumb ul li:last-of-type::after{border:none;}

.feature-i header h1{padding:1em 0 1em; font-size:1.6em; font-weight:700;}
.feature-i header .intro{font-size:1.15em; margin-bottom:2em; line-height:1.6;}

.feature-i section{padding:3em 0;}
.feature-i section h2{font-size:1.5em; letter-spacing:3px; margin-bottom:1em; line-height:1; font-weight:600;}
.feature-i section h2 span{display:block; font-size:0.55em; margin-top:10px;}
.feature-i section .scene_wrap{margin-bottom:0;}
.feature-i section .scene{position:relative; overflow:hidden;}
.feature-i section .item li{position:absolute;}
.feature-i section .item li .pointer{width:35px; height:35px; border-radius:50%; display:block; position:absolute; left:0; top:0; cursor:pointer; pointer-events:auto; z-index:1;}
.feature-i section .item li .pointer::before{content:""; display:block; position:absolute; top:0; bottom:0; left:0; right:0; margin:auto; width:12px; height:12px; border:1px solid #fff; border-radius:50%; pointer-events:none; animation:pulsate 2s linear infinite;}
.feature-i section .item li .pointer span{position:absolute; left:50%; top:50%; transform:translate(-50%, -50%); background-color:#fff; border-radius:50%; width:12px; height:12px;}
.feature-i section .item li .pointer span::after{position:absolute; content:""; width:0; height:0; border-style:solid; margin:auto; opacity:0;}
.feature-i section .item li .pointer.top span::after{bottom:13px; left:50%; border-width:20px 7px 0 7px; border-color:#fff transparent transparent transparent; transform:translateX(-50%);}
.feature-i section .item li .pointer.bottom span::after{top:13px; left:50%; border-width:0 7px 20px 7px; border-color:transparent transparent #fff transparent; transform:translateX(-50%);}
.feature-i section .item li .pointer.left span::after{top:0; right:13px; bottom:0; border-width:7px 0 7px 20px; border-color:transparent transparent transparent #fff;}
.feature-i section .item li .pointer.right span::after{top:0; left:13px; bottom:0; border-width:7px 20px 7px 0; border-color:transparent #fff transparent transparent;}
.feature-i section .item li .pointer.active span::after{opacity:1;}

.feature-i section .item li .product{position:absolute; width:160px; border-radius:5px; background-color:#fff; padding:0.8em calc(0.5em + 10px) 0.8em 0.5em; opacity:0; transition:0s; cursor:default; z-index:-1;}
.feature-i section .item li .product.active{opacity:1; cursor:pointer; z-index:0;}
.feature-i section .item li .product .title{font-size:0.875em; line-height:1.3; position:relative;}
.feature-i section .item li .product .title::after{content:''; width:0.6em; height:0.6em; border:0; border-top:solid 2px #333; border-right:solid 2px #333; transform:rotate(45deg); position:absolute; top:0; right:-7px; bottom:0; margin: auto;}
.feature-i section h3{margin-top:1em; margin-bottom:2em; font-weight:400;}
.feature-i section h3 span{display:block; font-size:1.25em; margin-bottom:0.5em; line-height:1.5; font-weight:500;}

.feature-i section .point{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; margin-bottom:-40px; line-height:1.5; position:relative; z-index:1;}
.feature-i section .point li{width:22%; margin:0 4% 40px 0; padding-top:0.5em;}
.feature-i section .point li:nth-of-type(4n){margin-right:0;}
.feature-i section .point li .num{position:relative; width:3em; height:3em; background:#fff; border-radius:50%; margin:0 auto -1em;}
.feature-i section .point li .num span{font-size:1.6em; line-height:1; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.feature-i section .point li .num span::before{position:absolute; content:"point"; font-size:0.6em; background:#fff; left:50%; top:-1.25em; transform:translateX(-50%); font-weight:600;}
.feature-i section .point li img{border-radius:15px;}
.feature-i section .point li .txt{margin-top:0.4em; font-size:0.94em; text-align:justify;}

.feature-i section .reco{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; margin-bottom:-40px; line-height:1.5; position:relative; z-index:1;}
.feature-i section .reco li{width:22%; margin:0 4% 40px 0; padding-top:0.5em;}
.feature-i section .reco li:nth-of-type(4n){margin-right:0;}
.feature-i section .reco li .num{position:relative; width:3em; height:3em; background:#fff; border-radius:50%; margin:0 auto -1em;}
.feature-i section .reco li .num span{font-size:1.6em; line-height:1; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.feature-i section .reco li img{border-radius:15px;}
.feature-i section .reco li h4{margin-top:0.4em; font-size:1.13em;}

.scroll-hint-text{display:none;}
.scroll-hint-icon{width:80px; top:auto; bottom:7%; left:auto; right:5%; background:rgba(255, 255, 255, 0.3); border-radius:20px;}

@keyframes pulsate {
  0% {transform:scale(1); opacity:1;}
  100% {transform:scale(2); opacity:0;}
}

@media screen and (max-width: 750px) {
  .feature-i .inner{padding:0 5vw;}
  .feature-i section .scene_wrap {width:700px; overflow-x:scroll;}
  .feature-i section .scene{border-radius:30px;}
  .feature-i section .point li{width:48%; margin:0 4% 20px 0}
  .feature-i section .point li:nth-of-type(2n){margin-right:0;}
  .feature-i section .reco li{width:48%; margin:0 4% 20px 0}
  .feature-i section .reco li:nth-of-type(2n){margin-right:0;}
}



/* 共通フッター */
footer{}
footer div{margin:0 0.5em 3em;}
footer div h4{font-weight:700; text-align:center;}
footer div ul{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:16px;}
footer div ul li i{color:#fff; font-size:1.5em;}
footer .share_button{display:inline-block; padding:8px 24px; border-radius:8px; color:#fff; background-color:#333; text-decoration:none; transition:0.4s;}
footer .share_twitter{background-color: #1da1f2;}
footer .share_facebook{background-color: #3C5A9A;}
footer .share_line{background-color: #00b900;}
footer .share_hatena{background-color: #008FDE;}
footer .share_pocket{background-color: #ee4056;}