@charset "UTF-8";

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300..700&display=swap');

/* Regukar=400 / Medium=500 / SemiBold=600 / bold=700 */

:target {
  scroll-margin-top: 150px;
}
.spSet,
.spSetin,
.spSetimb {
    display: none !important;
}
.pcSet {
    display: block !important;
}
.pcSetin {
    display: inline !important;
}
.pcSetinb {
    display: inline-block !important;
}
#howto1{
    font-family: "Noto Sans JP", sans-serif;
    font-optical-sizing: auto;
    background-color:#FFF8ED;
}
#howto1 .kv{
    width:100%;
    height:400px;
    text-align:center;
}
#howto1 .kv .ttl1 img{
    width:auto;
    height:400px;
    margin:0 auto;
    vertical-align:bottom;
}
#howto1 .mokuji{
    width:710px;
    margin:5px auto 36px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 25px 25px;
}
#howto1 .mokuji li{
    width:220px;
}
#howto1 .mokuji li a{
    display:block;
    width:220px;
    box-sizing:border-box;
    font-size:24px;
    border-radius:2em;
    padding:1em 1em;
    background-color:#FF6E00;
    background-image:url("../_img_bg/pc/pc_btn_icon_arrow.svg");
    background-size: 30px 30px;
    background-position:center right 1em;
    background-repeat:no-repeat;
}
#howto1 .mokuji li img{
    height:24px;
}
#howto1 .mokuji li.comingsoon{
    background-color:#E8D2AA;
    text-align:center;
    background-image:none;
    width:220px;
    box-sizing:border-box;
    font-size:24px;
    border-radius:2em;
    padding:1em 1em;
}

#howto1 .eachEdition{
    width:800px;
    margin:0 auto;
    padding-bottom:80px;
}
.eachEdition .eachBox{
    width:800px;
    margin:0 auto 45px;
    background-color:#fff;
    padding-bottom:37px;
}
.eachEdition .eachBox .ttl3{
    width:490px;
    margin:0 auto 24px;
    padding:45px 0 14px 0;
    text-align:center;
    background-image:url("../_img_bg/pc/pc_deco_line5.svg");
    background-repeat:no-repeat;
    background-position:left bottom;
    background-size:486px 4px;
}
.eachEdition .eachBox .ttl3 img{
    height:30px;
}
.eachEdition .eachBox .imageCut{
    width:400px;
    margin:0 auto 25px;
}
.eachBox .imageCut img{
    width:100%;
    cursor: zoom-in;
}
.eachEdition .eachBox .btn a{
    display:block;
    width:370px;
    box-sizing:border-box;
    font-size:28px;
    border-radius:2em;
    padding:.9em 1.2em;
    margin:0 auto;
    background-color:#FF6E00;
    background-image:url("../_img_bg/pc/pc_btn_icon_arrow2.png");
    background-size: 30px 30px;
    background-position:center right 1em;
    background-repeat:no-repeat;
}
.eachEdition .eachBox .btn img{
    height:28px;
}

.eachEdition .kanaheiCopylight{
    width:125px;
    margin:80px auto 20px;
}


/* ------- モーダル ------- */
#backMaskBase {
  background: #000;
  display: none;
  height: 100%;
  left: 0px;
  opacity: 0.7;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 9990;
  cursor: zoom-out;
}
#modalWin {
  display: none;
  top: 0;
  left: 0;
  margin: 0;
  padding: 0;
  height: 0;
  position: relative;
  width: 100%;
  z-index: 9991;
}
#modalContent {
  display: none;
  position: relative;
  background-color: #fff;
  box-shadow: 3px 3px 8px #000;
  box-sizing: border-box;
  min-width: 400px;
  max-width: 800px;
  height: auto;
  min-height: 30vh;
  max-height: 90vh;
  overflow: auto;
  margin: 15px auto 0;
  padding: 0 0 20px 0;
  z-index: 9992;
  text-align: center;
  color: #000;
}
#modalContent .closeBtn {
  position: absolute;
  top: 2px;
  right: 3px;
  width: 27px;
  height: 27px;
  background-color: #555;
  border-radius: 5px;
  cursor: pointer;
  z-index: 999;
  transition: all 150ms 0s ease;
  border: 1px solid #eee;
}
#modalContent .closeBtn:hover {
  opacity: 0.7;
  transition: 0.3s ease;
}
#modalContent .closeBtn div {
  display: inline-block;
  position: relative;
  margin: 5px 0 0 0;
  padding: 0;
  width: 2px;
  height: 17px;
  background: #fff;
  transform: rotate(45deg);
}
#modalContent .closeBtn div:before {
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: -7px;
  width: 16px;
  height: 2px;
  margin-top: -1px;
  background: #fff;
}

.modalinner {
  width: 100%;
  text-align: center;
  padding: 15px 0 0 0;
}
.mobMdlTtl01 {
  text-align: center;
  font-size: 16px;
  font-weight: 550;
  background-color: #733;
  height: 32px;
  color: #fff;
  line-height: 1.5em;
}
.modalinner img {
  width: 100%;
}
.zoomin {
  cursor: zoom-in;
}












/* --- SP --- */
@media screen and (max-width:768px){

    .pcSet,
    .pcSetin,
    .pcSetinb {
        display: none !important;
    }
    .spSet {
        display: block !important;
    }
    .spSetin {
        display: inline !important;
    }
    .spSetinb {
        display: inline-block !important;
    }
    
    #howto1 .kv{
        width:100%;
        height:86.6vw;
        text-align:center;
    }
    #howto1 .kv .ttl1 img{
        width:100%;
        height:auto;
        vertical-align:bottom;
    }
    #howto1 .mokuji{
        width:99vw;
        margin:1.5vw auto 10vw;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 5vw 5vw;
    }
    #howto1 .mokuji li{
        width:41vw;
    }
    #howto1 .mokuji li a{
        display:block;
        width:41vw;
        box-sizing:border-box;
        font-size:4.4vw;
        border-radius:2em;
        padding:1.4em 1em;
        background-color:#FF6E00;
        background-image:url("../_img_bg/pc/pc_btn_icon_arrow.svg");
        background-size: 7.5vw 7.5vw;
        background-position:center right 0.7em;
        background-repeat:no-repeat;
    }
    #howto1 .mokuji li img{
        height:4.4vw;
    }
    #howto1 .mokuji li.comingsoon{
        background-color:#E8D2AA;
        text-align:center;
        background-image:none;
        width:41vw;
        box-sizing:border-box;
        font-size:4.4vw;
        border-radius:2em;
        padding:1.4em 1em;
    }

    #howto1 .eachEdition{
        width:100vw;
        margin:0 auto;
        padding-bottom:8vw;
    }
    .eachEdition .eachBox{
        width:88vw;
        margin:0 auto 10vw;
        background-color:#fff;
        padding-bottom:10vw;
    }
    .eachEdition .eachBox .ttl3{
        width:66.6vw;
        margin:0 auto 3.2vw;
        padding:8.5vw 0 3.4vw 0;
        text-align:center;
        background-image:url("../_img_bg/sp/sp_deco_line5.svg");
        background-repeat:no-repeat;
        background-position:left bottom;
        background-size:66.6vw 4px;
    }
    .eachEdition .eachBox .ttl3 img{
        height:6.4vw;
    }
    .eachEdition .eachBox .imageCut{
        width:63.5vw;
        margin:0 auto 10vw;
    }
    .eachBox .imageCut img{
        width:100%;
        cursor: default;
    }
    .eachEdition .eachBox .btn a{
        display:block;
        width:71.73vw;
        box-sizing:border-box;
        font-size:5.3vw;
        border-radius:2em;
        padding: 1.2em 1.7em;
        margin:0 auto;
        background-color:#FF6E00;
        background-image:url("../_img_bg/pc/pc_btn_icon_arrow2.png");
        background-size: 7.5vw 7.5vw;
        background-position:center right 0.8em;
        background-repeat:no-repeat;
    }
    .eachEdition .eachBox .btn img{
        height:5.33vw;
    }
    .eachEdition .kanaheiCopylight{
        width:16.5vw;
        margin:12vw auto 3vw;
    }
    .eachEdition .kanaheiCopylight img{
        width:100%;
    }



/* ------- モーダル ------- */
#modalContent {
  display: none;
  position: relative;
  background-color: #fff;
  box-shadow: 3px 3px 8px #000;
  box-sizing: border-box;
  min-width: 75vw;
  max-width: 94vw;
  height: auto;
  min-height: 30vh;
  max-height: 80vh;
  overflow: auto;
  margin: 15px auto 0;
  padding: 0 0 20px 0;
  z-index: 9992;
  text-align: center;
  color: #000;
}
#modalContent .closeBtn {
  position: absolute;
  top: 2px;
  right: 3px;
  width: 27px;
  height: 27px;
  background-color: #555;
  border-radius: 5px;
  cursor: pointer;
  z-index: 999;
  transition: all 150ms 0s ease;
  border: 1px solid #eee;
}
#modalContent .closeBtn:hover {
  opacity: 0.7;
  transition: 0.3s ease;
}
#modalContent .closeBtn div {
  display: inline-block;
  position: relative;
  margin: 5px 0 0 0;
  padding: 0;
  width: 2px;
  height: 17px;
  background: #fff;
  transform: rotate(45deg);
}
#modalContent .closeBtn div:before {
  display: block;
  content: '';
  position: absolute;
  top: 50%;
  left: -7px;
  width: 16px;
  height: 2px;
  margin-top: -1px;
  background: #fff;
}

.modalinner {
  width: 100%;
  text-align: center;
  padding: 15px 0 0 0;
}
.mobMdlTtl01 {
  text-align: center;
  font-size: 16px;
  font-weight: 550;
  background-color: #733;
  height: 32px;
  color: #fff;
  line-height: 1.5em;
}
.modalinner img {
  width: 100%;
}









}/* SP */