/* base style */
.main-area,
.main_inner {
  overflow-x: hidden;
  width: 100%;
  margin: 0 auto;
  -webkit-font-feature-settings: normal;
  font-feature-settings: normal;
  color: #4d4d4d;
  font-family: 'noto-sans-cjk-jp', sans-serif;
  font-style: normal;
  font-weight: normal;
  letter-spacing: 0.02em;
  text-align: left;
}
.main-area *,
.main_inner * {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.main-area *::before, .main-area *::after,
.main_inner *::before, .main_inner *::after {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}
.main-area img, .main-area svg,
.main_inner img,
.main_inner svg {
  height: auto;
  width: 100%;
}
.sp_only {
  display: block!important;
}
.pc_only {
  display: none!important;
}
#main-container picture{
  display: block;
}
/* View_All */
#main-container .view_all{
  margin: calc(80 * (100vw / 390)) auto calc(61 * (100vw / 390));
  font-family: 'Poppins', sans-serif;
}
#main-container .viewall__btn a{
  display: inline-block;
}

@media only screen and (min-width: 560px) {
  /* ===========================
  * Style of Tablet-view *
  =========================== */
  #main-container{
    padding: 0;
    padding-top: calc(40 * (100vw / 1400));
  }
  #main-container .item-content{
    margin: auto;
  }
  .main-area, .main_inner{
    padding: 0;
  }
  .sp_only {
    display: none !important;
  }
  .pc_only {
    display: block!important;
  }
}

@media only screen and (min-width: 1400px) {
/* ===========================
* Style of Tablet-view *
=========================== */
  #main-container{
    padding: 0;
    padding-top: 40px;
  }
}





/*========================================================
breadcrumb
========================================================*/
  /* ----------[ breadcrumb SP ]---------- */
  #main-container .cateList{
    width: 89%;
    margin: calc(78 * (100vw / 390)) auto 0;
    padding:0 0 calc(15 * (100vw / 390));
    font-family: noto-sans-cjk-jp, sans-serif;
    font-style: normal;
    font-weight: normal;
    font-size: calc(10 * (100vw / 390));
    letter-spacing: 0.01em;
    line-height: calc(20 * (100vw / 390));
    color: #4d4d4d;
    /* white-space: nowrap; */
    text-align: left;
}

/* ----------[ breadcrumb table ]---------- */
@media only screen and (min-width: 560px){
    #main-container .cateList {
        -webkit-box-pack: end;
        -ms-flex-pack: end;
        -webkit-box-align: center;
        -ms-flex-align: center;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        width: calc(1280 * (100vw / 1400));
        max-width: 1280px;
        height: calc(50 * (100vw / 1400));
        max-height: 50px;
        margin: 0 auto;
        padding: 0 calc(40 * (100vw / 1400)) calc(24 * (100vw / 1400)) 0;
        font-size: calc(13 * (100vw / 1400));
        letter-spacing: 0.01em;
        line-height: normal;
        color: #4d4d4d;
    }
    #main-container .cateList span {
      padding: 0 calc(5 * (100vw / 1400));
  }
}
 
/* ----------[ breadcrumb PC ]---------- */
@media only screen and (min-width: 1400px){
  #main-container .cateList {
    margin: auto;
    padding: 0 40px 20px 0;
    font-size: 13px;
    height: 50px;
    font-family: noto-sans-cjk-jp, sans-serif;
    font-style: normal;
    font-weight: normal;
  }
  #main-container .cateList span {
    padding: 0 5px;
  }
}




.main-area{
  font-family: 'noto-sans-cjk-jp', sans-serif;
  line-height: 2;
  letter-spacing: 0.02em;
  text-align: center;
}


















/*========================================================
mainvisual
========================================================*/
.mainvisual,
.mainvisual, .mvWrap {
  position: relative;
  width: 100%;
}
@media only screen and (max-width: 559px) {
  .mainvisual .mvTtl {
    position: absolute;
    bottom: calc(29 * (100vw / 390));
    left: calc(-3 * (100vw / 390));
    display: block;
    width: calc(341 * (100vw / 390));
  }
  .mainvisual .mvTxt{
    margin-top: calc(38 * (100vw / 390));
    font-size: calc(13 * (100vw / 390));
  }
}
@media only screen and (min-width: 560px) {
  .mainvisual .mvWrap {
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    width: calc(1020 * (100vw / 1400));
    margin: calc(40 * (100vw / 1400)) auto 0 ;
  }
  .mainvisual .mvImg {
    width: calc(520 * (100vw / 1400));
  }
  .mainvisual .mvTtl {
    width: calc(307 * (100vw / 1400));
    margin-left: calc(80 * (100vw / 1400));
  }
  .mainvisual .mvTxt{
    margin-top: calc(64 * (100vw / 1400));
    font-size: calc(18 * (100vw / 1400));
  }
}
@media only screen and (min-width: 1400px) {
  .mainvisual .mvWrap {
    width: 1020px;
    margin: 40px auto 0 ;
  }
  .mainvisual .mvImg {
    width: 520px;
  }
  .mainvisual .mvTtl {
    width: 307px;
    margin-left: 80px;
  }
  .mainvisual .mvTxt{
    margin-top: 64px;
    font-size: 18px;
  }
}






/*========================================================
section
========================================================*/
.section .leadTxt.dots::before,
.section .leadTxt.dots::after{
  content: "";
  position: absolute;
  display: block;
  background: url(../img/dot_1.svg) center/100% no-repeat;
}
.section .creditBox{
  display: flex;
  flex-wrap: wrap;
}
.section .creditBox .credit a{
  font-family: 'Poppins', sans-serif;
  font-weight: 200;
  line-height: 2;
  letter-spacing: 0.02em;
  color: #909090;
  text-decoration: underline;
}
.section .leadTxt.dots{
  position: relative;
  font-family: 'Noto Serif JP', serif;
  text-align: left;
}
@media only screen and (max-width: 559px) {
  .section{

  }
  .section:not(.sec--3) .item--2{
    margin-top: calc(27 * (100vw / 390));
  }
  .section .creditBox{
    margin: calc(7 * (100vw / 390)) 0 0;
  }
  .section .creditBox .credit a{
    margin-right: calc(12 * (100vw / 390));
    font-size: calc(10 * (100vw / 390));
  }
  .section .leadTxt.dots{
    width: calc(300 * (100vw / 390));
    margin: calc(55 * (100vw / 390)) auto 0;
    font-size: calc(12 * (100vw / 390));
  }
  .section.sec--1 .leadTxt:not(.dots){
    margin: calc(33 * (100vw / 390)) auto 0;
    font-size: calc(12 * (100vw / 390));
    text-align: center;
  }
  .section .leadTxt.dots::before,
  .section .leadTxt.dots::after{
    width: calc(16 * (100vw / 390));
    height: calc(14 * (100vw / 390));
  }
  .section .leadTxt.dots::before{
    top: calc(3 * (100vw / 390));
    left: calc(-25 * (100vw / 390));
  }
  .section .leadTxt.dots::after{
    bottom: calc(3 * (100vw / 390));
    right: calc(-22 * (100vw / 390));
    background: url(../img/dot_2.svg) center/100% no-repeat;
  }
}
@media only screen and (min-width: 560px) {
  .section{
    margin-top: calc(116 * (100vw / 1400));
  }
  .section:not(.sec--3) .secImgArea{
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    width: calc(1020 * (100vw / 1400));
    margin: 0 auto 0;
  }
  .section:not(.sec--3) .itemBlock{
    width: calc(480 * (100vw / 1400));
  }
  .section .creditBox{
    margin: calc(14 * (100vw / 1400)) 0 0;
  }
  .section .creditBox .credit a{
    margin-right: calc(15 * (100vw / 1400));
    font-size: calc(11 * (100vw / 1400));
  }
  .section .leadTxt.dots{
    width: calc(752 * (100vw / 1400));
    margin: calc(72 * (100vw / 1400)) auto 0;
    font-size: calc(16 * (100vw / 1400));
    text-align: center;
  }
  .section.sec--1 .leadTxt:not(.dots){
    margin: calc(51 * (100vw / 1400)) auto 0;
    font-size: calc(16 * (100vw / 1400));
    text-align: center;
  }
  .section .leadTxt.dots::before,
  .section .leadTxt.dots::after{
    width: calc(20 * (100vw / 1400));
    height: calc(17 * (100vw / 1400));
  }
  .section .leadTxt.dots::before{
    top: calc(3 * (100vw / 1400));
    left: calc(-1 * (100vw / 1400));
  }
  .section .leadTxt.dots::after{
    bottom: calc(4 * (100vw / 1400));
    right: calc(1 * (100vw / 1400));
    background: url(../img/dot_2.svg) center/100% no-repeat;
  }
}
@media only screen and (min-width: 1400px) {
  .section{
    margin-top: 116px;
  }
  .section:not(.sec--3) .secImgArea{
    width: 1020px;
    margin: 0 auto 0;
  }
  .section:not(.sec--3) .itemBlock{
    width: 480px;
  }
  .section .creditBox{
    margin: 14px 0 0;
  }
  .section .creditBox .credit a{
    margin-right: 15px;
    font-size: 11px;
  }
  .section .leadTxt.dots{
    width: 752px;
    margin: 72px auto 0;
    font-size: 16px;
  }
  .section.sec--1 .leadTxt:not(.dots){
    margin: 51px auto 0;
    font-size: 16px;
  }
  .section .leadTxt.dots::before,
  .section .leadTxt.dots::after{
    width: 20px;
    height: 17px;
  }
  .section .leadTxt.dots::before{
    top: 3px;
    left: -1px;
  }
  .section .leadTxt.dots::after{
    bottom: 4px;
    right: 1px;
  }
}



/*========================================================
section 2
========================================================*/
@media only screen and (max-width: 559px) {
  .section.sec--2{
    margin-top: calc(57 * (100vw / 390));
  }
}
@media only screen and (min-width: 560px) {
  .section.sec--2{
    margin-top: calc(76 * (100vw / 1400));
  }
  .section.sec--2 .leadTxt.dots{
    width: calc(594 * (100vw / 1400));
    margin: calc(54 * (100vw / 1400)) auto 0;
  }
}
@media only screen and (min-width: 1400px) {
  .section.sec--2{
    margin-top: 76px;
  }
  .section.sec--2 .leadTxt.dots{
    width: 594px;
    margin: 54px auto 0;
  }
}




/*========================================================
section 3
========================================================*/
.section.sec--3 .itemBlock{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: auto;
}
@media only screen and (max-width: 559px) {
  .section.sec--3{
    margin-top: calc(50 * (100vw / 390));
  }
  .section.sec--3 .itemBlock{
    width: calc(350 * (100vw / 390));
  }
  .section.sec--3 .itemBlock .imgBox{
    margin-top: calc(6 * (100vw / 390));
    width: calc(172 * (100vw / 390));
  }
  .section.sec--3 .leadTxt{
    margin: calc(55 * (100vw / 390)) auto 0;
    font-size: calc(12 * (100vw / 390));
    text-align: center;
  }
  .section.sec--3 .leadTxt.dots{
    width: calc(301 * (100vw / 390));
    margin: calc(34 * (100vw / 390)) auto 0;
    font-size: calc(12 * (100vw / 390));
    font-feature-settings: "";
    text-align: left;
  }
    
}
@media only screen and (min-width: 560px) {
  .section.sec--3{
    margin: calc(105 * (100vw / 1400)) auto 0;
    width: calc(1020 * (100vw / 1400));
  }
  .section.sec--3 .itemBlock .imgBox{
    margin-top: calc(10 * (100vw / 1400));
    width: calc(333 * (100vw / 1400));
  }
  .section.sec--3 .leadTxt{
    margin: calc(72 * (100vw / 1400)) auto 0;
    font-size: calc(16 * (100vw / 1400));
    text-align: center;
  }
  .section.sec--3 .leadTxt.dots{
    width: calc(803 * (100vw / 1400));
    margin: calc(51 * (100vw / 1400)) auto 0;
    font-size: calc(16 * (100vw / 1400));
    text-align: center;
  }
    
}
@media only screen and (min-width: 1400px) {
  .section.sec--3{
    margin: 105px auto 0;
    width: 1020px;
  }
  .section.sec--3 .itemBlock .imgBox{
    margin-top: 10px;
    width: 333px;
  }
  .section.sec--3 .leadTxt{
    margin: 72px auto 0;
    font-size: 16px;
  }
  .section.sec--3 .leadTxt.dots{
    width: 803px;
    margin: 51px auto 0;
    font-size: 16px;
  }
    
}




/*========================================================
section 4
========================================================*/
@media only screen and (max-width: 559px) {
  .section.sec--4{
    margin-top: calc(56 * (100vw / 390));
  }
}
@media only screen and (min-width: 560px) {
  .section.sec--4{
    width: calc(480 * (100vw / 1400));
    margin: calc(117 * (100vw / 1400)) auto 0;
  }
  .section.sec--4 .secImgArea{
    display: block;
    width: auto;
  }
}
@media only screen and (min-width: 1400px) {
  .section.sec--4{
    width: 480px;
    margin: 117px auto 0;
  }
}




/*========================================================
section 5
========================================================*/
@media only screen and (max-width: 559px) {
  .section.sec--5{
    width: calc(350 * (100vw / 390));
    margin: calc(98 * (100vw / 390)) auto 0;
    padding: calc(20 * (100vw / 390)) calc(20 * (100vw / 390)) calc(15 * (100vw / 390)) calc(20 * (100vw / 390));
    border: 1px solid #BABABA;
  }
  .section.sec--5 .itemBlock{
    position: relative;
    width: calc(160 * (100vw / 390));
  }
  .section.sec--5 .itemBlock .flex{
    align-items: baseline;
    position: absolute;
    top: 50%;
    left: calc(180 * (100vw / 390));
    transform: translateY(-50%);
    font-size: calc(13 * (100vw / 390));
    margin: 0;
  }
  .section.sec--5 .flex .guest{
  font-family: pragmatica, sans-serif;
  font-style: normal;
  font-weight: 400;
  margin-right: calc(4 * (100vw / 390));
  }
  .section.sec--5 .profileTxt{
    font-size: calc(11 * (100vw / 390));
    text-align: left;
  }
  .section.sec--5 .profileTxt .leadTxt{
    margin-top: 0;
    font-size: calc(11 * (100vw / 390));
    text-align: left;
    margin-top: calc(12 * (100vw / 390));
  }
  .section.sec--5 .profileTxt .flex{
    align-items: baseline;
    font-size: calc(13 * (100vw / 390));
    margin-top: calc(10 * (100vw / 390));
  }
  .section.sec--5 .profileTxt .link{
    text-decoration: underline;
    margin-top: calc(-2 * (100vw / 390));
    font-size: calc(12 * (100vw / 390));
  }
}
@media only screen and (min-width: 560px) {
  .section.sec--5{
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-end;
    width: calc(800 * (100vw / 1400));
    margin: calc(98 * (100vw / 1400)) auto 0;
    padding: calc(20 * (100vw / 1400)) calc(20 * (100vw / 1400)) calc(16 * (100vw / 1400)) calc(20 * (100vw / 1400));
    border: 1px solid #BABABA;
  }
  .section.sec--5 .itemBlock{
    position: relative;
    width: calc(190 * (100vw / 1400));
    margin-right: calc(20 * (100vw / 1400));
  }
  .section.sec--5 .itemBlock .flex{
    width: 100%;
    text-align: left;
    position: absolute;
    top: calc(-3 * (100vw / 1400));
    left: calc(208 * (100vw / 1400));
    align-items: baseline;
    font-size: calc(15 * (100vw / 1400));
    line-height: 1;
  }
  .section.sec--5 .flex .guest{
  font-family: pragmatica, noto-sans-cjk-jp, sans-serif;
  font-style: normal;
  font-weight: 400;
  margin-right: calc(10 * (100vw / 1400));
  }
  .section.sec--5 .profileTxt{
    width: calc(550 * (100vw / 1400));
    font-size: calc(12 * (100vw / 1400));
    text-align: left;
  }
  .section.sec--5 .profileTxt .leadTxt{
    margin-top: 0;
    font-size: calc(12 * (100vw / 1400));
    text-align: left;
    margin-top: calc(10 * (100vw / 1400));
  }
  .section.sec--5 .profileTxt .flex{
    align-items: baseline;
    font-size: calc(15 * (100vw / 1400));
    line-height: 1;
    margin-top: calc(19 * (100vw / 1400));
  }
  .section.sec--5 .profileTxt .link{
    text-decoration: underline;
    margin-top: calc(6 * (100vw / 1400));
    font-size: calc(12 * (100vw / 1400));
  }
}
@media only screen and (min-width: 1400px) {
  .section.sec--5{
    width: 800px;
    margin: 98px auto 0;
    padding: 20px 20px 16px 20px;
    border: 1px solid #BABABA;
  }
  .section.sec--5 .itemBlock{
    position: relative;
    width: 190px;
    margin-right: 20px;
  }
  .section.sec--5 .itemBlock .flex{
    position: absolute;
    top: -3px;
    left: 208px;
    align-items: baseline;
    font-size: 15px;
    line-height: 1;
  }
  .section.sec--5 .flex .guest{
  font-family: pragmatica, noto-sans-cjk-jp, sans-serif;
  font-style: normal;
  font-weight: 400;
  margin-right: 10px;
  }
  .section.sec--5 .profileTxt{
    width: 550px;
    font-size: 12px;
    text-align: left;
  }
  .section.sec--5 .profileTxt .leadTxt{
    margin-top: 0;
    font-size: 12px;
    text-align: left;
    margin-top: 10px;
  }
  .section.sec--5 .profileTxt .flex{
    align-items: baseline;
    font-size: 15px;
    line-height: 1;
    margin-top: 19px;
  }
  .section.sec--5 .profileTxt .link{
    text-decoration: underline;
    margin-top: 6px;
    font-size: 12px;
  }
}















/*========================================================
actionBtn
========================================================*/
/*  actionBtn  */
@media only screen and (max-width: 559px) {
  .actionBtn{
    width: calc(300 * (100vw / 390));
    height: calc(50 * (100vw / 390));
    margin: calc(63 * (100vw / 390)) auto 0;
  }
}
@media only screen and (min-width: 560px) {
  .actionBtn{
    max-width: 370px;
    max-height: 60px;
    width: calc(370 * (100vw / 1400));
    height: calc(60 * (100vw / 1400));
    margin: calc(82 * (100vw / 1400)) auto calc(95 * (100vw / 1400));
  }
}
@media only screen and (min-width: 1400px) {
  .actionBtn{
    margin: 82px auto 95px;
  }
}


/*========================================================
animation
========================================================*/
.mainvisual.mvAnimation .mvImg,
.mainvisual.mvAnimation .mvTtl,
.mainvisual.mvAnimation .mvTxt{
  transition: opacity 1.0s;
  opacity: 0;
}
.mainvisual.mvAnimation.onView .mvImg,
.mainvisual.mvAnimation.onView .mvTtl,
.mainvisual.mvAnimation.onView .mvTxt{
  opacity: 1;
}
.mainvisual.mvAnimation.onView .mvImg{
  
}
.mainvisual.mvAnimation .mvTtl{
  transition: opacity 1.0s, transform 1.5s;
  transition-delay: 0.8s;
  transform: translateX(5rem);
}
.mainvisual.mvAnimation.onView .mvTtl{
  transform: translateX(0);
}
.mainvisual.mvAnimation.onView .mvTxt{
  transition-delay: 2.2s;

}





.animation{
  transition: opacity 0.8s;
  opacity: 0;
}
.animation.onView{
  opacity: 1;
}
@media only screen and (max-width: 559px) {
  /* .animation{
    transition-delay: 0.8s;
  } */
}

/*========================================================
fixed
========================================================*/
@media only screen and (max-width: 559px) {
  .fixed{
    width: calc(350 * (100vw / 390));
    margin: calc(56 * (100vw / 390)) auto 0;
  }
  .fixed > .imgBox{
    display: none!important;
  }
}
@media only screen and (min-width: 560px) {
.fixed{
    position: relative;
  }
  .imgBox.animationTxt{
    position: fixed;
    top: calc(20 * (100vw / 1400));
    left: calc(20 * (100vw / 1400));
    width: calc(206 * (100vw / 1400));
    transition: transform 0.8s;
    transform: translateY(-130%);
  }
  .imgBox.animationTxt.onView{
    transform: translateY(0);
  }
  
}
@media only screen and (min-width: 1400px) {
  .imgBox.animationTxt{
    top: 20px;
    left: 20px;
    width: 206px;
  }
}





.style-archive::before {
  left: 50%;
  transform: translateX(-50%);
  background-color: #D0D0D0;
}