@charset "utf-8";


/* scroll_up ｜ 下から上へ出現
---------------------------------*/
.scroll_up {
	transition: 0.9s ease-in-out;
	transform: translateY(30px);
	opacity: 0;
}
.scroll_up.is-inview {
	transform: translateY(0);
	opacity: 1.0;
}
.timing02 {transition-delay: .2s;}
.timing03 {transition-delay: .4s;}
.timing04 {transition-delay: .6s;}
.timing05 {transition-delay: .8s;}
.timing06 {transition-delay: .10s;}
.timing07 {transition-delay: .12s;}
.timing08 {transition-delay: .14s;}
.timing09 {transition-delay: .16s;}
.timing10 {transition-delay: .18s;}

/*	レイアウト
---------------------------------*/
html {
	font-size: 62.5%;
}
body {
	position: relative;
	margin: 0;
	padding: 0px 0 0;
	width: 100%;
	line-height: 1.8;
    color: #333333;
    font-family: "Zen Kaku Gothic New", sans-serif;
    font-weight: 700;
    font-weight: 500;
}
#wrapper {
	overflow: hidden;
}
.sponly {
    display: none;
}
.pconly {
    display: inline;
}

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

@media screen and (max-width:599px) {
    body {
        padding: 0px 0 0;
    }
    .sponly {
        display: inline;
    }
    .pconly {
        display: none;
    }
}

/*	フッター
---------------------------------*/
footer {
	padding-top: 60px;
	padding-bottom: 20px;
    position: relative;
}
footer::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/cmn/bg_yellow.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
    z-index: -10;
}
footer .contents-inr {
}

.ft-copyright {
    margin-top: 30px;
	font-size: 10px;
    line-height: 1.6;
    letter-spacing: 1px;
    font-weight: 500;
    text-align: center;
}

.btn-pagetop {
    width: 40px;
}

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

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

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

@media screen and (max-width: 599px) {
    .btn-pagetop {
        width: 30px;
    }
    footer {
        padding-top: 30px;
    }
}

/*	メインイメージ
---------------------------------*/
.main-img-otr {
	position: relative;
	padding: 0;
	width: 100%;
}
.main-img-otr::before {
	content: "";
	display: block;
	position: absolute;
	top: 18%;
	left: 0;
	margin: 0;
	width: 100%;
	height: 82%;
	background-image: url("../img/cmn/bg_yellow.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
    z-index: -10;
}
.main-img-otr::after {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 32%;
	margin: 0;
	width: 68%;
	height: 68%;
	background-image: url("../img/top/main_img02.webp");
	background-repeat: no-repeat;
	background-position: left bottom;
	background-size: auto 102.8%;
    z-index: -8;
}

.main-img-inr {
	position: relative;
	margin: 0 auto;
    padding-top: 680px;
	padding-left: 30px;
	padding-right: 30px;
	max-width: 1360px;
    height: 945px;
}

.main-img-inr .main-img-logo {
	position: absolute;
    top: 3.8%;
    left: 6%;
    width: 263px;
    text-align: left;
	z-index: 1001;
}
.main-img-inr .main-img-logo img {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.main-img-inr .main-img-box {
    position: absolute;
    top: 51.8%;
    left: 8.6%;
    width: 30.8%;
    text-align: left;
    z-index: 1001;
}
.main-img-inr .main-img-box img {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.main-img-inr .main-img-cap01 {
	position: absolute;
    top: 20%;
    left: 3.5%;
    width: 62%;
    text-align: left;
	z-index: 1001;
}
.main-img-inr .main-img-cap01 img {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.main-img-inr .main-img-cap02 {
    position: absolute;
    top: 37.5%;
    left: 5.6%;
    width: 42%;
    text-align: left;
    z-index: 1001;
}
.main-img-inr .main-img-cap02 img {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.cta-box {
    position: relative;
	background-image: url("../img/cmn/bg_wood.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
    margin-left: auto;
    margin-right: auto;
    max-width: 1076px;
    height: 212px;
    padding: 60px 9.5% 0 9.5%;
}
.cta-box .icon-bard {
    position: absolute;
    top: -28px;
    left: -8px;
    width: 135px;
}
.cta-box .icon-bard img {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}
.cta-box li {
    width: calc((100% - 4.5%) / 2);
    margin-right: 4.5%;
}
.cta-box li:last-of-type {
    margin-right: 0;
}

.cta-box li .btn01 {
    text-align: center;
}
.cta-box li .btn01 a {
    display: block;
    width: 100%;
    height: 86px;
    border-radius: 43px;
    background-color: #FF0000;
	background-image: url("../img/cmn/icon_arw01.svg");
	background-repeat: no-repeat;
	background-position: 93% center;
	background-size: 8px;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.cta-box li .btn01 a span {
	display: inline-block;
    margin-top: 22px;
	padding: 0 0 2px 33px;
    color: #FDF9F5;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1px;
	background: url("../img/cmn/icon_siryou.svg") no-repeat left center;
	background-size: 24px;
}
.cta-box li .btn01 a:hover {
    box-shadow: 6px 6px 10px 0px rgba(0,0,0,0.5);
}

.cta-box li .btn02 {
    text-align: center;
}
.cta-box li .btn02 a {
    display: block;
    width: 100%;
    height: 86px;
    border-radius: 43px;
    background-color: #247E0B;
	background-image: url("../img/cmn/icon_arw01.svg");
	background-repeat: no-repeat;
	background-position: 93% center;
	background-size: 8px;
    box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16);
	-webkit-transition: all .3s ease-in-out;
	-moz-transition: all .3s ease-in-out;
	transition: all .3s ease-in-out;
}
.cta-box li .btn02 a span {
	display: inline-block;
    margin-top: 22px;
	padding: 0 0 2px 36px;
    color: #FDF9F5;
    font-size: 28px;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 1px;
	background: url("../img/cmn/icon_mail.svg") no-repeat left center;
	background-size: 26px;
}
.cta-box li .btn02 a:hover {
    box-shadow: 6px 6px 10px 0px rgba(0,0,0,0.5);
}

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

@media screen and (max-width:1279px) {
    .main-img-inr {
        padding-top: 54vw;
        padding-left: 15px;
        padding-right: 15px;
        height: 74vw;
    }
    .main-img-inr .main-img-logo {
        top: 3%;
        left: 3%;
        width: 30%;
    }
    .cta-box {
        height: auto;
        padding: 5vw 9.5% 5vw 9.5%;
    }
}

@media screen and (max-width: 959px) {
    .cta-box .icon-bard {
        top: -2.5vw;
        left: -0.5vw;
        width: 11vw;
    }
    .cta-box {
        padding: 5vw 5% 5vw 5%;
    }
    .cta-box li .btn01 a {
        height: auto;
        padding-top: 2.3vw;
        padding-bottom: 2.3vw;
        background-size: 1vw;
    }
    .cta-box li .btn01 a span {
        margin-top: auto;
        padding: 0 0 1px 4.4vw;
        font-size: 3vw;
        background: url("../img/cmn/icon_siryou.svg") no-repeat left center;
        background-size: 3vw;
    }
    .cta-box li .btn02 a {
        height: auto;
        padding-top: 2.3vw;
        padding-bottom: 2.3vw;
        background-size: 1vw;
    }
    .cta-box li .btn02 a span {
        margin-top: auto;
        padding: 0 0 1px 4.6vw;
        font-size: 3vw;
        background: url("../img/cmn/icon_mail.svg") no-repeat left center;
        background-size: 3.2vw;
    }
}

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

@media screen and (max-width: 599px) {
    .main-img-otr::after {
        top: 3%;
        left: 30%;
        width: 70%;
        height: 60%;
        background-position: center bottom;
        background-size: auto 100%;
    }
    .main-img-inr {
        padding-top: 73vw;
        height: 110vw;
    }
    .main-img-inr .main-img-logo {
        width: 35%;
    }
    .main-img-inr .main-img-box {
        top: 47%;
        left: 2%;
        width: 41%;
    }
    .main-img-inr .main-img-cap01 {
        top: 18%;
        left: 1%;
        width: 68%;
    }
    .main-img-inr .main-img-cap02 {
        top: 32%;
        left: 2%;
        width: 49%;
    }
    .cta-box .icon-bard {
        top: 3vw;
        left: -2.3vw;
        width: 15vw;
    }
    .cta-box li {
        width: 100%;
        margin-right: 0;
    }
    .cta-box li:last-of-type {
        margin-right: 0;
    }
    .cta-box {
        padding: 4vw 15% 5vw 15%;
        background-size: auto 100%;
    }
    .cta-box li .btn01 {
        margin-bottom: 10px;
    }
    .cta-box li .btn01 a {
        height: auto;
        padding-top: 3vw;
        padding-bottom: 3vw;
        background-size: 1vw;
    }
    .cta-box li .btn01 a span {
        margin-top: auto;
        padding: 0 0 1px 5.6vw;
        font-size: 4.3vw;
        background: url("../img/cmn/icon_siryou.svg") no-repeat left center;
        background-size: 4.1vw;
    }
    .cta-box li .btn02 a {
        height: auto;
        padding-top: 3vw;
        padding-bottom: 3vw;
        background-size: 1vw;
    }
    .cta-box li .btn02 a span {
        margin-top: auto;
        padding: 0 0 1px 5.8vw;
        font-size: 4.3vw;
        background: url("../img/cmn/icon_mail.svg") no-repeat left center;
        background-size: 4.3vw;
    }
}


/*	基本レイアウト
---------------------------------*/
.contents-inr {
	position: relative;
	margin: 0 auto;
	padding-left: 30px;
	padding-right: 30px;
	max-width: 1260px;
}

@media screen and (max-width: 599px) {
    .contents-inr {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/*	トップページ
---------------------------------*/
/* 絵本出版の魅力とは？ */
.top-miryoku {
    padding-top: 80px;
    padding-bottom: 90px;
    position: relative;
}
.top-miryoku::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	background: #F8F3EF;
    z-index: -10;
}
.top-miryoku .contents-inr {
}
.top-miryoku .top-miryoku-box01 {
    position: relative;
    padding: 60px 50px 370px 50px;
}
.top-miryoku .top-miryoku-box01::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	background: #ffffff;
    border-radius: 20px;
    z-index: -8;
}
.top-miryoku .top-miryoku-box01 .img-kazari-left {
    position: absolute;
    top: -30px;
    left: -20px;
    width: 21%;
}
.top-miryoku .top-miryoku-box01 .img-kazari-right {
    position: absolute;
    top: -30px;
    right: -25px;
    width: 21%;
}
.top-miryoku .top-miryoku-box01 .img-box01 {
    text-align: center;
    margin-bottom: 10px;
}
.top-miryoku .top-miryoku-box01 .img-box01 img {
    max-width: 75px;
}
.top-miryoku .top-miryoku-box01 h2 {
	font-size: 40px;
    letter-spacing: 1px;
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 50px;
    text-align: center;
}
.top-miryoku .top-miryoku-box01 h2 span {
	font-size: 40px;
    letter-spacing: 1px;
    font-weight: 700;
    line-height: 1.4;
    color: #FF0000;
    position: relative;
}
.top-miryoku .top-miryoku-box01 h2 span::before {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: -2%;
	margin: 0;
	width: 104%;
	height: 16px;
	background: #FFDD00;
    border-radius: 7px;
    z-index: -1;
}
.top-miryoku .top-miryoku-box01 .p01 {
	font-size: 20px;
    letter-spacing: 1px;
    font-weight: 700;
    margin-bottom: 30px;
    line-height: 2;
    text-align: center;
}
.top-miryoku .top-miryoku-box01 .top-miryoku-box02 {
    border: #FFCC3C 2px solid;
    border-radius: 20px;
    padding: 10px 5% 20px 8.5%;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}
.top-miryoku .top-miryoku-box01 .top-miryoku-box02 .p02 {
    margin-top: 15px;
    margin-bottom: 15px;
}
.top-miryoku .top-miryoku-box01 .top-miryoku-box02 .p02 span {
	font-size: 22px;
    letter-spacing: 1px;
    font-weight: 700;
    padding: 10px 2px 10px 2px;
    line-height: 2.2;
	background: url("../img/cmn/bg_ten01.png") repeat-x left bottom;
	background-size: 8px;
}
.top-miryoku .top-miryoku-box01 .img-box02 {
    position: absolute;
    bottom: 35px;
    left: 5.2%;
    width: 90%;
}

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

@media screen and (max-width:1279px) {
    .top-miryoku .top-miryoku-box01 {
        padding: 60px 50px 35vw 50px;
    }
    .top-miryoku .top-miryoku-box01 .img-box02 {
        bottom: 30px;
        left: 2.5%;
        width: 95%;
    }
}

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

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

@media screen and (max-width: 599px) {
    .top-miryoku {
        padding-top: 40px;
        padding-bottom: 50px;
    }
    .top-miryoku .top-miryoku-box01 {
        padding: 15px 15px 35vw 15px;
    }
    .top-miryoku .top-miryoku-box01 .img-kazari-left {
        top: -20px;
        left: -10px;
    }
    .top-miryoku .top-miryoku-box01 .img-kazari-right {
        top: -20px;
        right: -15px;
    }
    .top-miryoku .top-miryoku-box01 .img-box01 {
        margin-bottom: 5px;
    }
    .top-miryoku .top-miryoku-box01 .img-box01 img {
        max-width: 50px;
    }
    .top-miryoku .top-miryoku-box01 h2 {
        font-size: 24px;
        line-height: 1.4;
        margin-bottom: 30px;
    }
    .top-miryoku .top-miryoku-box01 h2 span {
        font-size: 24px;
        line-height: 1.4;
    }
    .top-miryoku .top-miryoku-box01 h2 span::before {
        height: 12px;
        border-radius: 6px;
    }
    .top-miryoku .top-miryoku-box01 .p01 {
        font-size: 15px;
        letter-spacing: 1px;
        margin-bottom: 30px;
        line-height: 1.8;
        text-align: left;
    }
    .top-miryoku .top-miryoku-box01 .top-miryoku-box02 {
        padding: 10px 5% 20px 8.5%;
    }
    .top-miryoku .top-miryoku-box01 .top-miryoku-box02 .p02 {
        margin-top: 15px;
        margin-bottom: 15px;
    }
    .top-miryoku .top-miryoku-box01 .top-miryoku-box02 .p02 span {
        font-size: 16px;
        letter-spacing: 1px;
        font-weight: 700;
        padding: 10px 2px 10px 2px;
        line-height: 2.2;
        background: url("../img/cmn/bg_ten01.png") repeat-x left bottom;
        background-size: 8px;
    }
    .top-miryoku .top-miryoku-box01 .img-box02 {
        bottom: 10px;
    }
}

/* 絵本出版事例 */
.top-jirei {
    padding-top: 80px;
    padding-bottom: 35px;
    position: relative;
}
.top-jirei::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	width: 100%;
	height: 100%;
	background-image: url("../img/cmn/bg_yellow.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
    z-index: -10;
}
.top-jirei .contents-inr {
}
.top-jirei h2 {
    text-align: center;
    margin-bottom: 50px;
}
.top-jirei h2 img {
    max-width: 390px;
}
.top-jirei .top-jirei__list {
}
.top-jirei .top-jirei__list li {
    width: calc((100% - 40px) / 2);
    margin-right: 40px;
    margin-bottom: 50px;
    text-align: center;
}
.top-jirei .top-jirei__list li:nth-of-type(2n) {
    margin-right: 0px;
}
.top-jirei .top-jirei__list li h3 {
}
.top-jirei .top-jirei__list li .img-box {
    text-align: center;
}
.top-jirei .top-jirei__list li:nth-of-type(1) .img-box {
    padding-top: 10px;
    height: 486px;
}
.top-jirei .top-jirei__list li:nth-of-type(2) .img-box {
    padding-top: 10px;
    height: 486px;
}
.top-jirei .top-jirei__list li:nth-of-type(3) .img-box {
    padding-top: 30px;
    height: 390px;
}
.top-jirei .top-jirei__list li:nth-of-type(4) .img-box {
    padding-top: 5px;
    height: 390px;
}
.top-jirei .top-jirei__list li:nth-of-type(1) .img-box img {
    max-width: 362px;
}
.top-jirei .top-jirei__list li:nth-of-type(2) .img-box img {
    max-width: 360px;
}
.top-jirei .top-jirei__list li:nth-of-type(3) .img-box img {
    max-width: 373px;
}
.top-jirei .top-jirei__list li:nth-of-type(4) .img-box img {
    max-width: 272px;
}
.top-jirei .top-jirei__list li .txt-box {
    position: relative;
    padding: 0 0 40px 15%;
    text-align: left;
}
.top-jirei .top-jirei__list li:nth-of-type(3) .txt-box {
    padding: 0 0 40px 10%;
}
.top-jirei .top-jirei__list li:nth-of-type(4) .txt-box {
    padding: 0 0 40px 10%;
}
.top-jirei .top-jirei__list li .txt-box::before {
	content: "";
	display: block;
	position: absolute;
	bottom: 0px;
	left: 0;
	margin: 0;
	width: 100%;
	height: 203px;
	background-image: url("../img/cmn/icon_hukidasi.png");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: contain;
    z-index: -8;
}
.top-jirei .top-jirei__list li .txt-box p {
    margin-bottom: 5px;
	font-size: 20px;
    letter-spacing: 1px;
    font-weight: 700;
    padding: 0px 0px 0px 20px;
    line-height: 1.6;
	background: url("../img/cmn/icon_arw02.png") no-repeat left center;
	background-size: 12px;
}

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

@media screen and (max-width:1279px) {
    .top-jirei .top-jirei__list li .txt-box {
        padding: 0 4% 40px 5%;
    }
    .top-jirei .top-jirei__list li:nth-of-type(3) .txt-box {
        padding: 0 4% 40px 5%;
    }
    .top-jirei .top-jirei__list li:nth-of-type(4) .txt-box {
        padding: 0 4% 40px 5%;
    }
}

@media screen and (max-width: 959px) {
    .top-jirei .top-jirei__list li {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 50px;
    }
    .top-jirei .top-jirei__list li:nth-of-type(2n) {
        margin-right: 0px;
    }
    .top-jirei .top-jirei__list li .txt-box {
        max-width: 620px;
        margin-left: auto;
        margin-right: auto;
    }
}

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

@media screen and (max-width: 599px) {
    .top-jirei .top-jirei__list li .txt-box::before {
        background-position: center bottom;
    }
    .top-jirei {
        padding-top: 40px;
        padding-bottom: 20px;
    }
    .top-jirei h2 {
        margin-bottom: 30px;
    }
    .top-jirei h2 img {
        max-width: 80%;
    }
    .top-jirei .top-jirei__list li {
        margin-bottom: 40px;
    }
    .top-jirei .top-jirei__list li:nth-of-type(1) .img-box {
        padding-top: 10px;
        height: auto;
    }
    .top-jirei .top-jirei__list li:nth-of-type(2) .img-box {
        padding-top: 10px;
        height: auto;
    }
    .top-jirei .top-jirei__list li:nth-of-type(3) .img-box {
        padding-top: 10px;
        height: auto;
    }
    .top-jirei .top-jirei__list li:nth-of-type(4) .img-box {
        padding-top: 10px;
        height: auto;
    }
    .top-jirei .top-jirei__list li:nth-of-type(1) .img-box img {
        max-width: 70%;
    }
    .top-jirei .top-jirei__list li:nth-of-type(2) .img-box img {
        max-width: 70%;
    }
    .top-jirei .top-jirei__list li:nth-of-type(3) .img-box img {
        max-width: 70%;
    }
    .top-jirei .top-jirei__list li:nth-of-type(4) .img-box img {
        max-width: 70%;
    }
    .top-jirei .top-jirei__list li .txt-box {
        margin-top: -10px;
        padding: 0 3% 10px 4%;
    }
    .top-jirei .top-jirei__list li:nth-of-type(3) .txt-box {
        padding: 0 3% 10px 4%;
    }
    .top-jirei .top-jirei__list li:nth-of-type(4) .txt-box {
        padding: 0 3% 10px 4%;
    }
    .top-jirei .top-jirei__list li .txt-box p {
        margin-bottom: 2px;
        font-size: 14px;
        letter-spacing: 0px;
        padding: 0px 0px 0px 16px;
        line-height: 1.6;
        background-size: 10px;
    }
}

/* 絵本出版の流れ */
.top-flow {
    padding-top: 80px;
    padding-bottom: 60px;
    position: relative;
}
.top-flow::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	margin: 0;
	width: 100%;
	height: 100%;
    background-color: #F8F3EF;
    z-index: -10;
}
.top-flow .contents-inr {
}
.top-flow h2 {
	font-size: 40px;
    letter-spacing: 1px;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 90px;
    text-align: center;
}
.top-flow h2 .span01 {
    position: relative;
	font-size: 40px;
    letter-spacing: 1px;
    font-weight: 700;
    line-height: 1.6;
}
.top-flow h2 .span01::before {
	content: "";
	display: block;
	position: absolute;
	bottom: 0;
	left: -2%;
	margin: 0;
	width: 104%;
	height: 16px;
	background: #FFDD00;
    border-radius: 7px;
    z-index: -1;
}
.top-flow h2 .span02 {
	font-size: 40px;
    letter-spacing: 1px;
    font-weight: 700;
    line-height: 1.6;
    color: #FF0000;
}
.top-flow .top-flow__list {
}
.top-flow .top-flow__list li {
    width: calc((100% - 60px) / 4);
    margin-right: 20px;
    margin-bottom: 20px;
    background: #ffffff;
    border: #6BB058 4px solid;
    border-radius: 20px;
    position: relative;
}
.top-flow .top-flow__list li:nth-of-type(4n) {
    margin-right: 0px;
}
.top-flow .top-flow__list li .img-box {
    border-radius: 15px 15px 0 0;
}
.top-flow .top-flow__list li:nth-of-type(1) .img-box {
    height: 170px;
	background: url("../img/top/img_step01.webp") no-repeat center center;
	background-size: cover;
}
.top-flow .top-flow__list li:nth-of-type(2) .img-box {
    height: 170px;
	background: url("../img/top/img_step02.webp") no-repeat center center;
	background-size: cover;
}
.top-flow .top-flow__list li:nth-of-type(3) .img-box {
    height: 170px;
	background: url("../img/top/img_step03.webp") no-repeat center center;
	background-size: cover;
}
.top-flow .top-flow__list li:nth-of-type(4) .img-box {
    height: 170px;
	background: url("../img/top/img_step04.webp") no-repeat center center;
	background-size: cover;
}
.top-flow .top-flow__list li .no {
    position: absolute;
    top: -41px;
    left: calc(50% - 41px);
    width: 82px;
    height: 82px;
    background: #6BB058;
    border-radius: 50%;
	font-size: 40px;
    letter-spacing: 1px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
    text-align: center;
    padding-top: 15px;
}
.top-flow .top-flow__list li .no span {
    display: block;
	font-size: 15px;
    letter-spacing: 1px;
    font-weight: 500;
    line-height: 1;
    color: #ffffff;
}
.top-flow .top-flow__list li h3 {
	font-size: 26px;
    letter-spacing: 1px;
    font-weight: 700;
    line-height: 1.4;
    color: #6BB058;
    text-align: center;
    padding: 25px 5px 15px 5px;
}
.top-flow .top-flow__list li p {
	font-size: 16px;
    letter-spacing: 1px;
    font-weight: 500;
    line-height: 1.8;
    padding: 0px 15px 10px 15px;
}

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

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

@media screen and (max-width: 959px) {
    .top-flow {
        padding-bottom: 40px;
    }
    .top-flow .top-flow__list li {
        width: calc((100% - 20px) / 2);
        margin-right: 20px;
        margin-bottom: 60px;
    }
    .top-flow .top-flow__list li:nth-of-type(4n) {
        margin-right: 20px;
    }
    .top-flow .top-flow__list li:nth-of-type(2n) {
        margin-right: 0px;
    }
}

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

@media screen and (max-width: 599px) {
    .top-flow {
        padding-top: 40px;
        padding-bottom: 20px;
    }
    .top-flow h2 {
        font-size: 24px;
        margin-bottom: 50px;
    }
    .top-flow h2 .span01 {
        font-size: 24px;
    }
    .top-flow h2 .span01::before {
        height: 12px;
        border-radius: 6px;
    }
    .top-flow h2 .span02 {
        font-size: 24px;
    }
    .top-flow .top-flow__list li {
        width: 100%;
        margin-right: 0px;
        margin-bottom: 40px;
    }
    .top-flow .top-flow__list li:nth-of-type(4n) {
        margin-right: 0px;
    }
    .top-flow .top-flow__list li:nth-of-type(2n) {
        margin-right: 0px;
    }
    .top-flow .top-flow__list li .no {
        top: -25px;
        left: calc(50% - 25px);
        width: 50px;
        height: 50px;
        font-size: 28px;
        padding-top: 8px;
    }
    .top-flow .top-flow__list li .no span {
        font-size: 10px;
    }
    .top-flow .top-flow__list li h3 {
        font-size: 20px;
        letter-spacing: 1px;
        line-height: 1.4;
        padding: 15px 5px 10px 5px;
    }
    .top-flow .top-flow__list li p {
        font-size: 14px;
        letter-spacing: 1px;
        font-weight: 500;
        line-height: 1.6;
        padding: 0px 10px 10px 10px;
    }
}


/* よくある質問 */
.top-faq {
    padding-top: 80px;
    padding-bottom: 60px;
}
.top-faq .contents-inr {
    max-width: 1060px;
}
.top-faq h2 {
	font-size: 40px;
    letter-spacing: 1px;
    font-weight: 700;
    line-height: 1.6;
    margin-bottom: 50px;
    text-align: center;
}
.top-faq h3 {
    margin-bottom: 10px;
	font-size: 20px;
    letter-spacing: 1px;
    font-weight: 700;
    line-height: 1.8;
    padding: 10px 0px 20px 70px;
	background: url("../img/cmn/icon_q.png") no-repeat left 0px;
	background-size: 56px;
}
.top-faq p {
    margin-bottom: 25px;
	font-size: 20px;
    letter-spacing: 1px;
    font-weight: 700;
    line-height: 1.8;
    padding: 10px 0px 45px 70px;
	background-image: url("../img/cmn/bg_ten02.png"), url("../img/cmn/icon_a.png");
	background-repeat: repeat-x, no-repeat;
	background-position: left bottom, left 0px;
	background-size: 8px, 56px;
}

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

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

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

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

@media screen and (max-width: 599px) {
    .top-faq {
        padding-top: 40px;
        padding-bottom: 25px;
    }
    .top-faq h2 {
        font-size: 24px;
        line-height: 1.6;
        margin-bottom: 30px;
    }
    .top-faq h3 {
        margin-bottom: 10px;
        font-size: 16px;
        letter-spacing: 1px;
        font-weight: 700;
        line-height: 1.6;
        padding: 2px 0px 10px 40px;
        background: url("../img/cmn/icon_q.png") no-repeat left 0px;
        background-size: 30px;
    }
    .top-faq p {
        margin-bottom: 25px;
        font-size: 16px;
        letter-spacing: 1px;
        font-weight: 700;
        line-height: 1.6;
        padding: 2px 0px 25px 40px;
        background-image: url("../img/cmn/bg_ten02.png"), url("../img/cmn/icon_a.png");
        background-repeat: repeat-x, no-repeat;
        background-position: left bottom, left 0px;
        background-size: 6px, 30px;
    }
}