/* reset / common */
body{
font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
font-size: 16px;
line-height: 2.25em;
}
.l-main,main{ margin-bottom: 0; }
img{ width: 100%; }
ul{ list-style-type: none; }
ul li{ list-style: none; }
figure{ margin: 0; }
p{ margin: 0; }
.l-flex-wrap{
display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-align-items: flex-start;
align-items: flex-start;
}
.l-container{
width: 90%;
max-width: 1100px;
margin: 0 auto;
}
.u-bold{
font-weight: bold;
}
.u-note{
line-height: 1.6em;
font-size: 12px;
}
.u-note-symbol{
text-indent: -1em;
margin-left: 1em;
margin-top: 6px;
}
.u-red{
color: #e00000;
}
.l-list-dots{
padding: 0;
}
.l-list-dots li{
text-indent: -1em;
margin-left: 1em;
}
.l-list-dots li:before{
content:'・';
}
.l-2col{
padding-left: 0;
display: flex;
}
.l-2col-inner{
width: 50%;
}
.isPC{
display: block;
}
/* ▽ モーダル ▽ */
#modal_movie{
position: relative;
background: #fff;
width: auto;
max-width: 800px;
margin: 0 auto;
}
.mfp-close {
width: 50px !important;
height: 50px !important;
font-size: 0 !important;
position: absolute;
top: -64px !important;
right: 10px !important;
background: url("/learned/gummi-texture/images/btn_close.png") no-repeat center / contain !important;
}
button.mfp-arrow{
display: none;
}
.mfp-iframe-scaler iframe {
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}
.mfp-figure:after {
box-shadow: 0 0 0 rgba(0, 0, 0, 0);
}

/* PC: 1023px ~ */
.kv-block{
width: 90%;
max-width: 1100px;
margin: 22px auto 0;
position: relative;
text-align: center;
}
.kv-img{
width: 100%;
max-width: 1003px;
}
.kv-logo{
position: absolute;
top: 19px;
right: 35px; 
}
.lead-bg{
background-image: url('/learned/gummi-texture/images/bg_pc.png') ;
background-position: 50% 300px;
background-size: 100%;
padding-top: 250px;
margin-top: -250px;
background-repeat: repeat-y;
}
.lead-block{
width: 90%;
max-width: 1100px;
margin: 90px auto 0;
padding: 0 0 120px;
}
.lead-txt{
max-width: 530px;
font-size: 18px;
}
.lead-txt p{
line-height: 2em;
margin-top: 40px;
}
.lead-txt p:first-child{
margin-top: 0;
}
.lead-img{
max-width: 439px;
margin: 0 20px;
}
.m-heading{
text-align: center;
margin-top: -49px;
background-size: 110% 50px;
background-position: 50% 10px;
background-repeat: no-repeat;
}
.chart-heading-img{
width: 480px;
margin: 0 auto;
}

.m-heading.bg-white{ background-image: url('/learned/gummi-texture/images/bg_white.png'); }
.m-heading.bg-yellow{ 
background-image: url('/learned/gummi-texture/images/bg_yellow.png');
background-position: 50% 7px;
}
.chart-top{
width: 89.455%;
margin: 30px auto 0;
}
.chart-top-img{
margin-top: 35px;
}
.pickup-box{
background: #FFF1E2;
margin-top: 75px;
border-radius: 45px;
border: 2px #FEAAAA solid;
padding: 0 38px 60px;
box-sizing: border-box;
}
.pickup-heading{
width: 712px;
margin: 0 auto;
text-align: center;
position: relative;
}
.pickup-heading-img{
width: 137px;
position: absolute;
top:49%;
transform: translateY(-51%);
}
.pickup-heading-txt{
margin: 45px 0 30px 137px;
text-align: left;
padding: 0 0 0 18px;
font-size: 26px;
line-height: 1.92em;
}
.pickup-inner{
margin-top: 30px;
-webkit-justify-content: space-around;
justify-content: space-around;
}
.pickup-txt{ width: 43.13%; max-width: 440px; }
.pickup-img{ width: 50%; max-width: 500px; }
.chart-section{
margin-bottom: 159px;
}
.bg-gumi{
background-image: url('/learned/gummi-texture/images/bg_pc.png') ;
background-position: 50% 49px;
background-size: 100%;
padding-top: 54px;
padding-bottom: 150px;
margin-top: -54px;
background-repeat: repeat-y;
}
.om-heading{
width: 85%;
-webkit-justify-content: space-between;
justify-content: space-between;
padding-left: 0;
margin: 80px auto 0;
}
.om-heading-img{
max-width: 920px;
margin: 0 auto;
}
.om-heading-ttl{
overflow: hidden;
}
/*.om-heading-ttl.type01{
width: 385px;
}
.om-heading-ttl.type02{
width: 280px;
}*/
.om-heading-num{
display: block;
width: 52px;
float: left;
}
.om-heading-txt{
font-size: 30px;
font-weight: bold;
color: #FF0066;
padding: 8px 0;
margin-left: 68px;
}
.om-heading-txt sup{
font-size: 16px;
line-height: 1em;
}
.om-heading-desc{
font-weight: bold;
}
.om-heading-desc.type01{
max-width: 440px;
}
.om-heading-desc.type02{
max-width: 540px;
}
.om-heading-desc .line{
color: #FF0066;
border-bottom: #FFCC00 4px solid;
}
.om-machine-img{
max-width: 860px;
margin: 50px auto 60px;
position: relative;
}
.om-introduction{
margin: 0 60px;
}
.om-introduction li{
padding: 40px 28px 0;
}
.om-introduction p .line{
color: #FF0066;
font-weight: bold;
border-bottom: #FFCC00 4px solid;
}
.om-note{
width: 85%;
margin: 35px auto 0;
font-size: 12px;
line-height: 2.2em;
}
.bnr-section{
text-align: center;
margin-top: -49px;
padding-top: 49px;
background-size: 100% 39px;
background-position: 50% 10px;
background-repeat: no-repeat;
background-image: url('/learned/gummi-texture/images/bg_white.png');
margin-bottom: 50px;
}
.bnr-list{
padding-left: 0;
font-size: 0;
text-align: center;
margin-top: 30px;
}
.bnr-list-item{
display: inline-block;
width: 476px;
padding: 0 1.8%;
box-sizing: border-box;
font-size: initial;
line-height: 0;
margin-top: 14px;
}
.bnr-list-item a{
display: block;
}
.btn_base,
a.btn_base,
button.btn_base {
font-weight: 700;
line-height: 1.5;
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-transition: all 0.3s;
transition: all 0.3s;
text-align: center;
vertical-align: middle;
text-decoration: none;
letter-spacing: 0.1em;
color: #212529;
border-radius: 12px;
}
.btn-wrap {
margin: 46px auto 0	;
text-align: center;
}
a.btn_movie {
position: relative;
padding: 6px 180px 26px 180px;
color: #fff;
background: #ee3048;
-webkit-box-shadow: 0 7px 0 #910d1d;
box-shadow: 0 7px 0 #910d1d;
font-size: 24px;
}
a.btn_movie span {
position: absolute;
top: -15px;
left: calc(50% - 230px);
display: block;
width: 460px;
padding: 4px 0;
color: #ee3048;
border: 2px solid #ee3048;
border-radius: 100vh;
background: #fff;
-webkit-box-shadow: 0 3px 3px rgb(0 0 0 / 20%);
box-shadow: 0 3px 3px rgb(0 0 0 / 20%);
font-size: 16px;
}
a.btn_movie span:before,
a.btn_movie span:after {
position: absolute;
left: calc(50% - 10px);
content: "";
}
a.btn_movie span:before {
bottom: -10px;
border-width: 10px 10px 0 10px;
border-style: solid;
border-color: #d44114 transparent transparent transparent;
}
a.btn_movie span:after {
bottom: -7px;
border-width: 10px 10px 0 10px;
border-style: solid;
border-color: #fff transparent transparent transparent;
}
a.btn_movie:hover {
-webkit-transform: translate(0, 5px);
transform: translate(0, 5px);
color: #fff;
background: #ee3048;
-webkit-box-shadow: 0 2px 0 #910d1d;
box-shadow: 0 2px 0 #910d1d;
}

@media screen and (min-width: 769px){
.isSP{
display: none;
}
}
/* SP: ~ 768px */
@media screen and (max-width: 768px){
.l-flex-wrap{
display: block;
}
.l-2col{
display: block;
}
.isPC{
display: none;
}
.isSP{
display: block;
}
.kv-block{
width: 95%;
}
.lead-bg{
background-image: url('/learned/gummi-texture/images/bg_sp.png') ;
}
.kv-img{
width: 88.0%;
}
.kv-logo{
width: 48.7%;
right: 0;
}
.lead-bg{
padding-top: 22vh;
margin-top: -22vh;
}
.lead-block{
margin-top: 40px;
padding-bottom: 96px; 
}
.lead-txt{
width: 68.1%;
font-size: 16px;
margin: 0 auto;
}
.lead-txt p{
margin-top: 2em;
}
.lead-img{
width: 73.7%;
margin: 40px auto 0;
}
.m-heading{
text-align: center;
margin-top: -49px;
background-size: 120% 50px;
}
.m-heading.bg-white{ background-image: url('/learned/gummi-texture/images/bg_white_sp.png'); }
.m-heading.bg-yellow{ background-image: url('/learned/gummi-texture/images/bg_yellow_sp.png'); }
.chart-heading-img{
width: 70.5%;
margin: 0 auto;
}
.om-heading-img{
width: 76.2%;
margin: 0 auto;
}
.chart-top{
width: 100%;
margin-top: 40px;
}
.pickup-box{
margin-top: 70px;
border-radius: 25px;
box-sizing: border-box;
padding: 0 6% 40px;
}
.pickup-heading{
width: 100%;
}
.pickup-heading-img{
width: 85px;
top: -101px;
right: 50%;
transform: translateY(0) translateX(50%);
}
.pickup-heading-txt{
margin: 70px 0 30px 0;
padding-left: 0;
font-size: 20px;
}
.pickup-txt{
width: 100%;
max-width: 100%;
}
.pickup-img{
margin-top: 30px;
width: 100%;
max-width: 100%;
}
.chart-section{
margin-bottom: 120px;
}
.bg-gumi{
background-image: none ;
background: #fef4de;
margin-top: -20%;
padding-top: 15%;
padding-bottom: 120px;
}
.om-heading{
width: 100%;
margin: 50px 0 0;
}
.om-heading-ttl.type01,
.om-heading-ttl.type02{
width: 100%;
}
.om-heading-num{
width: 35px;
}
.om-heading-txt{
font-size: 22px;
padding: 0;
margin-left: 45px;
}
.om-heading-desc.type01,
.om-heading-desc.type02{
margin-top: 20px;
width: 100%;
}
.om-machine-img{
margin: 30px auto 20px;
}
.om-machine-list{
padding-left: 0;
}
.om-machine-list li{
margin-top: 10px;
overflow: hidden;
line-height: 1.5em;
}
.om-num{
display: block;
width: 25px;
line-height: 0;
float: left;
}
.om-txt{
display: block;
margin-left: 35px;
}
.om-txt-bold{
font-weight: bold;
display: block;
}
.om-introduction{
margin: 40px 0 0;
}
.om-introduction li{
width: 100%;
padding: 0;
}
.om-note{
width: 100%;
margin-top: 25px; 
}
.bnr-list-item{
width: 100%;
}
.bnr-section{
background-image: url('/learned/gummi-texture/images/bg_white_sp.png');
}
.mb_40{
margin-bottom: 40px;
}
.btn-wrap {
margin: 0 auto;
}
.btn_base,
a.btn_base,
button.btn_base {
line-height: 1.5;
letter-spacing: 0.04em;
}
a.btn_movie {
padding: 22px 14% 34px;
font-size: 18px;
}
.btn_txt{
margin: 0 46px;
}
a.btn_movie span {
top: -24px;
left: calc(50% - 44%);
width: 88%;
font-size: 14px;
padding: 6px 0;
}
.mfp-close {
width: 5.8vw !important;
height: 5.8vw !important;
top: -8vw !important;
right: 2vw !important;
}
}

/* 769px ~ 1023px */
@media screen and (min-width: 769px) and (max-width: 1024px){
.lead-block{
display: block;
}
.l-flex-wrap{
display: block;
}
.lead-txt,
.lead-img{
width: 100%;
margin: 0 auto;
}
.lead-img{
margin-top: 50px;
}
.pickup-heading{
width: 100%;
}
.pickup-heading-img{
width: 100px;
}
.pickup-heading-txt{
margin: 30px 0 30px 100px;
padding: 0 0 0 15px;
top:54%;
font-size: 23px;
}
.pickup-txt{
width: 100%;
max-width: 100%;
}
.pickup-img{
width: 80%;
margin: 30px auto 0;
}
.om-heading{
margin-top: 50px;
}
.om-heading-img{
width: 90%;
}
.om-heading-desc.type01,
.om-heading-desc.type02{
width: 100%;
margin-top: 30px;
}
}

@media screen and (min-width: 1025px) and (max-width: 1500px){
.lead-block{
width: 80%;
}
.lead-bg{
background-size:115%;
}
.bg-gumi{
background-size:112%;
}
}