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


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

/* basefont */
:root {
  --base-font-size: 14px;
}


/* link01 */

.link01 {
    padding-top: calc(5vw * 2.5);
}

.link01 a {
    font-size: calc(1.5vw * 3.8);
    padding: 2.2vw 0px;
    padding-right: calc(8.8vw * 3.8);
}

.link01 a::before {
	width: calc(8vw * 3.8);
	height: calc(2.6vw * 3.8);
}

.link01 a:hover::before {
    margin-right: 0;
}


/* main-img-top */

.main-img-top .box-img img {
min-height: 60vh;
}
   
.main-img-top .box-text h2 {
	width: 80%;
}
    
    
/* contents01 */

.contents01 {
    padding: 150vh 0px 17vw;
}

.contents01 .box-inner {
  justify-content: center;
    gap:17vw;
}

.contents01 .box-title {
    width: 100%;
}

.contents01 .box-detail {
    flex: auto;
     width: 100%;
    padding: 0px 8%;
}

.contents01 h2 {
     font-family: var(--title-font);
font-weight: var(--base-font-weight);
    font-size: calc(1.7vw * 3.8);
line-height: 1.4;
}

.contents01 h3 {
    margin-bottom: calc(5vw * 3.8);
     mix-blend-mode: multiply;
}

.contents01 h3 img {
    width: calc(43vw * 1.8);
}


/* contents02 */

.contents02 {
	width: 100%;
   padding: 17vw 0px;
}

.contents02 .box-img {
  justify-content: center;
    gap:2px;
}

.contents02 .box-img .box {
    width: 100%;
}

.contents02 .box-detail {
	position: static;
    width: 100%;
    padding: 0px 8%;
}


.contents02 h2 {
    padding-top: 15vw;
    text-align: center;
    font-family: var(--title-font);
font-weight: var(--base-font-weight);
    font-size: calc(1.7vw * 3.8);
line-height: 1.4;
}

.contents02 p {
    padding-top: 8vw;
}

.contents02 p::before {
	height: calc(14.3vw * 1.8);
    margin-top: calc(-14.3vw * 3);
}


/* contents03 */

.contents03 {
    padding: 17vw 0px;
}

.contents03 .box-inner {
  justify-content: center;
    gap:15vw;
}

.contents03 .box-title {
	width: 100%;
    text-align: center;
}

.contents03 .box-detail {
	width: 100%;
    padding: 0px 8%;
    padding-right: 15%;
}

.contents03 .box-detail::before {
	width: 15vw;
	height: 70%;
}

.contents03 h2 img {
     width: 28%;
    max-width: 90px;
}

.contents03 h3 {
    margin-bottom: calc(5vw * 2.5);
}

.contents03 p {
    padding: calc(1.8vw * 2.5);
}



/* contents04 */

.contents04 {
	width: 100%;
    padding: 17vw 0px 25vw;
background-size: 65% auto;
}

.contents04::before {
	width: 22%;
	height: 20vw;
}

.contents04 .box-detail {
	padding-left: 8%;
}

.contents04 h3 {
    padding: 10vw 0px 7vw;
    font-size: calc(2.9vw * 2);
}

/* contents05 */

.contents05 {
    padding: 17vw 0px;
}

.contents05 .box-inner {
  justify-content: center;
    flex-direction: column;
    gap:17vw;
}

.contents05 .box-title {
	width: 100%;
}

.contents05 .box-detail {
	width: 100%;
    padding: 0px 8%;
    padding-right: 15%;
}

.contents05 .box-detail::before {
	width: calc(8vw * 2.5);
	height: 80%;
}

.contents05 h2 img {
     width: 60%;
    max-width: 200px;
}

.contents05 h3 {
    margin-bottom: calc(5vw * 2.5);
}

.contents05 p {
    padding: calc(1.8vw * 2.5);
}


/* contents06 */

.contents06 {
	width: 100%;
    padding: 15vw 0px 12vw;
}

.contents06 .box-detail {
  justify-content: center;
    flex-direction: column;
}

.contents06 .box-img {
    width: 100%;
}

.contents06 .box-img::after {
right: 4%;
bottom: calc(2vw* 2.5);
	width: 60%;
	height: calc(4vw* 3.5);
}

.contents06 .box-text {
    flex: auto;
    width: 100%;
    padding: 8vw 6%;
}

.contents06 h3 {
    padding: 5vw 0px 6vw;
    font-size: calc(3.3vw * 1.3);
}


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