@charset "UTF-8";

.mainContents{
padding: 0;
margin: 0;
font-size: 100%;
font-family: "Noto Sans JP", sans-serif;
color: #4a001d;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents{
font-size: calc(100vw / 1399 * 16);
}
}
@media screen and (max-width: 768px) {
.mainContents main {
font-size: calc(100vw / 750 * 32);
}
}

.mainContents ul {
padding-inline-start: 0;
}

.mainContents li {
list-style-type: none;
}

.mainContents h2,
.mainContents h3,
.mainContents h4,
.mainContents h5,
.mainContents p {
margin: 0;
}

.mainContents img {
width: 100%;
vertical-align: bottom;
}
@media screen and (max-width: 768px) {
.mainContents img {
width: 100%;
height: auto;
}
}

.mainContents a {
color: #4a001d;
text-decoration: none;
}

.mainContents a:hover{
text-decoration: none;
}

.mainContents .forSP {display: none !important;}
.mainContents .forPC {display: block !important;}
@media screen and (max-width: 768px) {
.mainContents .forSP {display: block !important;}
.mainContents .forPC {display: none !important;}
}

/* fadeの設定 */
.mainContents .fade {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.75s, transform 0.75s;
}
.mainContents .fade.active {
opacity: 1;
transform: translateY(0px);
}

/* parts */
.mainContents .wrap1140{
width: 1140px;
margin: 0 auto;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .wrap1140{
width: calc(100vw / 1399 * 1140);
}
}
@media screen and (max-width: 768px) {
.mainContents .wrap1140{
width: 100%;
overflow: hidden;
}
}

.mainContents .wrap760{
width: 760px;
margin: 0 auto;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .wrap760{
width: calc(100vw / 1399 * 760);
}
}
@media screen and (max-width: 768px) {
.mainContents .wrap760{
width: 100%;
overflow: hidden;
}
}

.mainContents .bg_yellow1{background: #fbc500;}
.mainContents .bg_yellow2{background: #ffd800;}

.mainContents .p_re{
position: relative;
}

/* clearFix */
.mainContents .cf:after{
content:"."; 
display:block; 
height:0; 
clear:both; 
visibility:hidden;
}

/* ===========================================
* fadeの設定
* ======================================== */
.mainContents .fade {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.75s, transform 0.75s;
}
.mainContents .fade.active {
opacity: 1;
transform: translateY(0px);
}

.mainContents .fade2 {
opacity: 0;
transform: translateY(80px);
transition: opacity 0.5s, transform 0.5s;
}
.mainContents .fade2.active {
opacity: 1;
transform: translateY(0px);
}

.mainContents .fade3 {
opacity: 0;
transform: translateY(30px);
transition: opacity 0.5s, transform 0.5s;
}
.mainContents .fade3.active {
opacity: 1;
transform: translateY(0px);
}

.mainContents .fade_r {
opacity: 0;
transform: translateX(100px);
transition: opacity 0.75s, transform 1s;
}
.mainContents .fade_r.active {
opacity: 1;
transform: translateX(0px);
}

.mainContents .fade_l {
opacity: 0;
transform: translateX(-100px);
transition: opacity 0.75s, transform 1s;
}
.mainContents .fade_l.active {
opacity: 1;
transform: translateX(0px);
}


/* ===========================================
* sec_kv
* ======================================== */

.mainContents .sec_kv{
width: 100%;
overflow: hidden;
background: url(/products/special/keema/images/kv_bg.gif) no-repeat center center;
background-size: cover;
}
@media screen and (max-width: 768px) {
.mainContents .sec_kv{
background-image: none;
}
}

.mainContents .sec_kv .kv_wrap{
width: 1140px;
height: 600px;
margin: 0 auto;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_kv .kv_wrap{
width: calc(100vw / 1399 * 1140);
height: calc(100vw / 1399 * 600);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_kv .kv_wrap{
width: 100%;;
height: auto;
}
}

.mainContents .sec_kv .kv_img0{
display: none;
}
@media screen and (max-width: 768px) {
.mainContents .sec_kv .kv_img0{
width: 100%;
margin: 0 auto;
text-align: center;
display: block;
}
}

.mainContents .sec_kv .kv_img1{
position: absolute;
width: 17%;
top: 15px;
left: 0;
z-index: 5;
opacity: 0;
animation: kv_fade1 0.5s 0.5s ease-in-out forwards;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_kv .kv_img1{
top: calc(100vw / 1399 * 15);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_kv .kv_img1{
width: 38%;
top: calc(100vw / 750 * 20);
left: calc(100vw / 750 * 25);
}
}

.mainContents .sec_kv .kv_img2{
position: absolute;
width: 52%;
top: 50px;
left: 50px;
z-index: 4;
opacity: 0;
animation: kv_fade2 0.5s 1s ease-in-out forwards;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_kv .kv_img2{
top: calc(100vw / 1399 * 50);
left: calc(100vw / 1399 * 50);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_kv .kv_img2{
width: 84%;
top: calc(100vw / 750 * 105);
left: 0;
right: 0;
margin: auto;
}
}

.mainContents .sec_kv .kv_img3{
position: absolute;
width: 47%;
bottom: 0;
right: 0;
z-index: 1;
opacity: 0;
animation: kv_fade3 0.5s 1.5s ease-in-out forwards;
}
@media screen and (max-width: 768px) {
.mainContents .sec_kv .kv_img3{
width: 70%;
bottom: 0;
right: calc(100vw / 750 * 140);
}
}

.mainContents .sec_kv .kv_img4{
position: absolute;
width: 75%;
bottom: 20px;
left: 0;
z-index: 3;
opacity: 0;
animation: kv_fade1 0.5s 2s ease-in-out forwards;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_kv .kv_img4{
bottom: calc(100vw / 1399 * 20);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_kv .kv_img4{
width: 89%;
bottom: calc(100vw / 750 * 15);
left: 0;
right: 0;
margin: auto;
z-index: 3;
}
}

.mainContents .sec_kv .kv_img5{
position: absolute;
width: 18%;
bottom: 27px;
right: 90px;
z-index: 2;
opacity: 0;
animation: kv_fade4 0.5s 2.5s ease-in-out forwards;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_kv .kv_img5{
bottom: calc(100vw / 1399 * 27);
right: calc(100vw / 1399 * 90);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_kv .kv_img5{
width: 26%;
bottom: calc(100vw / 750 * 150);
right: calc(100vw / 750 * 30);
z-index: 2;
}
}

@keyframes kv_fade1 {
0% {transform:scale(0); opacity: 0;}
80% {transform:scale(1.15); opacity: 1;}
100% {transform: scale(1); opacity: 1;}
}

@keyframes kv_fade2 {
0% {transform: translateX(-100%); opacity: 0;}
100% {transform: translateX(0); opacity: 1;}
}

@keyframes kv_fade3 {
0% {transform: translateX(100%); opacity: 0;}
100% {transform: translateX(0); opacity: 1;}
}

@keyframes kv_fade4 {
0% {opacity: 0;}
100% {opacity: 1;}
}


/* ===========================================
* sec_menu
* ======================================== */
.mainContents .sec_menu {
width: 100%;
margin: 0 auto;
text-align: center;
}

.mainContents .sec_menu ul{
width: 92%;
margin: 0 auto;
text-align: center;
padding: 90px 0 0;
display: flex;
justify-content: space-between;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_menu ul{
padding: calc(100vw / 1399 * 90) 0 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_menu ul{
width: 80%;
padding: calc(100vw / 750 * 80) 0 calc(100vw / 750 * 15);
justify-content: flex-start;
flex-wrap:wrap;
}
}

.mainContents .sec_menu ul li{
width: 17%;
}
@media screen and (max-width: 768px) {
.mainContents .sec_menu ul li{width: 30%;}
.mainContents .sec_menu ul li:nth-of-type(1){ margin-right: 16%; margin-bottom: calc(100vw / 750 * 20);}
.mainContents .sec_menu ul li:nth-of-type(2){ margin-bottom: calc(100vw / 750 * 20);}
.mainContents .sec_menu ul li:nth-of-type(3){ margin-left: 23%; margin-right: 16%;}
}

.mainContents .sec_menu ul li a{
  overflow: hidden;
  position: relative;
}

.mainContents .sec_menu ul li a img {
  transition: 0.25s all;
  display: block;
  width: 100%;
  height: auto;
}

.mainContents .sec_menu ul li a img:hover {
  transform: scale(1.1);
  opacity: 1;
}


/* ===========================================
* sec_movie
* ======================================== */
.mainContents .sec_mv {
width: 100%;
padding: 95px 0 0;
margin: 0 auto;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_mv {
padding: calc(100vw / 1399 * 95) 0 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_mv {
width: 100%;
padding: calc(100vw / 750 * 65) 0 0;
}
}

.mainContents .sec_mv .mv_wrap{
width: 100%;
padding: 0;
margin: 0 auto;
text-align: center;
}

.mainContents .sec_mv .mv_wrap video.mv_main {
width: 100%;
border-radius: 10px;
margin: 0 auto;
padding: 0;
cursor:pointer;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_mv .mv_wrap video.mv_main {
border-radius: calc(100vw / 1399 * 10);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_mv .mv_wrap video.mv_main {
width: 85%;
border-radius: calc(100vw / 750 * 10);
}
}

.mainContents .sec_mv h3{
width: 83%;
margin: 25px auto 0;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_mv h3{
margin: calc(100vw / 1399 * 25) auto 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_mv h3{
width: 78%;
margin: calc(100vw / 750 * -10) auto 0;
}
}


/* ===========================================
* sec_concept
* ======================================== */
.mainContents .sec_concept{
width: 100%;
padding: 90px 0 90px;
margin: 0 auto;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_concept{
padding: calc(100vw / 1399 * 90) 0 calc(100vw / 1399 * 90);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_concept{
padding: calc(100vw / 750 * 80) 0 calc(100vw / 750 * 80);
}
}

.mainContents .sec_concept p{
font-size: 180%;
font-weight: 700;
line-height: 1.8;
}
@media screen and (max-width: 768px) {
.mainContents .sec_concept p{
font-size: 100%;
font-weight: 700;
}
}

.mainContents .sec_concept p:nth-of-type(1){margin:0 auto 60px;}
.mainContents .sec_concept p:nth-of-type(2){margin:0 auto 45px;}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_concept p:nth-of-type(1){margin:0 auto calc(100vw / 1399 * 60);}
.mainContents .sec_concept p:nth-of-type(2){margin:0 auto calc(100vw / 1399 * 45);}
}
@media screen and (max-width: 768px) {
.mainContents .sec_concept p:nth-of-type(1){margin:0 auto;}
.mainContents .sec_concept p:nth-of-type(2){margin:0 auto;}
.mainContents .sec_concept p:nth-of-type(3){margin:0 auto;}
}

.mainContents .sec_concept h4{
margin: 0 auto 15px;
padding: 0;
font-size: 235%;
line-height: 1.8;
align-items: center; /* 線を上下中央 */
display: flex; /* 文字と線を横並び */
justify-content: center; /* 文字を中央寄せ */
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_concept h4{
margin: 0 auto calc(100vw / 1399 * 15);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_concept h4{
margin: 0;
font-size: 112.5%;
}
}

.mainContents .sec_concept h4::before,
.mainContents .sec_concept h4::after{
background-color: #4a001d; /* 線の色 */
border-radius: 5px; /* 線の両端を丸く */
content: "";
height: 2px; /* 線の幅 */
width: 60px; /* 線の長さ */
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_concept h4::before,
.mainContents .sec_concept h4::after{
width: calc(100vw / 1399 * 60); /* 線の長さ */
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_concept h4::before,
.mainContents .sec_concept h4::after{
width: calc(100vw / 750 * 45); /* 線の長さ */
}
}

.mainContents .sec_concept h4::before{
margin-right: 0; /* 文字との余白 */
transform: rotate(60deg); /* 傾ける */
}
.mainContents .sec_concept h4::after{
margin-left: 0; /* 文字との余白 */
transform: rotate(-60deg); /* 傾ける */
}

.mainContents .sec_concept .p_ab1{
width: 26%;
position: absolute;
top: 25px;
left: 10px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_concept .p_ab1{
top: calc(100vw / 1399 * 25);
left: calc(100vw / 1399 * 10);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_concept .p_ab1{
width: 46%;
position: static;
top: 0;
left: 0;
right: 0;
margin: calc(100vw / 750 * 30) auto;
}
}

.mainContents .sec_concept .p_ab2{
width: 26%;
position: absolute;
top: 25px;
right: 10px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_concept .p_ab2{
top: calc(100vw / 1399 * 25);
right: calc(100vw / 1399 * 10);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_concept .p_ab2{
width: 46%;
position: static;
top: 0;
left: 0;
right: 0;
margin: calc(100vw / 750 * 30) auto;
}
}

.mainContents .sec_concept .p_ab3{
width: 53%;
margin: 20px auto;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_concept .p_ab3{
margin: calc(100vw / 1399 * 20) auto;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_concept .p_ab3{
width: 63%;
margin: calc(100vw / 750 * 30) auto;
}
}


/* ===========================================
* sec_angled
* ======================================== */
.mainContents .sec_angled {
  width: 100%;
  position: relative;
  z-index: 99;
}

.mainContents .sec_angled::before{ /* アンカーリンク調整用 */
display: block;
padding-top: 50px !important;
margin-top: -50px !important;
content: "";
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_angled::before{ /* アンカーリンク調整用 */
padding-top: calc(100vw / 1399 * 50) !important;
margin-top: calc(100vw / 1399 * -50) !important;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_angled::before{ /* アンカーリンク調整用 */
padding-top: calc(100vw / 750 * 40) !important;
margin-top: calc(100vw / 750 * -40) !important;
}
}

.mainContents .sec_angled .angled_wrap1,
.mainContents .sec_angled .angled_wrap2,
.mainContents .sec_angled .angled_wrap3,
.mainContents .sec_angled .angled_wrap4{
margin-top:-1px; 
position: relative;
transform: skewY(-5deg);
display: flex;
align-items: center;
justify-content: center;
}

.mainContents .sec_angled .angled_wrap1{
position: relative;
z-index: 10;
height: 400px;
border-top:#fff solid 45px;
background: #ffffff url(/products/special/keema/images/angled_bg1.gif) no-repeat center center / cover;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_angled .angled_wrap1{
height: calc(100vw / 1399 * 400);
border-top:#fff solid calc(100vw / 1399 * 45);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_angled .angled_wrap1{
height: calc(100vw / 750 * 790);
border-top:#fff solid calc(100vw / 750 * 25);
background: #ffffff url(/products/special/keema/images/angled_bg1_sp.gif) no-repeat center center / cover;
}
}

.mainContents .sec_angled .angled_wrap2{
position: relative;
z-index: 20;
height: 400px;
border-top:#fff solid 45px;
background: #ffffff url(/products/special/keema/images/angled_bg2.gif) no-repeat center center / cover;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_angled .angled_wrap2{
height: calc(100vw / 1399 * 400);
border-top:#fff solid calc(100vw / 1399 * 45);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_angled .angled_wrap2{
height: calc(100vw / 750 * 790);
border-top:#fff solid calc(100vw / 750 * 25);
background: #ffffff url(/products/special/keema/images/angled_bg2_sp.gif) no-repeat center center / cover;
}
}

.mainContents .sec_angled .angled_wrap3{
position: relative;
z-index: 30;
height: 400px;
border-top:#fff solid 45px;
background: #ffffff url(/products/special/keema/images/angled_bg1.gif) no-repeat center center / cover;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_angled .angled_wrap3{
height: calc(100vw / 1399 * 400);
border-top:#fff solid calc(100vw / 1399 * 45);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_angled .angled_wrap3{
height: calc(100vw / 750 * 790);
border-top:#fff solid calc(100vw / 750 * 25);
background: #ffffff url(/products/special/keema/images/angled_bg1_sp.gif) no-repeat center center / cover;
}
}

.mainContents .sec_angled .angled_wrap4{
position: relative;
z-index: 40;
height: 100px;
border-top:#fff solid 45px;
background: #fbc500;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_angled .angled_wrap4{
height: calc(100vw / 1399 * 100);
border-top:#fff solid calc(100vw / 1399 * 45);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_angled .angled_wrap4{
height: calc(100vw / 750 * 70);
border-top:#fff solid calc(100vw / 750 * 25);
}
}

.mainContents .sec_angled .angled_wrap1 .inner,
.mainContents .sec_angled .angled_wrap2 .inner,
.mainContents .sec_angled .angled_wrap3 .inner{
transform: skewY(5deg); /* 逆方向で補正 */
width: 1140px;
padding: 0;
box-sizing: border-box;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_angled .angled_wrap1 .inner,
.mainContents .sec_angled .angled_wrap2 .inner,
.mainContents .sec_angled .angled_wrap3 .inner{
width: calc(100vw / 1399 * 1140);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_angled .angled_wrap1 .inner,
.mainContents .sec_angled .angled_wrap2 .inner,
.mainContents .sec_angled .angled_wrap3 .inner{
width: 100%;
}
}

.mainContents .sec_angled .angled_wrap1 .inner h4{
width: 53%;
position: absolute;
z-index: 12;
top:50px;
left:50px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_angled .angled_wrap1 .inner h4{
top: calc(100vw / 1399 * 50);
left: calc(100vw / 1399 * 50);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_angled .angled_wrap1 .inner h4{
width: 82%;
position: static;
margin: 0 auto;
text-align: center;
}
}

.mainContents .sec_angled .angled_wrap1 .inner p{
width: 41%;
margin: 230px 0 0 100px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_angled .angled_wrap1 .inner p{
margin: calc(100vw / 1399 * 230) 0 0 calc(100vw / 1399 * 100);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_angled .angled_wrap1 .inner p{
width: 74%;
margin: calc(100vw / 750 * -10) auto 0;
text-align: center;
}
}

.mainContents .sec_angled .angled_wrap1 .inner .p_ab{
width: 46%;
position: absolute;
z-index: 11;
bottom: -65px;
right: 10px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_angled .angled_wrap1 .inner .p_ab{
bottom: calc(100vw / 1399 * -65);
right: calc(100vw / 1399 * 10);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_angled .angled_wrap1 .inner .p_ab{
width: 70%;
position: static;
margin: 0 auto calc(100vw / 750 * -50);
}
}

.mainContents .sec_angled .angled_wrap2 .inner h4{
width: 50%;
position: absolute;
z-index: 22;
top: -50px;
right: 50px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_angled .angled_wrap2 .inner h4{
top: calc(100vw / 1399 * -50);
right: calc(100vw / 1399 * 50);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_angled .angled_wrap2 .inner h4{
width: 78%;
position: static;
margin: 0 auto;
text-align: center;
}
}

.mainContents .sec_angled .angled_wrap2 .inner p{
text-align: right !important;
width: 32%;
margin: 120px 80px 0 auto;
display: block;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_angled .angled_wrap2 .inner p{
margin: calc(100vw / 1399 * 120) calc(100vw / 1399 * 80) 0 auto;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_angled .angled_wrap2 .inner p{
width: 59%;
margin: calc(100vw / 750 * -10) auto 0;
text-align: center;
}
}

.mainContents .sec_angled .angled_wrap2 .inner .p_ab{
width: 48%;
position: absolute;
z-index: 21;
bottom: -180px;
left: 30px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_angled .angled_wrap2 .inner .p_ab{
bottom: calc(100vw / 1399 * -180);
left: calc(100vw / 1399 * 30);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_angled .angled_wrap2 .inner .p_ab{
width: 77%;
position: static;
margin: 0 auto calc(100vw / 750 * -50);
}
}

.mainContents .sec_angled .angled_wrap3 .inner h4{
width: 50%;
position: absolute;
z-index: 32;
top: 40px;
left: 50px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_angled .angled_wrap3 .inner h4{
top: calc(100vw / 1399 * 40);
left: calc(100vw / 1399 * 50);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_angled .angled_wrap3 .inner h4{
width: 77%;
position: static;
margin: 0 auto;
text-align: center;
}
}

.mainContents .sec_angled .angled_wrap3 .inner p{
width: 40%;
margin: 230px 0 0 100px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_angled .angled_wrap3 .inner p{
margin: calc(100vw / 1399 * 230) 0 0 calc(100vw / 1399 * 100);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_angled .angled_wrap3 .inner p{
width: 71%;
margin: calc(100vw / 750 * -10) auto calc(100vw / 750 * -20);
text-align: center;
}
}

.mainContents .sec_angled .angled_wrap3 .inner .p_ab{
width: 42%;
position: absolute;
z-index: 31;
bottom: -60px;
right: 15px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_angled .angled_wrap3 .inner .p_ab{
bottom: calc(100vw / 1399 * -60);
right: calc(100vw / 1399 * 15);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_angled .angled_wrap3 .inner .p_ab{
width: 65%;
position: static;
margin: 0 auto calc(100vw / 750 * -50);
}
}


/* ===========================================
* sec_howto
* ======================================== */
.mainContents .sec_howto{
width: 100%;
padding: 40px 0 100px;
margin: 0 auto;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_howto{
padding: calc(100vw / 1399 * 40) 0 calc(100vw / 1399 * 100);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_howto{
padding: calc(100vw / 750 * 50) 0 calc(100vw / 750 * 100);
}
}

.mainContents .sec_howto h3{
width: 84%;
margin: 0 auto 40px;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_howto h3{
margin: 0 auto calc(100vw / 1399 * 40);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_howto h3{
width: 77%;
margin: 0 auto calc(100vw / 750 * 65);
}
}

.mainContents .sec_howto ul{
width: 93%;
margin: 0 auto 210px;
text-align: center;
padding: 0 0 0;
display: flex;
justify-content: space-between;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_howto ul{
margin: 0 auto calc(100vw / 1399 * 210);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_howto ul{
width: 80%;
margin: 0 auto;
display: block;
}
}

.mainContents .sec_howto ul li{
width: 31%;
}
@media screen and (max-width: 768px) {
.mainContents .sec_howto ul li{
width: 100%;
margin: 0 auto calc(100vw / 750 * 30);
text-align: center;
}
.mainContents .sec_howto ul li:nth-child(3){
margin: 0 auto;
}
}

.mainContents .sec_howto ul li div {
filter: drop-shadow(8px 8px 8px rgba(35, 24, 21, 0.3));
}
@media screen and (max-width: 768px) {
.mainContents .sec_howto ul li div {
width: 61%;
margin: 0 auto;
text-align: center;
}
}

.mainContents .sec_howto ul li p{
margin: 12px auto 0;
font-size: 137.5%;
font-weight: 700;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_howto ul li p{
margin: calc(100vw / 1399 * 12) auto 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_howto ul li p{
margin: calc(100vw / 750 * 10) auto 0;
font-size: 75%;
}
}

/* aタグ内の画像に共通で適用 */
.mainContents .sec_howto ul li a img {
  transition: 0.25s all;
  display: block;
  width: 100%;
  height: auto;
}

/* aタグにhoverしたら画像を拡大 */
.mainContents .sec_howto ul li a:hover img {
  transform: scale(1.05);
  opacity: 1;
}


.mainContents .sec_howto .inner{
margin: 0 auto;
padding: 70px 40px 35px;
background: #ffffff;
border-radius: 26px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_howto .inner{
padding: calc(100vw / 1399 * 70) calc(100vw / 1399 * 40) calc(100vw / 1399 * 35);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_howto .inner{
width: 90%;
padding: calc(100vw / 750 * 80) 0 calc(100vw / 750 * 60);
}
}

.mainContents .sec_howto .inner h4{
width: 24%;
position: absolute;
top: -60px;
left: 85px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_howto .inner h4{
top: calc(100vw / 1399 * -60);
left: calc(100vw / 1399 * 85);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_howto .inner h4{
width: 40%;
top: calc(100vw / 750 * -40);
left: 0;
right: 0;
margin: auto;
}
}

.mainContents .sec_howto .inner h5{
width: 55%;
margin: 0 0 25px 20px;
text-align: left;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_howto .inner h5{
margin: 0 0 calc(100vw / 1399 * 25) calc(100vw / 1399 * 20);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_howto .inner h5{
width: 85%;
margin: 0 auto;
text-align: center;
}
}

.mainContents .sec_howto .inner .howtomake_img{
position: relative;
z-index: 11;
}
@media screen and (max-width: 768px) {
.mainContents .sec_howto .inner .howtomake_img{
width: 88%;
margin: calc(100vw / 750 * 45) auto 0;
text-align: center;
}
}

.mainContents .sec_howto .inner .p_ab{
width: 41%;
position: absolute;
z-index: 10;
top: -175px;
right: 30px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_howto .inner .p_ab{
top: calc(100vw / 1399 * -175);
right: calc(100vw / 1399 * 30);
}
}

.mainContents .sec_howto .howtomake_ph{}
@media screen and (max-width: 768px) {
.mainContents .sec_howto .howtomake_ph{
width: 81%;
margin: calc(100vw / 750 * 30) auto 0;
text-align: center;
}
}


/* ===========================================
* sec_arrange
* ======================================== */
.mainContents .sec_arrange{
width: 100%;
padding: 100px 0 45px;
margin: 0 auto 0;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_arrange{
padding: calc(100vw / 1399 * 100) 0 calc(100vw / 1399 * 45);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_arrange{
padding: calc(100vw / 750 * 70) 0 0;
}
}

.mainContents .sec_arrange h3{
width: 46%;
padding: 0 0 120px 40px;
margin: 0 auto;
text-align: center;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_arrange h3{
padding: 0 0 calc(100vw / 1399 * 120) calc(100vw / 1399 * 40);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_arrange h3{
width: 78%;
padding: 0 0 calc(100vw / 750 * 70);
margin: 0 auto;
text-align: center;
}
}

.mainContents .sec_arrange h3::before{ /* アンカーリンク調整用 */
display: block;
padding-top: 200px !important;
margin-top: -200px !important;
content: "";
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_arrange h3::before{ /* アンカーリンク調整用 */
padding-top: calc(100vw / 1399 * 200) !important;
margin-top: calc(100vw / 1399 * -200) !important;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_arrange h3::before{ /* アンカーリンク調整用 */
padding-top: calc(100vw / 750 * 50) !important;
margin-top: calc(100vw / 750 * -50) !important;
}
}

.mainContents .sec_arrange h4{
width: 90%;
padding: 10px 0 15px;
margin: auto;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_arrange h4{
padding: calc(100vw / 1399 * 10) 0 calc(100vw / 1399 * 15);
}
}
.mainContents .sec_arrange h4 img{
margin-top: -30px;
}

.mainContents .sec_arrange .p_ab{
width: 25%;
position: absolute;
z-index: 10;
bottom: -10px;
left: 25px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_arrange .p_ab{
bottom: calc(100vw / 1399 * -10);
left: calc(100vw / 1399 * 25);
}
}

.mainContents .sec_arrange .arrange1{
position: relative;
z-index: 11;
margin: 0 auto;
padding: 0 0 40px;
background: #fff8a3;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_arrange .arrange1{
padding: 0 0 calc(100vw / 1399 * 40);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_arrange .arrange1{
padding: 0 0 calc(100vw / 750 * 50);
}
}

.mainContents .sec_arrange .arrange2,
.mainContents .sec_arrange .arrange3{
margin: 45px auto 0;
padding: 0 0 40px;
background: #fff8a3;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_arrange .arrange2,
.mainContents .sec_arrange .arrange3{
margin: calc(100vw / 1399 * 45) auto 0;
padding: 0 0 calc(100vw / 1399 * 40);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_arrange .arrange2,
.mainContents .sec_arrange .arrange3{
margin: calc(100vw / 750 * 60) auto 0;
padding: 0 0 calc(100vw / 750 * 50);
}
}

.mainContents .sec_arrange ul{
width: 93%;
margin: 0 auto;
text-align: center;
padding: 0;
display: flex;
justify-content: space-between;
}
@media screen and (max-width: 768px) {
.mainContents .sec_arrange ul{
width: 90%;
flex-wrap:wrap;
}
}

.mainContents .sec_arrange ul li{
width: 32%;
}
@media screen and (max-width: 768px) {
.mainContents .sec_arrange ul li{
width: 48%;
margin-top: calc(100vw / 750 * 50);
}
}

.mainContents .sec_arrange ul li a > div {
  overflow: hidden;
  position: relative;
  border-radius: 20px;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_arrange ul li a > div {
  border-radius: calc(100vw / 1399 * 20);
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_arrange ul li a > div {
  border-radius: calc(100vw / 750 * 20);
}
}

.mainContents .sec_arrange ul li p{
margin: 10px auto 0;
font-size: 115%;
font-weight: 700;
}
@media (min-width: 769px) and (max-width: 1399px) {
.mainContents .sec_arrange ul li p{
margin: calc(100vw / 1399 * 10) auto 0;
}
}
@media screen and (max-width: 768px) {
.mainContents .sec_arrange ul li p{
margin: calc(100vw / 750 * 10) auto 0;
font-size: 62.5%;
line-height: 1.4;
letter-spacing: -0.05em;
}
}

/* aタグ内の画像に共通で適用 */
.mainContents .sec_arrange ul li a img {
  transition: 0.25s all;
  display: block;
  width: 100%;
  height: auto;
}

/* aタグにhoverしたら画像を拡大 */
.mainContents .sec_arrange ul li a:hover img {
  transform: scale(1.1);
  opacity: 1;
}

.mainContents .sec_arrange .arrange_ph{}
@media screen and (max-width: 768px) {
.mainContents .sec_arrange .arrange_ph{
width: 58%;
margin: calc(100vw / 750 * -10) auto 0;
text-align: center;
}
}

/* ===========================================
* sns
* ======================================== */
.mainContents .sns_area {
width: 100%;
margin: 100px auto 0;
text-align: center;
}

.mainContents .sns_area ul{
display: flex;
justify-content: center;
margin-top: 0;
}

.mainContents .sns_area li{
width: 6%;
}

.mainContents .sns_area li:not(:first-child) {
margin-left: 49px;
}
@media screen and (max-width: 768px) {
.mainContents .sns_area li {
width: 15.47%;
}
.mainContents .sns_area li:not(:first-child) {
margin-left: 10.7%;
}
}