@charset "utf-8";

/*----------------------------------------------------------
COMMON
----------------------------------------------------------*/

html {
	font-size: 62.5%; 
}

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    /*vertical-align:middle;*/
    background:transparent;
}

body {
    line-height:1.7;
    font-feature-settings: "palt";
    letter-spacing: 0.1rem;
    background: #fff;
    color: #444;
    font-family:"游ゴシック", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", sans-serif;
    font-weight: 500;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
}

a {
    color: #403230;
    margin:0;
    padding:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
    text-decoration:none;
}

img {
    border: none;
    width: 100%;
}

li,dl {
	list-style: none;
}

a:hover,
#pagetop:hover {
    opacity: 0.5;
	-webkit-transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -o-transition: all 0.3s ease;
    transition: all  0.3s ease;
}

.pc-only {
    display: block;
}

.sp-only {
    display: none;
}

.wrap {
    margin: 0 auto;
    /*width: 100%;*/
    max-width: 1080px;
}

.effect-fade {
  opacity: 0;
  transform: translate(0, 100px); /* フェードインで動く高さを指定 */
  transition: all 2000ms; /* フェードインにかかる時間を指定 */
}
.effect-scroll {
  opacity: 1;
  transform: translate(0, 0);
}


@media screen and (max-width: 767px) {
    .pc-only {
        display: none;
    }

    .sp-only {
        display: block;
    }

    .wrap {
        padding: 0 8vw;
    }

    .row {
        flex-direction: column;
    }

}


/*----------------------------------------------------------
HEADER
----------------------------------------------------------*/
header {
    background-color: #fff;
}

header .wrap {
    padding: 25px 0;
}

header .logo {
    width:40rem;
}

header .header_text {
    font-size: 3rem;
    letter-spacing: 0.6rem;
}

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

    header .row {
        display: block; 
        margin: 0 auto;
    }

    header .logo {
        display: block; 
        margin: 0 auto;
        width: 30rem;
    }
    header .header_text {
        text-align: center;
    }
    
    header .header_text {
        font-size: 1.6rem;
    }
    
    header .wrap {
        padding: 25px 0 14px;
    }
}




/*----------------------------------------------------------
MAIN
----------------------------------------------------------*/

.color_text {
    color:#ef7804;
}

.indent {
    padding-left:2.2rem;
	text-indent:-2.2rem;
}


/* ---------- main-visual ---------- */
.main-visual {
    background: url("../images/main-visual.png") center center no-repeat;
    background-size: cover;
    background-repeat: no-repeat;
    height: 806px;
}

.main-visual .lead {
    color: #fff;
    font-size: 4rem;
    line-height: 1.6;
    text-align: center;
}

.main_title {
    margin: 0 auto;
    padding: 92px 0;
    max-width: 620px;
    right: -19rem;
    position: relative;
}


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

    .main-visual {
        background:none;
        height: auto;
        }
    .main_title {
        padding: 0;
        margin-bottom: -2.4rem;
        width:100%;
        right: 0;
        position: static;
        }
}

/* ---------- contact_button ---------- */

.contact_button a {
    max-width: 1080px;
    font-size: 2.4rem;
    width: 60%;
    margin: 6rem auto 10rem;
    padding: 3rem 0;
    text-align: center;
    color: #fff;
    display: block;
    background: #ef7804;
    border-radius: 0.6rem;
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}


@media screen and (max-width: 767px) {
    
    .contact_button a {
        font-size: 2rem;
        width: 84%;
        margin: 4rem auto 4rem;
        padding: 3rem 0;
        }
    
}


/* ---------- theme ---------- */

.theme {
    background-color: #eee;
    padding: 80px 0;
    text-align: center;
}

.theme h2 {
    font-size: 3rem;
    line-height: 1.6;
}

.theme p {
    font-size: 1.6rem;
    line-height: 2;
}

.theme img {
    max-width: 480px;
}

.theme .task-list {
    display: flex;
    margin-top: 3rem;
}

.theme .task-list-item {
    width: 33.5rem;
    padding: 4.7rem 4.2rem 5rem;
    background: #fbf2db;
    border-radius: 0.6rem;  
}

.theme .task-list-item:not(:last-child) {
    margin-right: 3.8rem;
}

.theme .task-list-title {
    font-size: 2.4rem;
    font-weight: bold;
}

.theme .task-list-icon {
    margin:2rem auto;
    width: 14rem;
    height: 14rem;
}

.theme .task-list-desc {
    text-align: justify;
}


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

    .theme .task-list {
        display: block;
    }

    .theme .task-list-item {
        width: 80%;
        padding: 3rem;
    }
    
    .theme .task-list-item:not(:last-child) {
        margin: 0 auto;
        margin-bottom: 3rem;
    }

    .theme .task-list-icon {
        width: 20rem;
        height: 20rem;
    }

    .theme {
        padding: 50px 0;
    }
}




/* ---------- solution ---------- */

.solution {
    background-color: #fff;
    padding: 80px 0;
    text-align: center;
}

.solution h2 .up_text {
    font-size: 3rem;
}

.solution p {
    font-size: 1.6rem;
    line-height: 2;
}

.solution img {
    width: 100%;
}

.solution h2 img {
        width: 60rem;
    }

.solution-list-item2 img {
    width: 7rem;
}

.solution .solution-list {
    display: flex;
    margin-top: 3rem;
}

.solution .solution-list-item:not(:last-child) {
    margin-right: 2rem;
}

.solution .solution-list-item2 {
    margin-right: 2rem;
    margin-top: 38rem;
}

.solution .solution-list-item {
    width: 200rem;
    background: #fbf2db;
}

.solution-left-title {
    color:#fff;
    font-size: 2rem;
    background-color: #79430f;
    padding: 2rem;
}

.solution-right-title {
    color:#fff;
    font-size: 2rem;
    background-color: #ee7800;
    padding: 2rem;
}

.solution-inside {
    padding: 5rem;
}

.solution-text {
    margin-top: 1rem;
    text-align: justify; 
}

.title_list {
  display: flex;
    justify-content: center;
    align-items: center;
}


@media screen and (max-width: 767px) {
    .solution .solution-list {
        display: block;
    }
    
    .solution .solution-list-item {
        width: 100%;
    }
    
    .solution img {
        width: 100%;
    }
    
    .solution h2 img {
        width: 100%;
    }
    
    .solution .solution-list-item2 {
        margin:2rem 0 1.4rem;
    }
    
    .solution .solution-list-item2 img {
        width: 20%;
    }
    
    .solution-inside {
        padding: 3rem;
    }
    
    .solution {
        padding: 50px 0 0;
    }
    
    .title_list {
        display: block;
    }
    
    .solution h2 .up_text {
    margin-top: -3.5rem;
    }
    
}







/* ---------- answer ---------- */

.answer {
    background-color: #fbf2db;
    padding: 80px 0;
    text-align: center;
}

.answer-block .inner-flame-contents {
    position: relative;
}

.answer-block .answer-title {
    font-size: 2.4rem;
    text-align: justify; 
    font-weight: bold;
}

.inner-flame-contents {
    margin-top: 5.5rem;
}

.inner-flame-contents {
    padding: 5rem;
}

.inner-flame-contents {
    background: #fff;
    border-radius: 0.3rem;
}

.inner-flame-contents__inner {
    position: relative;
}

.answer-block .illust-01 {
    width: 35%;
    position: absolute;
    top: 0;
    left: 0;
}

.answer-block .illust-02 {
    width: 38.86364%;
    margin: 0 0 0 30.34091%;
    position: relative;
    left: -1.4%;
}

.answer-block .illust-02 img {
    width: 100%;
    height: auto;
}

.answer-block .illust-02 img {
    width: 100%;
    height: auto;
}

.cycle-list__item:nth-child(1) {
    width: 36.02273%;
    font-size: 1.6rem;
    text-align: left;
    position: absolute;
    top: 0;
    right: 0;
    margin-top: 3%;
    margin-right: 4.88636%;
}

.cycle-list__item:nth-child(2) {
    width: 28.63636%;
    font-size: 1.6rem;
    text-align: left;
    position: absolute;
    bottom: 7%;
    left: 0;
}
.cycle-list__item:nth-child(3) {
    width: 30.22727%;
    font-size: 1.6rem;
    text-align: left;
    position: absolute;
    bottom: 7%;
    right: -1%;
}

.cycle-list__item p{
    font-size: 1.8rem;
    margin-bottom: 0.4rem;
}


@media screen and (max-width: 767px) {
    .cycle-list__item:nth-child(1) {
    width: 100%;
    position: static;
    margin-bottom: 3rem;
    }

    .cycle-list__item:nth-child(2) {
    width: 100%;
    position: static;
    margin-bottom: 3rem;
    }
    .cycle-list__item:nth-child(3) {
    width: 100%;
    position: static;
    }
    
    .answer-block .illust-01 {
    width: 100%;
    position: static;
    }
    
    .answer-block .illust-02 {
    width: 100%;
    margin: 3rem auto;
    position: static;
    }
    
    .inner-flame-contents {
    padding: 3rem;
    }
    
    .answer-block .answer-title {
    font-size: 1.8rem;
    }
    
    .answer {
    padding: 50px 0;
    }
    
    .inner-flame-contents {
    margin-top: 3rem;
    }
}


/* ---------- kit ---------- */

.kit {
    background-color: #fff;
    padding: 80px 0;
    text-align: center;
}

.kit h2 {
    font-size: 3rem;
}
.kit .kit-block {
    margin-top: 3rem;
    background-color: #fbf2db;
}

.kit .kit-list {
    display: flex;
}

.kit .kit-block {
    padding: 5rem;
}

.kit .kit-text {
    font-size:1.6rem; 
    width:60%;
    margin-right: 5rem;
    text-align: left;
}

.kit .kit-text1 {
    margin-bottom: 2rem;
    text-align: justify;
}

.kit .kit-img {
    width:30%;
}


@media screen and (max-width: 767px) {
    .kit .kit-list {
        display: block;
    }
    .kit .kit-text {
        width:100%;
        margin-right: 0;
        margin-bottom: 3rem;
    }
    
    .kit .kit-img {
        width:100%;
    }
    
    .kit .kit-block {
        padding: 3rem;
    }
    
    .kit {
        padding: 50px 0;
    }
    
}



/* ---------- contact ---------- */

.contact {
    background-color: #eee;
    padding: 80px 0;
    text-align: center;
}

.contact h2 {
    font-size: 3rem;
}

.contact-block {
    background-color: #fff;
    margin-top: 3rem;
    padding: 5rem;
}

.contact-list {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.contact-logo {
    font-size: 3rem;
    font-weight: bold;
    width:32rem;
    line-height: 1.4;
    margin-bottom: 2rem;
}

.contact-text {
    text-align: left;
    font-size: 1.6rem;
}

.button {
    font-size: 2.4rem;
    width:50rem;
    margin-top: 2rem;
    padding: 1.6rem 0;
    text-align: center;
    color:#fff;
    display: block;
    background: #ef7804;
    border-radius: 0.6rem;
    -webkit-transition: all .25s ease-in-out;
    transition: all .25s ease-in-out;
}


@media screen and (max-width: 767px) {
    
    .contact-list {
        display: block;
    }  
    
    .button {
        width:100%;
    }
    
    .contact-logo {
        width:100%;
    }
    
    .contact-block {
        padding: 3.4rem;
    }
    
    .button {
        font-size: 1.6rem;
        margin-top: 2rem;
        padding: 1.6rem 0;
    }
    
    .contact {
        padding: 50px 0;
    }
}





/* ---------- footer ---------- */


.footer-logo {
    width:40rem;
}

.upper-row {
    border-top: 1px solid #555;
    padding: 35px 0 50px;
}

.row {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.copy {
        font-size: 1.2rem;
    }

#pagetop {
    background-color: #fff;
    border: 1px solid #333;
    border-radius: 100%;
    cursor: pointer;
    font-size: 7rem;
    line-height: 87px;
    position: fixed;
    bottom: 50px;
    right: 50px;
    text-align: center;
    height: 95px;
    width: 95px;
}


@media screen and (max-width: 767px) {
    
    .footer-logo {
        width:100%;
        margin-bottom: 1rem;
    }

    .copy {
        font-size: 2.1vw;
    }

    #pagetop {
        font-size: 10vw;
        line-height: 12vw;
        bottom: 4vw;
        right: 4vw;
        height: 12.66vw;
        max-height: 95px;
        width: 12.66vw;
        max-width: 95px;
    }
    
    .upper-row {
        padding: 26px 0 30px;
    }
}