@charset "utf-8";
/* CSS Document */


.contentsWidth {
background: #25419A;
color:#fff;
}

.contentsWidth .top_img_box {
display: -webkit-flex;
display: flex;
}
.contentsWidth .top_img_box .top_movie {
width: 33.333%;
}
.contentsWidth .top_img_box .top_img {
width: 33.333%;
background: url(../images/002/top_img01.jpg) top center no-repeat;
background-size: cover;
}
.contentsWidth .top_img_box .top_img.top_img02 {
width: 33.333%;
background: url(../images/002/top_img02.jpg) top center no-repeat;
background-size: cover;
}

@media (max-width: 767px) {

.contentsWidth .top_img_box .top_movie {
width: 50%;
}

.contentsWidth .top_img_box .top_img {
width: 50%;
background: none;
}

/* max-width: 767px */}




.ttl_bg.is-fixed{
position: fixed;
right: calc(50% - 470px);
z-index: 1;
}

.ttl_bg.is-stop{
position: absolute;
right: 20px;
}


@media (max-width: 767px) {
.ttl_bg{
width: 40px;
}

.ttl_bg.is-fixed{
position: fixed;
right: 20px;
z-index: 1;
}

.ttl_bg.is-stop{
position: absolute;
right: 20px;
}

/* max-width: 767px */}

/*テキスト用--------------------------*/

.contentsWidth .fadeIn {
  opacity: 0;
  transition: opacity 2s;
  transition-delay: .5s;
}
.contentsWidth .fadeIn.delay10 {
  transition-delay: .2s;
}
.contentsWidth .fadeIn.delay15 {
  transition-delay: .3s;
}
.contentsWidth .fadeIn.delay20 {
  transition-delay: .4s;
}
.contentsWidth .fadeIn.delay25 {
  transition-delay: .5s;
}
.contentsWidth .fadeIn.delay30 {
  transition-delay: .6s;
}
.contentsWidth .fadeIn.is_inview {
  opacity: 1;
}


/*画像用-----------------------------*/

.contentsWidth .img_mask {
  overflow: hidden;
  opacity: 1;

  clip-path: inset(0 0 100% 0);

  transition:
    clip-path 1.3s cubic-bezier(0.77, 0, 0.175, 1);

  transition-delay: .1s;
}

.contentsWidth .img_mask.is_inview {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}


/* 内部画像 */

.contentsWidth .img_mask > img {
  display: block;
  width: 100%;
  height: auto;

  transform: translateY(50px) scale(1.04);

  transition:
    transform 1.6s cubic-bezier(0.16, 1, 0.3, 1);

  transition-delay: .1s;
}

.contentsWidth .img_mask.is_inview > img {
  transform: translateY(0) scale(1);
}

.contentsWidth .photo_list .img_mask > img {
  cursor: pointer;
}
.contentsWidth .photo_list .img_mask > img:hover {
opacity: .7;
}


/* delay */

.contentsWidth .img_mask.delay10 {
  transition-delay: .2s;
}

.contentsWidth .img_mask.delay10 > img {
  transition-delay: .2s;
}

.contentsWidth .img_mask.delay15 {
  transition-delay: .3s;
}

.contentsWidth .img_mask.delay15 > img {
  transition-delay: .3s;
}

.contentsWidth .img_mask.delay20 {
  transition-delay: .4s;
}

.contentsWidth .img_mask.delay20 > img {
  transition-delay: .4s;
}

.contentsWidth .img_mask.delay25 {
  transition-delay: .5s;
}

.contentsWidth .img_mask.delay25 > img {
  transition-delay: .5s;
}

.contentsWidth .img_mask.delay30 {
  transition-delay: .6s;
}

.contentsWidth .img_mask.delay30 > img {
  transition-delay: .6s;
}



/*----------------------------------*/


.contentsWidth .story_box {
background: url(../images/002/bg_top.png) top left no-repeat;
background-size: 80%;
}
.contentsWidth .story_box .bg_bottom {
background: url(../images/002/bg_bottom.png) bottom right no-repeat;
background-size: 100%;
position: relative;

overflow: hidden;
padding-bottom: 1px;
}
.ttl_bg{
position: absolute;
right: 20px;
top: 50px;
width: 79px;
z-index: 1;
}


.contentsWidth .story_box .story_inbox {
position: relative;
padding-top: 120px;
z-index: 10;
}
.contentsWidth .story_txt {
font-size: 18px;
font-weight: bold;
line-height: 2.5;
}

.contentsWidth .storybox01 {
overflow: hidden;
margin-bottom: 80px;
}
.contentsWidth .storybox01 .img01_01 {
width: 45%;
float: left;
}
.contentsWidth .storybox01 .storybox01_txt {
width: 50%;
float: right;
margin: 75px 0 0;
}
.contentsWidth .storybox01 .storybox01_txt p:last-of-type {
margin-bottom: 150px;
}
.contentsWidth .storybox01 .img01_02 {
width: 70%;
float: right;
margin-right: 10%;
}

@media (max-width: 767px) {
.contentsWidth .storybox01 {
margin-bottom: 7vw;
}

.contentsWidth .story_box .story_inbox {
padding-top: 40px;
}
.contentsWidth .storybox01 .img01_01 {
width: 45%;
float: left;
}
.contentsWidth .storybox01 .storybox01_txt {
width: 45%;
float: right;
margin: 2vw 4vw 0 0;
}
.contentsWidth .storybox01 .storybox01_txt p:last-of-type {
margin-bottom: 5vw;
}
.contentsWidth .storybox01 .img01_02 {
width: 80%;
float: right;
margin-right: 5%;
}

/* max-width: 767px */}



.contentsWidth .storybox02 {
position: relative;
width: 65%;
margin-left: auto;
margin-right: auto;
margin-bottom: 130px;
text-align: right;
}
.contentsWidth .storybox02 .img02_01 {
position: relative;
display: inline-block;
width: 60%;
z-index: 13;
}
.contentsWidth .storybox02 .img02_02 {
width: 45%;
position: absolute;
left: 0;
bottom: -50px;
}

@media (max-width: 767px) {
.contentsWidth .storybox02 {
width: 80%;
margin-bottom: 17vw;
}
.contentsWidth .storybox02 .img02_02 {
bottom: -7vw;
}
/* max-width: 767px */}




.contentsWidth .storybox03 {
position: relative;
margin-bottom: 200px;
}

.contentsWidth .storybox03 .img03_01 {
position: relative;
z-index: 11;
width: 33%;
margin-left: 20%;
}
.contentsWidth .storybox03 .storybox03_inbox {
position: relative;
z-index: 12;
margin-top: -50px;
overflow: hidden;
}
.contentsWidth .storybox03 .storybox03_inbox .img03_02 {
float: right;
width: 52%;
}

.contentsWidth .storybox03 .storybox03_inbox .storybox03_txt {
float: left;
width: 42%;
margin-top: 80px;
padding-left: 70px;
box-sizing: border-box;
}

@media (max-width: 767px) {
.contentsWidth .storybox03 {
margin-bottom: 15vw;
}
.contentsWidth .storybox03 .img03_01 {
width: 90%;
margin:0 0 3vw 5%;
}
.contentsWidth .storybox03 .storybox03_inbox {
overflow: hidden;
margin-top: 0;
}
.contentsWidth .storybox03 .storybox03_spimgbox {
float: right;
width: 50%;
}
.contentsWidth .storybox03 .storybox03_inbox .img03_02 {
width: 90%;
}
.contentsWidth .storybox03 .storybox03_inbox .storybox03_txt {
width: 47%;
float: left;
margin-top: 10vw;
padding-left: 20px;
}
/* max-width: 767px */}

@media (max-width: 480px) {
.contentsWidth .storybox03 .img03_01 {
margin:6vw 0 3vw 5%;
}
.contentsWidth .storybox03 .storybox03_inbox .storybox03_txt {
margin-top: 0;
}
/* max-width: 480px */}


.contentsWidth .img04 {
width: 52%;
margin-left: 11%;
margin-bottom: 80px;
}

@media (max-width: 640px) {
.contentsWidth .img04 {
width: 70%;
margin-left: 5%;
margin-bottom: 10vw;
}
/* max-width: 640px */}

/*---------------------------------*/





@media (max-width: 767px) {
.contentsWidth .story_txt {
font-size: 14px;
font-weight: bold;
line-height: 2;
}
.contentsWidth .img05_txt {
padding: 0 20px;
}
/* max-width: 767px */}



.contentsWidth .bg_box {
background: url(../images/002/bg.png) center center no-repeat;
background-size: 100% auto;
padding: 80px 0 100px;
}

@media (max-width: 767px) {
.contentsWidth .bg_box {
background: url(../images/002/bg.png) center center repeat-y;
background-size: 200% auto;
padding: 0 0 60px;
}
/* max-width: 767px */}

.contentsWidth .photo_list {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
width: 90%;
margin-left: auto;
margin-right: auto;
}
.contentsWidth .photo_list>div {
width: 31%;
margin-bottom: 25px;
}
@media (max-width: 767px) {

.contentsWidth .photo_list>div {
width: 48%;
margin-bottom: 12px;
}
/* max-width: 767px */}

.contentsWidth .each_box {
width: 75%;
max-width: 760px;

margin-left: 19%;
margin-right: 11%;

display: -webkit-flex;
display: flex;
-webkit-justify-content: center;
justify-content: center;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.contentsWidth .each_box.each_box02 {
margin-left: 11%;
margin-right: 19%;
flex-direction: row-reverse;
}


.contentsWidth .each_box .each_box_img {
width: 250px;
margin-right:8px;
margin-left:8px;
}
.contentsWidth .each_box .each_box_txt {
width: calc(100% - 282px);
overflow: hidden;
margin-right:8px;
margin-left:8px;
}

@media (max-width: 767px) {
.contentsWidth .each_box,
.contentsWidth .each_box.each_box02 {
width: 90%;
margin-left: auto;
margin-right: auto;
}

.contentsWidth .each_box .each_box_img {
width: 66%;
max-width: 374px;
margin-left: auto;
margin-right: auto;
}

.contentsWidth .each_box .each_box_txt {
width: 100%;
}
/* max-width: 767px */}

.contentsWidth .each_box .each_box_txt p {
font-size: 16px;
display: block;
font-weight: bold;
line-height: 1.3;
}

.contentsWidth .each_box .each_box_txt p strong {
font-size: 26px;
}
.contentsWidth .each_box .each_box_txt p small {
font-size: 13px;
}
.contentsWidth .each_box .each_box_txt a.view_more {
display: block;
background: #fff;
color: #000;
padding: 12px 60px 10px;
float: right;
font-size: 13px;
font-weight: bold;
}
.contentsWidth .each_box .each_box_txt a.view_more:hover {
color: #000!important;
opacity: 0.7;
}



.contentsWidth .other_box {
width: 90%;
max-width: 700px;
margin-left: auto;
margin-right: auto;
margin-bottom: 120px;
}
.contentsWidth .other_box .other_ttl {
font-size: 32px;
align-items: center;
display: flex;
font-weight: bold;
letter-spacing: 1px;
}

.contentsWidth .other_box .other_ttl::before,
.contentsWidth .other_box .other_ttl::after {
  background-color: #fff;
  content: "";
  flex-grow: 1;
  height: 1px;
}
.contentsWidth .other_box .other_ttl::before {
  margin-right: 50px;
}
.contentsWidth .other_box .other_ttl::after {
  margin-left: 50px;
}
@media (max-width: 767px) {
.contentsWidth .other_box {
margin-bottom: 80px;
}
.contentsWidth .other_box .other_ttl {
font-size: 24px;
}
.contentsWidth .other_box .other_ttl::before {
  margin-right: 15px;
}
.contentsWidth .other_box .other_ttl::after {
  margin-left: 15px;
}
/* max-width: 767px */}


.contentsWidth .other_box .other_inbox {
display: -webkit-flex;
display: flex;
-webkit-justify-content: space-between;
justify-content: space-between;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}

.contentsWidth .other_box .other_inbox .other_each {
width: 30%;
}

.contentsWidth .other_box .other_inbox .other_each {
width: 30%;
}
.contentsWidth .other_box .other_inbox .other_each p {
font-size: 15px;
text-align: center;
font-weight: bold;
line-height: 1.2;
}
.contentsWidth .other_box .other_inbox .other_each img.icon {
display: block;
height: 24px;
width: auto;
}

.contentsWidth .other_box .other_inbox .other_each a.view_more {
display: block;
background: #fff;
font-weight: bold;
color: #000;
padding: 12px 20px 10px;
font-size: 13px;
margin: 0 auto;
width: 70%;
text-align: center;
}
.contentsWidth .other_box .other_inbox .other_each a.view_more:hover {
color: #000!important;
opacity: 0.7;
}
@media (max-width: 767px) {
.contentsWidth .other_box .other_inbox .other_each {
width: 48%;
}
/* max-width: 767px */}



.contentsWidth a.btn_top {
display: block;
background: #fff;
color: #000;
padding: 12px 20px 10px;
font-size: 13px;
margin: 0 auto;
width: 70%;
max-width: 300px;
text-align: center;
font-weight: bold;
}
.contentsWidth a.btn_top:hover {
color: #000!important;
opacity: 0.7;
}