@charset "utf-8";

.h_bar, 
#beltbnr {
	display: none;
}

.clearfix:after {
  content: "";
  display: block;
  clear: both;
} 
.clearfix:before {
  content: "";
  display: block;
  clear: both;
} 
.clearfix {
  display: block;
}

/*--SP--*/
@media only screen and (max-width: 767px) {
  main {
    width: 100%;
    margin: 0 auto;
    background-color: #fff;
    overflow: hidden;
    text-align: center;
  }

  .sp {
    display: block;
  }
  .pc {
    display: none;
  }
  
  .lead {
    width: calc(100% - 40px);
    margin: 30px auto 0;
    font-size: 3.2vw;
    font-family: "游ゴシック体 Pr6N M", "Yu Gothic Pr6N M", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 500;
    line-height: 2;
    color: #000;
    text-align: justify;
  }
  .lead br {
    display: none;
  }

  article {
    margin: 60px auto 0;
  }
  article h3 {
    margin-bottom: 30px;
    font-size: 5.33vw;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-weight: bold;
    color: #123d4c;
  }
  article h3 sup {
    font-size: 3.5vw;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-weight: bold;
    color: #123d4c;
    vertical-align: text-top;
  }

  /*--About--*/
  .function .caption {
    width: calc(100% - 40px);
    margin: 30px auto 0;
    font-size: 3.2vw;
    font-family: "游ゴシック体 Pr6N M", "Yu Gothic Pr6N M", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 500;
    line-height: 2;
    color: #000;
    text-align: justify;
  }

  .function .scrolldown {
    width: 8.8%;
    margin: 30px auto;
  }

  /*アコーディオン*/
  .js-accordion--close {
    display: none;
  }
  .accordion-box {
    width: calc(100% - 80px);
    height: 0;
    margin: 0 auto;
    overflow: hidden;
    transition: .4s ease;
    font-size: 3.2vw;
    font-family: "游ゴシック体 Pr6N M", "Yu Gothic Pr6N M", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 500;
    line-height: 2;
    color: #000;
    text-align: justify;
  }
  .js-accordion {
    width: calc(100% - 40px);
    margin: 20px auto;
    padding: 12px 20px;
    border: 1px solid #999;
    border-radius: 10px;
    position: relative;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .js-accordion::before{
    content: "";
    width: 2px;
    height: 16px;
    background: #000;
    position: absolute;
    right: 27px;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: .6s ease;
  }
  .js-accordion::after{
    content: "";
    width: 16px;
    height: 2px;
    background: #000;
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: .6s ease;
  }
  .js-accordion .num {
    width: 25px;
    height: 25px;
    background-color: #e86e3b;
    border-radius: 50%;
    font-size: 3.2vw;
    font-family: "游ゴシック体 Pr6N B", "Yu Gothic Pr6N B", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .js-accordion .text {
    font-size: 4.26vw;
    font-family: "游ゴシック体 Pr6N B", "Yu Gothic Pr6N B", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 700;
    color: #123d4c;
  }
  .js-accordion.is-accordion--open::before {
    transform: rotate(90deg);
  }
  .js-accordion.is-accordion--open::after {
    transform: rotate(-180deg);
  }
  .js-accordion.is-accordion--open + .accordion-box {
    height: auto;
    opacity: 1;
  }

  /*--ITEMS 共通--*/
  .item01, 
  .item02 {
    margin-bottom: 60px;
  }
  .item01 h4, 
  .item02 h4, 
  .item03 h4 {
    margin-bottom: 20px;
    font-size: 4.26vw;
    font-family: "游ゴシック体 Pr6N B", "Yu Gothic Pr6N B", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 700;
    color: #123d4c;
  }
  .item01 .caption, 
  .item02 .caption, 
  .item03 .caption {
    width: calc(100% - 40px);
    margin: 0 auto 40px;
    font-size: 3.2vw;
    font-family: "游ゴシック体 Pr6N M", "Yu Gothic Pr6N M", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 500;
    line-height: 2;
    color: #000;
    text-align: justify;
  }

  /*クレジット*/
  .credit-all {
    width: calc(100% - 40px);
    margin: 0 auto;
  }
  .credit {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .credit:nth-child(2) {
    margin-top: 20px;
  }
  .credit .text p {
    font-size: 3.2vw;
    font-family: "游ゴシック体 Pr6N M", "Yu Gothic Pr6N M", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 500;
    line-height: 2;
    color: #000;
    text-align: left;
  }
  .credit .btn a {
    width: 60px;
    height: 30px;
    background-color: #e86e3b;
    border: 1px solid #e86e3b;
    font-size: 3.2vw;
    font-family: "游ゴシック体 Pr6N B", "Yu Gothic Pr6N B", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 700;
    line-height: 2;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 1s;
  }
  .credit .btn a:hover {
    background-color: #fff;
    color: #e86e3b;
  }

  /*--ITEMS 個別--*/
  .item01 .ttl {
    width: 18.4%;
    margin: 0 auto 30px;
  }
  .item01 .sub-img {
    width: calc(100% - 20px);
    margin: 30px auto;
    display: flex;
    gap: 10px;
  }
  .item01 .sub-img .left-img {
    margin: 0;
  }
  .item01 .sub-img .right-img {
    margin: 60px 0 0 0;
  }
  .item01 .sub-img .img02 {
    margin: 10px 0 0 0;
  }

  .item02 .ttl {
    width: 24.7%;
    margin: 0 auto 30px;
  }
  .item02 .sub-img {
    margin: 30px 0 30px 60px;
  }
  .item02 .caption {
    margin: 0 auto 20px;
  }
  .item02 .credit-all {
    margin: 0 auto 30px;
  }

  .item03 .ttl {
    width: 20.3%;
    margin: 0 auto 30px;
  }
  .item03 .sub-img {
    margin: 30px 0;
  }

  /*--related link--*/
  .related-link {
    margin: 70px auto;
  }
  .related-link a {
    padding: 2% 6%;
    background-color: #e86e3b;
    border: 1px solid #e86e3b;
    font-size: 3.2vw;
    font-family: "游ゴシック体 Pr6N B", "Yu Gothic Pr6N B", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 700;
    line-height: 2;
    color: #fff;
    text-decoration: none;
    transition: background 1s;
  }
  .related-link a:hover {
    background-color: #fff;
    color: #e86e3b;
  }
}


/*--PC--*/
@media only screen and (min-width: 768px) {
  /*
  #specialty {
    background-color: #000;
  }
  */

  main {
    width: 900px;
    margin: 0 auto;
    background-color: #fff;
    overflow: hidden;
    text-align: center;
  }

  .sp {
    display: none;
  }
  .pc {
    display: block;
  }
  
  .lead {
    width: 900px;
    margin: 30px auto 0;
    font-size: 1.4rem;
    font-family: "游ゴシック体 Pr6N M", "Yu Gothic Pr6N M", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 500;
    line-height: 2;
    color: #000;
    text-align: center;
  }

  article {
    margin: 60px auto 0;
  }
  article h3 {
    margin-bottom: 30px;
    font-size: 2.2rem;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-weight: bold;
    color: #123d4c;
  }
  article h3 sup {
    font-size: 1.4rem;
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-weight: bold;
    color: #123d4c;
    vertical-align: text-top;
  }

  /*--About--*/
  .function {
    width: 600px;
    margin: 0 auto;
  }
  .function .caption {
    width: calc(100% - 40px);
    margin: 30px auto 0;
    font-size: 1.4rem;
    font-family: "游ゴシック体 Pr6N M", "Yu Gothic Pr6N M", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 500;
    line-height: 2;
    color: #000;
    text-align: justify;
  }

  .function .scrolldown {
    width: 6.8%;
    margin: 30px auto;
  }

  /*アコーディオン*/
  .js-accordion--close {
    display: none;
  }
  .accordion-box {
    width: calc(100% - 80px);
    height: 0;
    margin: 0 auto;
    overflow: hidden;
    transition: .4s ease;
    font-size: 1.4rem;
    font-family: "游ゴシック体 Pr6N M", "Yu Gothic Pr6N M", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 500;
    line-height: 2;
    color: #000;
    text-align: justify;
  }
  .js-accordion {
    width: calc(100% - 40px);
    margin: 20px auto;
    padding: 12px 20px;
    border: 1px solid #999;
    border-radius: 10px;
    position: relative;
    text-align: left;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
  }
  .js-accordion::before{
    content: "";
    width: 2px;
    height: 16px;
    background: #000;
    position: absolute;
    right: 27px;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: .6s ease;
  }
  .js-accordion::after{
    content: "";
    width: 16px;
    height: 2px;
    background: #000;
    position: absolute;
    right: 20px;
    top: 0;
    bottom: 0;
    margin: auto;
    transition: .6s ease;
  }
  .js-accordion .num {
    width: 25px;
    height: 25px;
    background-color: #e86e3b;
    border-radius: 50%;
    font-size: 1.4rem;
    font-family: "游ゴシック体 Pr6N B", "Yu Gothic Pr6N B", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 700;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .js-accordion .text {
    font-size: 1.6rem;
    font-family: "游ゴシック体 Pr6N B", "Yu Gothic Pr6N B", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 700;
    color: #123d4c;
  }
  .js-accordion.is-accordion--open::before {
    transform: rotate(90deg);
  }
  .js-accordion.is-accordion--open::after {
    transform: rotate(-180deg);
  }
  .js-accordion.is-accordion--open + .accordion-box {
    height: auto;
    opacity: 1;
  }

  /*--ITEMS 共通--*/
  .item01, 
  .item02 {
    margin-bottom: 120px;
  }
  .item01 h4, 
  .item02 h4, 
  .item03 h4 {
    margin-bottom: 20px;
    font-size: 1.8rem;
    font-family: "游ゴシック体 Pr6N B", "Yu Gothic Pr6N B", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 700;
    color: #123d4c;
  }
  .item01 .caption, 
  .item02 .caption, 
  .item03 .caption {
    width: 600px;
    margin: 0 auto 40px;
    font-size: 1.4rem;
    font-family: "游ゴシック体 Pr6N M", "Yu Gothic Pr6N M", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 500;
    line-height: 2;
    color: #000;
    text-align: justify;
  }

  /*クレジット*/
  .credit-all {
    width: 560px;
    margin: 0 auto;
  }
  .credit {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .credit:nth-child(2) {
    margin-top: 20px;
  }
  .credit .text p {
    font-size: 1.4rem;
    font-family: "游ゴシック体 Pr6N M", "Yu Gothic Pr6N M", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 500;
    line-height: 2;
    color: #000;
    text-align: left;
  }
  .credit .btn a {
    width: 60px;
    height: 30px;
    background-color: #e86e3b;
    border: 1px solid #e86e3b;
    font-size: 1.4rem;
    font-family: "游ゴシック体 Pr6N B", "Yu Gothic Pr6N B", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 700;
    line-height: 2;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 1s;
  }
  .credit .btn a:hover {
    background-color: #fff;
    color: #e86e3b;
  }

  /*--ITEMS 個別--*/
  .item01 .ttl {
    width: 9.4%;
    margin: 0 auto 30px;
  }
  .item01 .main-img {
    width: 600px;
    margin: 0 auto;
  }
  .item01 .sub-img {
    width: 100%;
    margin: 30px auto;
    display: flex;
    gap: 10px;
  }
  .item01 .sub-img .left-img {
    display: flex;
    gap: 10px;
  }
  .item01 .sub-img .right-img {
    display: flex;
    gap: 10px;
  }
  .item01 .sub-img .img02 {
    margin: 60px 0 0 0;
  }

  .item02 .ttl {
    width: 12.7%;
    margin: 0 auto 30px;
  }
  .item02 .main-img {
    width: 460px;
    margin: 0 0 0 40px;
  }
  .item02 .sub-img {
    width: 340px;
    margin: -340px 0 30px 520px;
  }
  .item02 .caption {
    margin: 0 auto 20px;
  }
  .item02 .credit-all {
    margin: 0 auto 30px;
  }

  .item03 .ttl {
    width: 10.3%;
    margin: 0 auto 30px;
  }
  .item03 .main-img {
    width: 600px;
    margin: 0 auto;
  }
  .item03 .sub-img {
    margin: 30px 0;
    display: flex;
    gap: 10px;
  }
  .item03 .sub-img div:nth-child(2) {
    margin-top: 200px;
  }
  .item03 .caption {
    margin: 0 auto 20px;
  }
  .item03 .credit-all {
    margin: 0 auto 30px;
  }

  /*--related link--*/
  .related-link {
    margin: 120px auto;
  }
  .related-link a {
    padding: 1% 3%;
    background-color: #e86e3b;
    border: 1px solid #e86e3b;
    font-size: 1.4rem;
    font-family: "游ゴシック体 Pr6N B", "Yu Gothic Pr6N B", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", sans-serif;
    font-weight: 700;
    line-height: 2;
    color: #fff;
    text-decoration: none;
    transition: background 1s;
  }
  .related-link a:hover {
    background-color: #fff;
    color: #e86e3b;
  }
}

/*スクロールダウンアニメーション*/
.scrolldown {
  animation: floating-y 1s ease-in-out infinite alternate-reverse;
}
@keyframes floating-y {
  0% {
    transform: translateY(-10%);
  }
  100% {
    transform: translateY(10%);
  }
}

/*スクロールアニメーション*/
.fadeIn_up {
  opacity: 0;
  transform: translate(0, 10%);
  transition: 2s;
}
.fadeIn_up.is-show {
  transform: translate(0, 0);
  opacity: 1;
}