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


@media screen and (max-width: 767px) {

/* contents-top */

.contents-top .link01 {
    text-align: center;
}
    
.contents-top .link01 a {
    font-size: 15px;
    padding: 12px 20px;
    min-width: 300px;
}

.contents-top-wrap {
background-size: 150% auto;
}

/* box-movie */

.box-movie {
    width: 100%;
}

.box-movie img, .box-movie video {
    width: 100%;
    height: auto;
}

 /* contents01 */
    
.contents01::before {
	background-size: 120% auto;
}

/* contents03 */

.contents03 {
    padding: 40px 0px;
}

/* contents05 */

.contents05 {
    padding: 50px 0px;
}

.contents05 .box-link {
    padding-top: 40px;
}

/* layout01 */

.layout01::before {
    background-position: center bottom;
	background-size: auto 100%;
    width: 100%;
	height: 70%;
}

.layout01 .box-title {
    padding: 35px 0px;
    width: 92%;
}

.layout01 h2 {
    margin-bottom: 25px;
}

.layout01 h2::after {
    margin-left: 30px;
    margin-right: -5%;
}

.layout01 h2 img {
    width: 35%;
}

.layout01 .box-img-wrap {
    margin-top: -80px;
}

.layout01 .box-img {
    height: 78vw;
}

.layout01 .box-img .box {
    width: 60%;
}

.layout01 .box-img .box:nth-child(1) {
    width: 70%;
}

.layout01 .box-img-wrap .box-text {
    gap:20px;
    padding-top: 40px;
}

.layout01 .box-img-wrap .box-text .box:nth-child(2)::before {
	height: 50px;
    margin-top: -40px;
}

.layout01 .box-img-wrap .box-text img {
    width: 85%;
}

.layout01 .box-detail {
    width: 95%;
    padding-bottom: 70px;
    margin-top: -20px;
}

.layout01 .box-detail .inner {
    margin-left: 0%;
    text-align: right;
}

.layout01 .box-detail h4 {
    font-size: 5vw;
    color: #FFF;
line-height: 1.3;
    margin-bottom: 20px;
    text-align: left;
    display: inline-block;
    padding-right: 5%;
}

.layout01 .box-detail h5 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 20px;
}
    
.layout01 .box-detail h6 {
    text-align: center;
}

.layout01 .box-detail h6 a::after {
    display: none;
}

.layout01 .box-detail p {
    padding: 10px 5% 40px;
    text-align: left;
}



/* layout02 */
    
.layout02::after {
    content: "";
	position: absolute;
left: 0px;
top: 0px;
	background-image: url("../../images/top/arrow01.svg");
background-position: center top;
background-repeat: no-repeat;
	background-size: auto 100%;
	width: 100%;
	height: 60px;
    margin-top: -30px;
}


.layout02 .box-img {
    height: 90vw;
    background-color: #050606;
}

.layout02 .box-img .box:nth-child(1) {
    width: 100%;
}

.layout02 .box-img .box:nth-child(2) {
    width: 100%;
}

.layout02 .box-title::before {
top: 20%;
	height: 60%;
}

.layout02 h2 {
	font-size: 32px;
    margin-bottom: 18px;
    line-height: 1;
}

.layout02 h3 {
	font-size: 20px;
}


/* layout03 */

.layout03 {
  justify-content: center;
    margin-top: 0px;
    flex-direction: column-reverse;
}

.layout03 > div{
    width: 100%;
}
    
.layout03 .box-img img {
    max-height: 450px;
}

.layout03 .box-detail .inner {
    width: 88%;
    max-width:100%;
    padding: 50px 0px;
    text-align: center;
}

.layout03 h2, .layout05 h2, .box-name h5 {
    font-size: 9vw;
    margin-bottom: 30px;
}
    
.layout03 h2 {
    display: inline-block;
    text-align: left;
}

.layout05 h2 {
    font-size: 10vw;
    margin-bottom: 40px;
    line-height: 1.2;
}

.box-name h5 {
    margin-bottom: 0px;
}

.layout07 .box-name h5 {
    font-size: 28px;
    line-height: 1.2;
}

.layout08 .box-name h5 {
    font-size: 40px;
}

.layout03 h3, .layout07 h3, .layout07 h4, .box-name h6 {
font-size: 30px;
line-height: 1.2;
letter-spacing: 0em;
font-weight: var(--base-weight3);
}

.layout03 h3 {
text-align: center;
}
    
.layout07 h3 {
line-height: 1.4;
    padding: 30px 0px 15px;
}

.layout07 h4 {
line-height: 1.4;
font-size: 16px;
    margin-bottom: 40px;
}

.box-name h6 {
font-size: 18px;
    padding-top: 10px;
    font-weight: var(--base-weight0);
}
    
.layout08 .box-name h6 {
    margin-bottom: 15px;
}

.layout03 p, .layout07 p, .layout08 p {
    font-size: 14px;
    text-align: left;
}

.layout03 p {
    padding: 30px 0px 40px;
}


/* layout04 */

.layout04 {
gap:15px 4%;
}

.layout04 .box{
    width: 48%;
}
    
.contents05 .layout04 {
    gap:10px 2%;
}
    
.contents05 .layout04 .box {
    width: 23.5%;
}


/* layout05 */

.layout05 {
    width: 100%;
    padding: 0px 6%;
    text-align: center;
    margin-bottom: 60px;
}

.layout05 h3 {
    font-size: 22px;
    padding: 40px 0px 30px;
}

.layout05 h3::before {
	height: 25px;
}
    
.layout05 p {
	text-align: left;
}


/* layout07 */

.layout07 {
    padding: 50px 0px;
}

.layout07, .layout08 {
    width: 88%;
    text-align: center;
}

.layout07, .layout08 .box-detail {
    flex-direction: column;
    gap:40px;
}

.layout07 .box-detail {
    padding-left: 0%;
}

.layout07 > div, .layout08 .box {
    width: 100%;
}

.layout07 .box-img, .layout08 .box-img {
    position: relative;
    text-align: center;
}
    
.layout07 .box-img {
    margin-bottom: 30px;
}

.layout07 .box-img .box, .layout08 .box-img .box {
    position: static;
    width: 100%;
    max-width: 350px;
    margin: 0px auto;
    clip-path: url(#clip-frame5);
}

/* layout08 */

.layout08 {
    padding-bottom: 60px;
}
    
.layout08 .box-detail {
    padding-top: 20px;
}

.layout08 .box:not(:last-child) {
    border-right-style : none;
    border-bottom-style : solid;
}

.layout08 .box:nth-child(1) {
    padding-right: 0%;
    padding-bottom: 40px;
}

.layout08 .box:nth-child(2) {
    padding-left: 0%;
}


/* box-name */

.box-name {
    position: relative;
    margin-bottom: 30px;
    text-align: center;
}

.layout07 .box-name {
    padding-left: 0px;
}

.layout08 .box-name {
    padding-left: 0px;
  display: block;
}
    
.box-name::before {
    display: none;
}
    
.box-name h5 {
   position: relative;
    display: inline-block;
}
    
.layout07 .box-name h5 {
    padding-left: 55px;
    width: 270px;
    text-align: left;
}

.layout08 .box-name h5 {
    padding-left: 45px;
}
    
.box-name h5::before {
    content: "";
	position: absolute;
left: 0px;
bottom: 0px;
background-position: left bottom;
background-repeat: no-repeat;
	background-size: auto 100%;
}

.layout07 .box-name h5::before {
	background-image: url("../../images/top/logo02.png");
	width: 40px;
    height: 60px;
}

.layout08 .box-name h5::before {
	background-image: url("../../images/top/logo01.png");
	width: 100px;
    height: 40px;
}


.box-name p {
    font-size: 13px;
    border-left-style : none;
    padding-left: 0px;
    text-align: center;
}


/* layout09 */

.layout09 .box-text {
   padding: 30px 0px;
}

.layout09 h2 img {
    width: 75%;
    max-width: 400px;
}

.layout09 h3 {
    font-size: 14px;
    padding-top: 18px;
}


    .pc-view {
        display: none;
    }
    .sp-view {
        display: inline-block;
    }
   
}