@charset "utf-8";

/* 共通 */
/*body {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue","Mplus 1p", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}*/
.hide {
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
}
.flex {
  box-sizing:border-box;
  display:flex;
}

/* #top */
body {
    width:100%;
    height:100vh;
    background-color:#fffcf4;
}
a {
    transition:0.3s;
}
a:hover {
    opacity:0.5;
}
figure {
    text-align:center;
}

/* header */
.header {
    width:100%;
    height:0;
    padding-bottom:60.51%;
  box-sizing:border-box;
  margin:0 auto 90px;
    background:url(../img/top.jpg) no-repeat top center/contain;
}

.con_top {
    margin-bottom:180px;
}
.con_top .flex {
    justify-content:center;
    align-items:flex-start;
    flex-wrap:nowrap;
}
.con_top01 {
    flex-direction: row;
    margin-bottom:90px;
}
.con_top02 {
    flex-direction: row-reverse;
}
.con_top01 .right {
    width:50%;
}
.con_top02 .left {
    width:50%;
}
.con_top01 .left,.con_top02 .right {
    width:50%;
    display:flex;
    justify-content:center;
    padding-top:25px;
}
.con_top02 .left {
    text-align:right;
}
.con_top01 .left p,.con_top02 .right p {
    line-height:1.8;
    font-size:1.3vw;
}
.dunn_link {
    display:inline-block;
    width:50px;
    vertical-align:middle;
    padding:0 5px;
}


.con_osusume .title_back,.con_image .title_back {
    width:100%;
    background-color:#fff;
    padding:25px 0;
    margin-bottom:90px;
    position:relative;
}
.con_howto h2 {
    width:100%;
    background-color:#fff;
    padding:25px 0;
    text-align:center;
    font-size:21px;
    font-family: a-otf-futo-go-b101-pr6n, sans-serif;
    margin-bottom:90px;
    line-height:1.4;
    position:relative;
}
.con_osusume h2,.con_image h2 {
    font-size:21px;
    text-align:center;
    font-family: a-otf-futo-go-b101-pr6n, sans-serif;
    z-index:1000;
}
.box {
    display:block;
    position:absolute;
    margin:auto;
    z-index:99;
}
.box01 {
    width:60px;
    height:90px;
    background:#f7f0f7;
}
.box02 {
    width:60px;
    height:60px;
    background:#edf9f9;
}
.box03 {
    width:90px;
    height:60px;
    background:#e4f7ec;
}
.con_osusume .box01 {
    left:0;
    top:0;
    right:570px;
    bottom:0;
}
.con_osusume .box02 {
    right:0;
    top:-50%;
    left:520px;
    bottom:auto;
}
.con_osusume .box03 {
    right:80px;
    bottom:-70%;
    left:auto;
    top:0;
}
.con_image .box01 {
    left:0;
    top:0;
    right:920px;
    bottom:-65%;
}
.con_image .box02 {
    right:0;
    top:0;
    left:610px;
    bottom:-150%;
}
.con_image .box03 {
    right:500px;
    bottom:0;
    left:0;
    top:-125%;
}


.osusume_wrap,.tukaikata_wrap {
    justify-content:space-around;
    align-items:flex-start;
    flex-wrap:nowrap;
    max-width:980px;
    margin:0 auto 180px;;
}
.osusume_wrap figure,.tukaikata_wrap figure {
width:calc((100% - 50px) / 3 );
    margin-right:25px;
}
.osusume_wrap figure:last-child,.tukaikata_wrap figure:last-child {
    margin-right:0;
}
.osusume_wrap img,.tukaikata_wrap img {
    box-sizing:border-box;
    border:10px solid #fff;
    margin-bottom:25px;
}
.osusume_wrap p {
    text-align:center;
    font-size:16px;
}
.tukaikata_wrap .text {
    padding-left:1em;
    line-height:1.4;
    font-size:16px;
}

.arrow {
    height:94px;
    background:url(../img/icon_arrow.png) no-repeat center/contain;
    text-align:center;
    line-height:70px;
    margin-bottom:90px;
}

.kawaitara_wrap {
    justify-content:flex-start;
    align-items:flex-start;
    flex-wrap:nowrap;
    width:100%;
    max-width:760px;
    margin:0 auto 90px;
}
.kawaitara_wrap figure {
    width:50%;
    max-width:330px;
    margin-right:75px;
}
.kawaitara_wrap .kawaitara_text {
    
}
.kawaitara_wrap h3 {
    font-size:20px;
    padding-top:25px;
    margin-bottom:25px;
    font-weight:bold;
}
.kawaitara_wrap p {
    font-size:16px;
    line-height:1.4;
}
.kawaitara_link a {
    display:inline-block;
    margin-top:10px;
    background:#fff;
    padding:15px 40px 15px 15px;
    position:relative;
    text-align:center;
    box-sizing:border-box;
    
}
.kawaitara_link a::after {
    content:"";
    display:block;
    position:absolute;
    top:0;bottom:0;right:0;left:auto;
    margin:auto;
    width:0;
    height:0;
    border-top:0.7em solid transparent;
    border-right:1em solid transparent;
    border-bottom:0.7em solid transparent;
    border-left:1em solid #fff1d4;
}

.item_wrap {
    width:100%;
    max-width:760px;
    background-color:#fff;
    padding:25px;
    box-sizing:border-box;
    justify-content:space-around;
    align-items:center;
}
.item_wrap figure {
    width:50%;
    max-width:220px;
}
.item_wrap .right {
    width:50%;
}
.item_wrap .sub {
    font-size:14px;
    margin-bottom:25px;
}
.item_wrap .name {
    font-size:16px;
    line-height:1.4;
    margin-bottom:25px;
}
.item_wrap .link a {
    display:inline-block;
    padding:10px 115px 10px 75px;
    margin:0 0 0 25px;
    text-align:center;
    background-color:#fff1d4;
    box-sizing:border-box;
    position:relative;
}
.item_wrap .link a span {
    display:block;
    position:absolute;
    top:0;bottom:0;right:75px;left:auto;
    margin:auto;
    width:25px;
    height:25px;
    background:url(../img/link_item.png) no-repeat center/contain;
}
.item_prime {
    margin:0 auto 90px;
}
.item_prime3 {
    margin:0 auto 180px;
}
.item_diy,.item_tool {
    margin:0 auto 90px;
}
.red {
    /*color:red;*/
    font-weight:bold;
    line-height:2;
}

.image_top {
    width:100%;
    max-width:980px;
    margin:0 auto 90px;
}
.con_image h3 {
    font-size:21px;
    font-family: a-otf-futo-go-b101-pr6n, sans-serif;
    margin-bottom:90px;
    text-align:center;
}

/* footer */
footer {
  text-align:center;
    padding-bottom:20px;
}
footer ul {
  justify-content:center;
  align-items:center;
  margin-bottom:30px;
}
footer a {
  display:block;
  box-sizing:border-box;
  width:25px;
  height:25px;
  border-radius:3px;
  transition:0.3s;
}
footer a:hover {
  opacity:0.3;
}
footer li.fb_link a {
  background:url(../img/icon_fb.png) no-repeat center/contain;
}
footer li.ig_link a {
  margin-right:10px;
  background:url(../img/icon_ig.png) no-repeat center/contain;
}
footer li.yt_link a {
  background:url(../img/icon_yt.png) no-repeat center/contain;
  margin-right:10px;
}
footer .foo_text {
  font-size:12px;
  margin-bottom:25px;
    color:#727171;
}
footer .last_text {
  font-size:10px;
    color:#727171;
}
footer .nho_t {
  font-size:12px;
  margin:0 0 25px;
    color:#727171;
}
footer .nho_link a {
  display:block;
  width:100%;
  height:100%;
  max-height:34px;
  max-width:300px;
  margin:0 auto 25px;
    padding:0 10px;
}
footer .prt_t {
  font-size:12px;
  margin:30px 0 5px;
    color:#727171;
}
footer .prt_link a {
  display:block;
  width:100%;
  height:100%;
  max-height:58px;
  max-width:160px;
  margin:0 auto 40px;
    padding:0 10px;
}

/* topへ */
#page_top{
  width: 40px;
  height: 40px;
  position: fixed;
  right: 5px;
  bottom: 10px;
  opacity: 0.6;
  z-index:900;
}
#page_top a{
  position: relative;
  display: block;
  /*width: 40px;
  height: 40px;*/
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #000;
  position: absolute;
  width: 25px;
  height: 25px;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
/*#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  position: absolute;
  top: 45px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
  color: #000;
}*/

.sp_on {
  display:none;
}
/*.sp_off {
  display:block;
}*/

/* youtube */
.youtube2 {
  position: relative;
  width: 100%;
    max-width:760px;
    margin:0 auto 90px;
  padding:0 0 56.25%;
}
.youtube2 iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

/* サイズ別設定 */
/* 760以上 */
@media screen and (min-width: 760px) {
    .youtube2 {
        padding:0;
        height:420px;
    }
}
@media screen and (max-width: 980px) {
}
@media screen and (max-width: 768px) {
    .header {
        width:100%;
        height:80%;
        padding-bottom:0;
        margin:0 auto 50px;
        background:url(../img/top_sp.jpg) no-repeat center/contain;
    }
    
.con_top01 .left p,.con_top02 .right p {
    font-size:16px;
}
    .con_top01 .left,.con_top02 .right {
        padding:0 20px;
        box-sizing:border-box;
    }
}


@media screen and (max-width: 850px) {
}
@media screen and (max-width: 768px) {
}
@media screen and (max-width: 574px) {
  .sp_on {
    display:block;
  }
  .sp_off {
    display:none;
  }
    .flex {
        display:inherit;
    }
    .header,.con_top01,.con_top02,.con_top,.osusume_wrap, .tukaikata_wrap,.con_howto h2,.tukaikata_wrap .text,.arrow {
        margin:0 auto 40px;
    }
    .con_top01 .left, .con_top02 .right,.con_top01 .right,.con_top02 .left,.osusume_wrap figure, .tukaikata_wrap figure,.kawaitara_wrap figure,.item_wrap figure,.item_wrap .right {
        width:100%;
        max-width:100%;
        margin:0;
    }
    .osusume_wrap figure,.con_osusume .title_back, .con_image .title_back,.kawaitara_wrap,.item_prime,.item_prime3,.image_top,.con_image h3,.item_diy, .item_tool {
        margin-bottom:40px;
    }
    .item_wrap figure {
        margin-bottom:20px;
    }
    .con_top01 .left p, .con_top02 .right p {
        line-height:1.4;
        margin-bottom:20px;
    }
    .kawaitara_wrap .kawaitara_text {
        padding:0 20px;
    }
    .item_wrap .link a,.kawaitara_link a {
        width:100%;
        margin:10px auto 0;
        padding:20px;
        text-align:center;
    }
    .box {
        display:none;
    }
    footer .flex {
        display:flex;
    }
}

@media screen and (max-width: 500px) {
}
@media screen and (max-width: 420px) {
    .header {
        height:60%;
    }
}