@charset "utf-8";


/* 共通 */
body {
    font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue","Mplus 1p", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}
html,body,h1,h2,h3,h4,p,ul,li,dl,dt,dd,a,table,th,td,span,figure {
    margin: 0;
    padding: 0;
    line-height: 1.0;
    font-weight: normal;
    font-size: 100%;
    vertical-align:baseline;
}
ul {
    list-style:none;
}
a {
    text-decoration:none;
    color:inherit;
}
a:hover {
    text-decoration:none;
}
img {
    border:none;
    vertical-align:bottom;
    max-width:100%;
    max-height:100%;
}

/* 共通 */
.hide {
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
}
.flex_box {
    display:flex;
}
.bold {
    font-weight:bold;
}
#MainCont {
  width:100%;
  max-width:780px;
  margin:auto;
  padding:0;
  box-sizing:border-box;
}

/* .top */
.top {
    max-width:780px;height:0;padding-bottom:67.3%;
    background:url(../img/top_bg.png) no-repeat 37% center/contain;
    position:relative;
}
.top_title {
    position:absolute;
    top:0;bottom:0;right:0;left:0;
    margin:auto;
    background:url(../img/top_logo.png) no-repeat center/contain;
    width:50%;
    height:0;
    padding-bottom:28%;
}
.off30 {
    position:absolute;
    top:auto;bottom:-25px;right:-10px;left:auto;
    margin:auto;
    background:url(../img/top_30off.png) no-repeat center/contain;
    width:37%;
    height:0;padding-bottom:13%;
}
.top_day {
    position:absolute;
    top:auto;bottom:-25px;right:auto;left:-10px;
    background:url(../img/top_day.png) no-repeat center/contain;
    width:35%;
  height:0;padding-bottom:13%;
}
/* .body */
.body {
    max-width:780px;
    background:url(../img/pagebg.jpg) repeat-y center/cover;
  background-size:100%;
    padding:15px 0;
    box-sizing:border-box;
}
.con_area {
    margin:0 27px 87px;
}
.bg_acc {
    display:block;
    width:100%;
    max-width:780px;
    height:0;
    padding:57.5px 0;
    background:url(../img/bg.png) no-repeat center/cover;
    margin-top:calc(-20px - 77px);
    margin-bottom:-20px;
}
.con_area {
    z-index:101;
    position:relative
}
.bg_acc {
    z-index:100;
    position:absolute;
}

/*  */

.maca_con {
    padding:25px 15px 40px;
    background:#fff;
    box-sizing:border-box;
    margin:0 27px 0;
  align-items:flex-start;
}
.maca_img {
    height:170px;
    box-sizing:border-box;
}
.style_con .maca_img {
  padding:0 20px;
}
.maca_con .left {
  flex-direction:column;
  align-items:center;
  width:35%;
}
.maca_con .right {
  width:65%;
}
.maca_sub {
  font-size:11px;
  margin:10px 0 5px;
}
.maca_name {
  font-weight:800;
  line-height:1.4;
}
.maca_con .right .maca_title {
    font-weight: bold;
    font-size: 20px;
    line-height: 1.4;
    margin:10px 0 25px;
}
.maca_con .right .maca_kounyu a {
    display: block;
    background: url(../img/kounyu_bg.png) no-repeat center/cover;
    text-align: center;
    width:160px;
    height:40px;
    line-height:40px;
    font-size: 16px;
    font-weight: 800;
    color: #fff;
}
.maca_con .right .maca_kounyu:nth-child(1) a {
    margin:0 20px 0 0;
}
.maca_con .right .maca_kounyu:nth-child(2) a {
    margin:0 0 0 20px;
}
.maca_text {
  margin:0 0 25px;
  line-height:1.4;
}
.style_span {
  font-weight:800;
}
.style_con {
  margin-bottom:27px;
}

/* con_top */
.con_area {
    box-sizing:border-box;
    padding:25px 15px;
    background:#fff;
}
.con_area .under_content {
    text-align:center;
}
.con_area .under_content p {
    padding:0 10px;
}
.con_area .under_content .con_top_title {
	padding-bottom: 8px;
	border-bottom: 3px solid #910000;
	display: inline-block;
    color:#fff;
    font-size:22px;
}
.con_top_title {
    background:url(../img/title01.png) no-repeat center 1em/contain;
    width:100%;
    max-width:194px;
    height:calc(50px + 1em);
    margin:-1em auto 25px;
    text-indent:calc(100% + 20px);
    color:#fff;
}
.con_top ul {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}
.con_top a {
    display:block;
    transition:0.5s;
    box-sizing:border-box;
    margin-bottom:25px;
}
.con_top li {
  width:calc((100% - 30px) / 3 );
}
.con_top li:first-of-type {
    margin-right:15px;
}
.con_top li:nth-of-type(3) {
    margin-left:15px;
}
.con_top a:hover {
    box-shadow:0 0 15px #606060;
}
.con_top p {
    text-align:center;
    padding: 20px 0;
    box-sizing:border-box;
    font-size:12px;
}
/* .con01 */
.under_box {
    text-align:center;
}
.under_box h3 {
	padding: 0 0 5px;
}
.con_title {
    font-family: a-otf-midashi-go-mb31-pr6n, sans-serif;

font-weight: 600;

font-style: normal;
    margin:0 auto 25px;
    color:#000000;
	padding-bottom: 8px;
	border-bottom: 3px solid #910000;
	display: inline-block;
    font-size:22px;
}
.contop {
    display:flex;
    flex-wrap:nowrap;
    justify-content:space-between;
    margin-bottom:25px;
}
.contop_left {
    width:50%;
    max-width:400px;
}
.contop_right {
    width:50%;
    max-width:320px;
}
.contop_left .movie a {
    display:inline-block;
    margin-top:10px;
    padding-left:30px;
    background:url(../img/movie_btn.png) no-repeat left 5px center/contain;
}
.contop_right .sub_title {
    font-weight:bold;
    font-size:15px;
    line-height:1.4;
    margin-bottom:25px;
}
.contop_right dl {
}
.contop_right dt {
    line-height:1.4;
    font-weight:800;
    font-size:14px;
    margin-top:10px;
}
.contop_right dd {
    line-height:1.4;
    font-size:14px;
    padding:2px 0 2px 25px;
}
.contop_right dd span {
    font-size:10px;
    display:block;
    padding-left:1em;
}
.contop_right .br {
    font-size:inherit;
    padding-left:1em;
    padding-bottom:5px;
}
.conmid h4 {
    background:url(../img/howtobg.jpg) no-repeat center/contain;
}
.conbot h4 {
    background:url(../img/siyoubg.jpg) no-repeat center/contain;
}
.conmid h4.right {
    background:url(../img/howtobg_right.jpg) no-repeat center/contain;
}
.conmid h4.left {
    background:url(../img/howtobg_left.jpg) no-repeat center/contain;
}

.conmid h4,.conbot h4 {
    max-width:434px;
    height:32px;
    margin:0 auto 25px;
    color:#fff;
    text-align:center;
    line-height:32px;
    font-size:18px;
}
.conmid ul {
    display:flex;
    flex-wrap:wrap;
    justify-content:flex-start;
    margin-bottom:25px;
}
.conmid li {
    width:calc((100% - 30px)  / 3);
    margin-right:15px;
    margin-bottom:15px;
}
.conmid li:nth-of-type(3n) {
    margin-right:0;
}
.conmid p:nth-child(1) {
    margin-bottom:10px;
}
.conmid li p {
    line-height:1.7;
    font-size:14px;
}
.conmid li p:nth-child(2) {
    margin-bottom:5px;
}
.conmid li:nth-of-type(1) p:nth-child(2):before {
    content:"【1】";
}
.conmid li:nth-of-type(2) p:nth-child(2):before {
    content:"【2】";
}
.conmid li:nth-of-type(3) p:nth-child(2):before {
    content:"【3】";
}
.conmid li:nth-of-type(4) p:nth-child(2):before {
    content:"【4】";
}
.conmid li:nth-of-type(5) p:nth-child(2):before {
    content:"【5】";
}
.conmid li p:nth-child(n+3) {
    /*text-indent:1em;*/
}
.conbot ul {
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
}
.conbot li {
    width:calc((100% - 15px) / 2);
    display:flex;
    flex-wrap:wrap;
    padding:10px 0 ;
    box-sizing:border-box;
    justify-content:center;
    border:2px dashed #a8a8a8;
    border-radius:5px;
    margin-bottom:15px;
}
.conbot li:nth-of-type(2n) {
    margin-left:15px;
}
.conbot figure {
  display:block;
    width:29.67%;
}
.conbot .right {
    width:68%;
}
.conbot .right p {
    line-height:1.4;
}
.conbot_title {
    margin-bottom:10px;
    font-size:12px;
}
.conbot_text {
    height:3.5em;
  font-weight:600;
}
.conbot_price {
    font-size:13px;
  text-align:right;
    margin:15px 0;
}
.conbot_price span {
    font-size:16px;
    padding-right:10px;
    color:#000000;
}
.conbot_kounyu {
    width:100%;
    margin:15px 0;
}
.conbot_kounyu a {
    display:block;
    background:url(../img/kounyu_bg.png) no-repeat center/contain;
    height:40px;
    line-height:40px;
    text-align:center;
    font-size:16px;
    font-weight:800;
    color:#fff;
}

.conbot .diypaint li {
    width:80%;
    padding:15px;
}
.conbot .diypaint img {
    max-width:150px;
    margin-bottom:25px;
}
.conbot .diypaint .right {
    width:calc(100% - 150px);
}

/* .con06 */
.con_area.con06 {
    margin-bottom:0;
}
.osusume_list {
    display:flex;
    flex-wrap:wrap;
}
.osusume_list li {
    width:calc((100% - 15px) / 3);
    margin-right:5px;
    margin-bottom:5px;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    border:2px dashed #a8a8a8;
    border-radius:5px;
    margin-bottom:10px;
    box-sizing:border-box;
    padding-top:20px;
}
.osusume_list li:nth-child(3n) {
    margin-right:0;
}
.osusume_left {
    flex-basis:30%;
}
.osusume_right {
    flex-basis:70%;
}
.osusume_list .conbot_kounyu {
    flex-basis:180px;
}
.osusume_list .conbot_kounyu a {
    font-size:12px;
  height:30px;
  line-height:30px;
}
.osusume_right p:nth-of-type(1) {
    line-height:1.4;
    height:3em;
    display:block;
    font-size:15px;
}
.osusume_right p:nth-of-type(2) {
    font-size:12px;
    text-align:right;
    box-sizing:border-box;
    padding-right:10px;
}
.osusume_right p:nth-of-type(2) span:nth-of-type(1) {
    padding:30px 10px 10px 0;
    display:inherit;
}
.osusume_right p:nth-of-type(2) span:nth-of-type(2) {
    font-size:18px;
    color:#000000;
}

/* .footer */
p.footer {
    background:url(../img/footer.png) no-repeat center/contain;
    max-width:550px;
    height:0;
  padding-bottom:21.81%;
    margin:25px auto;
}
.pagetop {
    display:none;
    position: fixed;
    bottom: 30px;
    right: 15px;
    z-index:999;
}
.pagetop a {
    display: block;
    background-color: #ff8d8d;
    text-align: center;
    color: #222;
    font-size: 15px;
    text-decoration: none;
  border-radius:2px;
    padding: 15px;
    opacity: 0.8;
    transition:0.5s;
}
.pagetop a:hover {
    display: block;
    background-color: #7bc97e;
    text-align: center;
    color: #fff;
    font-size: 15px;
    text-decoration: none;
    padding:15px;
    opacity: 0.8;
  border-radius:2px;
}
.pc {
  display:block;
}
.sp {
  display:none;
}

/* footer */
footer {
    margin-top:50px;
  text-align:center;
  border:none!important;
}
footer ul {
  justify-content:center;
  align-items:center;
  margin-bottom:30px;
}
footer a {
  display:block;
  box-sizing:border-box;
  width:43px;
  height:43px;
  border-radius:3px;
  transition:0.3s;
}
footer a:hover {
  opacity:0.3;
}
footer li:nth-child(1) a {
  margin-right:30px;
  background:url(../img/icon_fb.png) no-repeat center/contain;
}
footer li:nth-child(2) a {
  margin-right:30px;
  background:url(../img/icon_ig.png) no-repeat center/contain;
}
footer li:nth-child(3) a {
  background:url(../img/icon_yt.png) no-repeat center/contain;
}
footer .foo_text {
  font-size:15px;
  margin-bottom:30px;
}
footer .last_text {
  font-size:10px;
  margin-bottom:10px;
}
span.span_zei {
  font-size:0.6em;
}

@media screen and (max-width:768px) {
  .pc {
    display:none;
  }
  .sp {
    display:block;
  }
    .maca_con {
        margin:0 3.46% 15px;
        display:block;
    }
  .maca_con .left,.maca_con .right {
    width:100%;
  }
    .maca_con img {
        padding:0;
        margin:auto;
    }
    .maca_con .left p {
        text-align:center;
    }
    .maca_con .right {
        display:flex;
        justify-content:center;
        align-items:center;
        flex-wrap:wrap;
    }
        .maca_con .right .flex_box {
            width:100%;
        justify-content:center;
        align-items:center;
    }
    .con_top_title {
        background:url(../img/title01.png) no-repeat center 1em/contain;
    }
    .con_area {
        margin:0 3.46% 15px;
    }
  #MainCont {
    /*float:inherit;*/
  }
  .off30 {
    right:0;bottom:-15px;
  }
  .top_day {
    left:0;bottom:-15px;
  }
  .bg_acc {
    position:inherit;
      margin-top:-20px;
      margin-bottom:0;
    padding:7.5% 0;
  }
  .con_title {
    margin:0 auto 20px;
    
      display:block;
      text-align:center;
  }
  .contop {
    flex-wrap:wrap;
  }
  .contop_left,.contop_right {
    width:100%;
    max-width:100%;
    margin-bottom:15px;
  }
  .conmid li {
    width:calc((100% - 10px) / 2 );
    margin-right:10px;
  }
  .conmid li:nth-of-type(2n) {
      margin-right:0;
  }
  .conmid li:nth-of-type(3n) {
      margin-right:10px;
  }
  .conbot li {
    width:100%;
    max-width:350px;
  }
  .conbot li:nth-of-type(2n) {
    margin-left:0;
  }
  .conmid h4,.conbot h4 {
    margin-bottom:10px;
  }
  .conbot .diypaint li {
    width:100%;
  }
  .conbot .diypaint .diy_left,.conbot .diypaint .diy_right {
    width:100%;
  }
  .osusume_list {
    box-sizing:border-box;
  }
  .osusume_list li {
    width:calc((100% - 10px) / 2 );
    margin-right:10px;
  }
  .osusume_list li:nth-child(3n) {
    margin-right:10px;
  }
  .osusume_list li:nth-child(2n) {
    margin-right:0px;
  }
}
@media screen and (max-width:414px) {
  .top {
    padding-bottom:67.5%;
    background:url(../img/top_bg.png) no-repeat 2px center/contain;
  }
  
  .body {
    padding:5px 0;
  }
    .maca_con {
        margin:0px 3.53% 15px;
    }
    .maca_con .right .maca_kounyu:nth-child(1) a {
        width:100%;
        max-width:160px;
        font-size:12px;
    }
    .maca_con .right .maca_kounyu:nth-child(2) a {
        width:100%;
        max-width:160px;
        font-size:12px;
    }
  .off30 {
    right:0;bottom:-5px;
  }
  .top_day {
    left:0;bottom:-5px;
  }
  .con_area {
    margin:0 3.53% 10px;
    padding:12px;
  }
  .con_top ul {
    display:inherit;
  }
  .con_top li {
    width:100%;
    margin:auto;
  }
  .con_top li:first-of-type,.con_top li:nth-of-type(3n) {
    margin:auto;
  }
  .con_top p {
    padding:10px 0;
  }
  .con_top_title {
    margin-bottom:30px;
  }
  .con_title {
    
  }
  .conmid ul {
    display:inherit;
  }
  .conmid li {
    width:100%;
    margin-right:0;
  }
  .conmid li:nth-of-type(3n) {
      margin-right:0;
  }
  .conbot li {
    display:inherit;
    padding:0 10px;
  }
  .bg_acc {
    margin:-10px 0;
  }
  .osusume_list {
    display:inherit;
  }
  .osusume_list li {
    width:100%;
    margin-right:0;
    display:inherit;
    padding:10px;
  }
  .osusume_list li:nth-child(3n) {
    margin-right:0;
  }
  .conbot figure {
    width:80%;
  }
  .conbot figure img {
    max-width:100%;
  }
  .conbot .right {
    width:100%;
  }
  .diypaint .right {
    display:none;
  }
  .conbot .diypaint img {
    width:100%;
    max-width:100%;
  }
  .osusume_left {
    width:50%;
    margin:auto;
  }
  .osusume_right p:nth-of-type(1) {
    height:auto;
  }
  .conbot_text {
    font-size:15px;
    height:auto;
  }
  .conbot_price {
    font-size:15px;
  }
  .conbot_price span {
    font-size:18px;
  }
  .con_top p {
    font-size:15px;
    font-weight:bold;
  }
  .osusume_right p:nth-of-type(2) {
    font-size:15px;
    text-align:left;
  }
  .osusume_right p:nth-of-type(2) span:nth-of-type(1) {
    padding:20px 0 10px;
  }
  .osusume_right p:nth-of-type(2) span:nth-of-type(2) {
    font-size:20px;
  }
}