@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@400..800&display=swap');

* {
    margin               : 0;
    padding              : 0;
    /*-webkit-user-select: none;
    -webkit-touch-callout: none;*/
}

html {
    scroll-behavior: smooth;
    scroll-padding-top: 100px; /* 固定ヘッダの高さ分 */
    /*画面幅320pxのとき100vw=375px 37.5で割ることでfont-sizeの基準が10pxに*/
    font-size: calc(100vw / 37.5);
}

html,
body {
//    height                    : 100%;
    -webkit-overflow-scrolling: touch;
}

body {
    color                   : #383838;
    background-color: #fff;
    font-size: 1.4rem;
    margin                  : 0;
    padding                 : 0;
    font-family: "Baloo 2", "Noto Sans JP", sans-serif;
    /*font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;*/
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing  : antialiased;
    font-weight: normal;
    letter-spacing: 0.05rem;
}

/* TOPページ表示用　横幅いっぱいに広げるための対応 */
body.home #content,
#body_wrap.home #content,
body.front-page #content,
#body_wrap.home #content #main_content,
#body_wrap.home #content #main_content .post_content,
#body_wrap.home #content #main_content .post_content .mainVisual ul {
    margin-left: 0!important;
    margin-right: 0!important;
    padding-left: 0!important;
    padding-right: 0!important;
    max-width: 100%!important;
    width: 100%!important;
}

#body_wrap.home #content #main_content .post_content .mainVisual,
#body_wrap.home #content #main_content .post_content .mainVisual li {
    margin-bottom: 0!important;
}


section,
.section {
    padding: 4rem 0;
    margin-bottom:0!important;
}

.section.pt0 {
    padding-top: 0;
}

strong,
.normal {
    font-weight: normal;
}

li,
dl,
dt,
dd,
ul {
    list-style: none;
    margin    : 0;
    padding   : 0;
    line-height: 2;
}

ol {
    padding-left: 1rem;
}

ol li {
    list-style: decimal;
}

ul.list_dot,
ul.list_dot li {
    list-style: disc;
}

ul.list_numbar,
ul.list_numbar li {
    list-style: decimal;
}

ul.list_numbar {
    padding-left: 1.2rem;
}

dl {
    display: flex;
    padding: 1rem 0;
}

dt {
    width: 30%;
}

dd {
    width: 70%;
}

header,
nav,
section,
div,
footer {
    box-sizing: border-box;
}

.clear::after {
    content: "";
    display: block;
    clear  : both;
}

.h1Class,
.h2Class,
.h3Class,
.h4Class,
.h5Class,
.h6Class {
    font-weight: normal!important; 
    line-height: 1.5em!important;
}

.h1Class span,
.h2Class span,
.h3Class span,
.h4Class span,
.h5Class span,
.h6Class span {
    font-weight: normal!important;
}

.h2Class,
.h3Class {
    padding-bottom: 0.5rem!important;
    margin-bottom: 1rem!important;
    border-bottom: 2px solid #A0C5A3!important;
}

.h2Class {
    font-size: 1.8rem!important;
    padding-bottom: 1rem!important;
    margin-bottom: 2rem !important;
}

.h3Class {
    font-size: 1.8rem!important;
    padding-bottom: 1rem!important;
    margin-bottom: 1rem !important;
}

.h4Class {
    font-size: 1.6rem!important;
}

video {
    width: 100%;
    height: 280px;
}

p {
    line-height: 1.5em;
}

main p {
    margin-bottom: 1em;
}

.txtl {
    text-align: left !important;
}

.txtc {
    text-align: center !important;
}

.txtr {
    text-align: right !important;
}

.txtc-txtl {
    text-align: center;
}

.mb0 {
    margin-bottom: 0 !important;
}

.pa0 {
    padding: 0 !important;
}

a,
a img,
a:hover,
a:hover img,
.cp_qa .cp_actab-content,
.cp_qa .cp_plus,
.g-nav {
    -webkit-transition: 0.3s;
    -moz-transition   : 0.3s;
    transition        : 0.3s;
}

img {
    vertical-align: middle;
    width: 100%;
    -webkit-backface-visibility: hidden;
    image-rendering: -webkit-optimize-contrast;
}

img.radius {
    border-radius: 50px;
}

img.shadow {
    box-shadow: 0 3px 6px rgba(0,0,0,0.15);
    margin-bottom: 0.5rem;
}

.toggleImg {}

img.fit {
    width     : 300px;
    height    : auto;
    object-fit: cover;
}

a,
a:link,
a:visited,
a:focus {
    outline                    : none !important;
    color                      : #1a1a1a;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    word-break                 : break-all;
    text-decoration            : none;
}

a:hover {
    outline: none;
    cursor : pointer;
}

a img {
    text-decoration: none;
    outline        : none;
}

a:hover img {
    opacity        : 0.7;
    text-decoration: none;
}

a.link {
    display: inline-block;
}

a.link::after {
    content      : "";
    display      : block;
    width        : 0;
    transition   : width 0.3s;
    border-bottom: 1px solid #34C759;
}

a.link:hover::after {
    width: 100%;
}

a.link:hover {
    opacity: 1;
    cursor : pointer;
    color: #34C759 !important;
}

a.underline {
    text-decoration: underline;
    color: #0081F1;
}

.anchor {
    display: block;
    padding-top: 85px;
    margin-top: -85px;
}

.pc-only {
    display: none !important;
}

.sp-only {
    display: block !important;
}

.red {
    color: #34C759;
}

.green {
    color: #1D7B00;
}

.yellowgreen {
    color: #34C759;
}

.fixed {
    position: fixed;
    top     : 0;
    left    : 0;
    right   : 0;
    z-index : 2;
    width   : 100%;
}

/*要素入れ替え*/
.orderbox {
    display: flex;
    flex-direction: row;
}

.order01,
.order02,
.order03,
.order04 {
     width: 100%;
}

.order01 {order: 1;}
.order02 {order: 2;}
.order03 {order: 3;}
.order04 {order: 4;}

/*画像センター配置*/
.section03 img,
.section04 img,
.section05 img {
    display: block;
    margin: 0 auto;
}

/*ホバー時ゆっくり半透明*/
a.underline:hover,
.logo a:hover img,
.logo a:hover,
.more-btn a:hover,
.tag_list a:hover {
    opacity: 0.7;
    -webkit-transition: 0.3s;
    -moz-transition: 0.3s;
    transition: 0.3s;
    cursor: pointer;
}

@media screen and (min-width: 1025px) {
    a[href^="tel:"] {
        pointer-events: none;
    }

    .pc-only {
        display: block !important;
    }

    .sp-only {
        display: none !important;
    }

    .txtc-txtl {
        text-align: left;
    }

    .orderbox {
        flex-direction: column;
    }

    .order01 {order: 2;}
    .order02 {order: 1;}
    .order03 {order: 4;}
    .order04 {order: 3;}
}

@media screen and (min-width: 768px) {
    html {
        font-size: 12.5px;
    }
}

/*******************************************************/

/*-----------------------------
アニメーション
-----------------------------*/

/*フェードイン*/
.fadein,
.fadeleft,
.faderight,
.zoomin {
    opacity           : 0;
    transition        : all 1s;
    -moz-transition   : all 1s;
    -webkit-transition: all 1s;
}

.fadein {
    transform: translate(0, 20px);
}

.fadeleft {
    transform: translate(-10px, 0);
}

.faderight {
    transform: translate(10px, 0);
}

.fadein.scrollin,
.fadeleft.scrollin,
.faderight.scrollin {
    opacity  : 1;
    transform: translate(0, 0);
}

.fadein.delay01,
.fadeleft.delay01,
.faderight.delay01,
.zoomin.delay01 {
    transition-delay        : 0.2s;
    -webkit-transition-delay: 0.2s;
    -moz-transition-delay   : 0.2s;
}

.fadein.delay02,
.fadeleft.delay02,
.faderight.delay02,
.zoomin.delay02 {
    transition-delay        : 0.4s;
    -webkit-transition-delay: 0.4s;
    -moz-transition-delay   : 0.4s;
}

.fadein.delay03,
.fadeout.delay03,
.fadeleft.delay03,
.faderight.delay03,
.zoomin.delay03 {
    transition-delay        : 0.6s;
    -webkit-transition-delay: 0.6s;
    -moz-transition-delay   : 0.6s;
}

.fadein.delay04,
.fadeleft.delay04,
.faderight.delay04,
.zoomin.delay04 {
    transition-delay        : 0.8s;
    -webkit-transition-delay: 0.8s;
    -moz-transition-delay   : 0.8s;
}

.fadein.delay05,
.fadeleft.delay05,
.faderight.delay05,
.zoomin.delay05 {
    transition-delay        : 1s;
    -webkit-transition-delay: 1s;
    -moz-transition-delay   : 1s;
}

.fadein.delay06,
.fadeleft.delay06,
.faderight.delay06,
.zoomin.delay06 {
    transition-delay        : 1.2s;
    -webkit-transition-delay: 1.2s;
    -moz-transition-delay   : 1.2s;
}

/*スライドイン*/
.slideleft,
.slidentight,
.slidetop,
.slidebottom {
    opacity: 0;
}

.slideleft.scrollin {
    transform: translateX(200%);
    animation: slidein-left 0.5s ease-out forwards;
}

@keyframes slidein-left {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.slidentight.scrollin {
    transform: translateX(-200%);
    animation: slidein-right 0.5s ease-out forwards;
}

@keyframes slidein-right {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.slidetop.scrollin {
    transform: translateY(-200%);
    animation: slidein-top 0.5s ease-out forwards;
}

@keyframes slidein-top {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.slidebottom.scrollin {
    transform: translateY(200%);
    animation: slidein-bottom 0.5s ease-out forwards;
}

@keyframes slidein-bottom {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/*ズームイン*/
.zoomin.scrollin {
    animation: zoomin 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1 forwards;
}
 
@keyframes zoomin {
  0% {
    transform: scale(0.8);
    opacity: 0;
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

/*文字スライドイン*/
.slidetxt_box {
    overflow: hidden;
}

/*左右のアニメーション*/
.slide_txt{
    opacity: 0;/*事前に透過0にして消しておく*/
}

.slidetxt_left {
    animation-name:slidetextX100;
    animation-duration:0.8s;
    animation-fill-mode:forwards;
    opacity: 0;
}

@keyframes slidetextX100 {
  from {
    transform: translateX(-100%); /*要素を左の枠外に移動*/
    opacity: 0;
  }

  to {
    transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

.slidetxt_right {
    animation-name:slidetextX-100;
    animation-duration:0.8s;
    animation-fill-mode:forwards;
    opacity: 0;
}


@keyframes slidetextX-100 {
  from {
    transform: translateX(100%);/*要素を右の枠外に移動*/
    opacity: 0;
  }

  to {
    transform: translateX(0);/*要素を元の位置に移動*/
    opacity: 1;
  }
}

/*******************************************************/

/*-----------------------------
header
-----------------------------*/

header,
.g-nav {
    z-index: 9999;
}

header {
    box-sizing        : border-box;
    position          : fixed;
    width             : 100%;
    top               : 0;
    -webkit-transition: 0.3s;
    -moz-transition   : 0.3s;
    transition        : 0.3s;
    padding: 3rem 0;
    background: linear-gradient(180deg, #fff 10%, transparent 100%);
}

header [class*="col-sm-"],
footer [class*="col-sm-"] {
    padding: 0;
    margin: 0;
}

header .logo01 img,
nav.globalMenuSp .logo02 img {
    max-width: 13em;
}

/*-----------------------------
ハンバーガーメニュー
-----------------------------*/

.hamburger {
    z-index: 99999;
    position: fixed;
    right: 1.5rem;
    top: 1.5rem;
    width: 4.3rem;
    height: 4.3rem;
    cursor: pointer;
    text-align: center;
    background-color: #34C759;
    border-radius: 5rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hamburger p {
    margin-top: 5px;
    font-size: 0.85rem;
}

.hamburger span {
    display : block;
    width   : 1.5rem;
    height  : 1px;
    background : #fff;
    -webkit-transition: 0.3s ease-in-out;
    -moz-transition   : 0.3s ease-in-out;
    transition        : 0.3s ease-in-out;
}

.hamburger span:nth-child(1),
.hamburger span:nth-child(2) {
    margin-bottom: 0.6rem;
}

.hamburger span:nth-child(3) {
}

/* ナビ開いてる時のボタン */
.hamburger.active {
    background-color: transparent;
}

.hamburger.active span {
    height: 2px;
    background: #323232;
}

.hamburger.active span:nth-child(1) {
  -webkit-transform: rotate(-45deg);
  -moz-transform   : rotate(-45deg);
  transform        : rotate(-45deg);
  margin: 0;
}

.hamburger.active span:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform   : rotate(45deg);
  transform        : rotate(45deg);
  margin: -2px 0 0 0;
}

.hamburger.active span:nth-child(3) {
    opacity: 0;
}

nav.globalMenuSp {
    position: fixed;
    z-index: 9999;
    top: 0;
    right: 0;
    background-color: #fff;
    transform: translateX(120%);
    transition: all 0.6s;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    margin: 0 0 0 auto;
    width: 100vw;
    height: 100vh;
    text-align: center;
}

nav.globalMenuSp .logo02 {
    margin: 2.5rem auto;
}

nav.globalMenuSp .g-nav-list {
    border-top: 1px solid #DCDDDD;
    text-align: left;
}

nav.globalMenuSp .g-nav-list li {
    padding: 2rem 0 2rem 3rem;
    font-size: 1.6rem;
    border-bottom: 1px solid #DCDDDD;
}

nav.globalMenuSp .cta {
    margin-bottom: 2.5rem;
}

nav.globalMenuSp .cta a:nth-child(2) img {
    margin-top: 4rem;
}

nav.globalMenuSp p {
    font-size: 1.2rem;
}

nav.globalMenuSp .logo03 {
    margin-top: 4.5rem;
}

nav.globalMenuSp .logo03 img {
    max-width: 19.5rem;
}

/* このクラスを、jQueryで付与・削除する */
nav.globalMenuSp.active {
  transform: translateX(0%);
}

@media screen and (min-width: 1px) {
    /*ヘッダー縮小時*/
    header.smaller {
        padding: 2.5rem;
        background: #fff;
    }
}

@media screen and (min-width: 1025px) {
    nav.globalMenuSp {
        width: 500px;
    }
}

/*******************************************************/

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

footer {
    padding-top: 2rem;
}

footer .logo img {
    max-width: 16rem;
}

footer .sns {
    margin: 1rem 0 1.5rem;
    text-align: center;
}

.copy {
    font-size: 1.2rem;
    padding: 0.5rem 0 0.3rem;
    background-color: #DAF1D8;
    text-align: center;
}

@media screen and (min-width: 1025px) {
}

@media screen and (min-width: 768px) {
}

/*******************************************************/

/*-----------------------------
ボタン
-----------------------------*/

.more-btn a {
    color: #007AFF;
    display: table;
    margin-bottom: 1rem;
}

@media screen and (min-width: 768px) {
}

/*******************************************************/

/*-----------------------------
table
-----------------------------*/

table {
    margin : auto;
    display: table;
    width: 100%;
    table-layout: fixed;
    word-break: break-all;
    word-wrap: break-all;
}

.scroll-box {
  overflow-x: auto;
  padding-bottom: 10px;
  -webkit-overflow-scrolling: touch;
}

.scroll-box {
    margin-bottom: 2rem;
}

/*スクロールバー全体の高さ*/
.scroll-box::-webkit-scrollbar {
    height: 4px;
}

/*スクロールバー全体の背景*/
.scroll-box::-webkit-scrollbar-track {
    background: #eee;
}

/*スクロールバーの動く部分*/
.scroll-box::-webkit-scrollbar-thumb {
    background: #aaa;
    border: none;
}

/*スクロールバーの動く部分のホバー（マウスオーバー）*/
.scroll-box::-webkit-scrollbar-thumb:hover {
    background: #999;
}

.scroll-box table {
    min-width: 600px;
    border-collapse: collapse;
    border-spacing: 0;
}

.scroll-box table,
.table-box01 table {
    width: 100%;
}

.scroll-box th,
.scroll-box  td {
    vertical-align: middle;
    border: 1px solid #DCDCDC;
    text-align: center;
    padding: 1rem !important;
}

.scroll-box th {
    background: #F9F4EA;
}

.table-box01 th {
    width: 25%;
    font-size: 1.1rem;
}

.table-box01 th.status {
    width: 10%;
}

.table-box01 th,
.table-box01 td {
    vertical-align: middle;
    padding: 1rem 0 !important;
    text-align: left;
}

@media screen and (max-width: 1024px) {
    .table-box01 th,
    .table-box01 td {
        display: block;
        width: 100% !important;
    }

    .table-box01 th {
        padding-bottom: 0 !important;
    }
}

/*******************************************************/

/*-----------------------------
mainVisual
-----------------------------*/

.mainVisual li {
    position: relative;
}

.mainVisual li .text {
    position: absolute;
    bottom: 3rem;
    left: 3rem;
}

.mainVisual li .text img {
    margin-bottom: 1rem;
}

.mainVisual li:nth-child(1) .text img {
    max-width: 31.4rem;
}

.mainVisual li:nth-child(2) .text img {
    max-width: 17.3rem;
}

.mainVisual p {
    font-size: 1.5rem;
    line-height: 2.5em;
    margin: 0;
}

/* Nest Hubをターゲット */
@media only screen and (min-width: 1024px) and (max-width: 1024px) and (min-height: 600px) and (orientation: landscape) {
    /* Nest Hubに特化したスタイル */
    .pc-only {
        display: block !important;
    }

    .sp-only {
        display: none !important;
    }
}

@media screen and (min-width: 1025px) {
    .mainVisual li .text {
        bottom: 7rem;
        left: 16.6rem;
    }
}

@media screen and (min-width: 768px) {
}

/*-----------------------------
ページコンテンツ
-----------------------------*/

.logo a {
    display: table;
    margin: 0 auto;
}

.border_box {
    border: 2px solid #BFDEAB;
    padding: 2rem;
    border-radius: 10px;
    margin: 2rem 0;
}

.cta {
    display: table;
    margin: 2rem auto;
}

.cta img {
    max-width: 31.2rem;
}

.cta a:nth-child(2) img {
    margin-top: 2rem;
}

.grid_img {
    display: flex;
    justify-content: flex-end;
    margin: 0 0 0 auto;
    position: relative;
    right: -3.2rem;
}

.grid_img img:first-child {
    border-radius: 10px;
    margin-right: 2.5rem;
    max-width: 23rem;
    height: 15.1rem;
}

.grid_img img:last-child,
.grid_img .last-child {
    border-radius: 10px 0 0 10px;
    max-width: 8.9rem;
    height: 18.9rem;
    position: relative;
}

.section01 {
    background: url(../images/section01_bg_accent01.png), url(../images/section01_bg01.png);
    background-repeat: no-repeat;
    background-position: top left, bottom center;
    background-size: 100%, cover;
}

.section01 .title {
    /* position: sticky;*/
    top: 7.4rem;
    z-index: 2;
    background: none;
    overflow: hidden;
}

.title::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(../images/section01_title_bg.png);
    background-repeat: no-repeat;
    background-position: top;
    background-size: 100%;
    opacity: 0;
    transition: opacity 1s ease;
    z-index: -1;
}

.title.active::before {
    opacity: 1;
}

.section01 .h2Class {
    display: table;
    margin: 0 0 0 auto;
    padding: 1rem;
}

.section01 p {
    display: table;
    margin-bottom: 2rem;
    font-size: 1.3rem;
}

.section01 .end {
    display: table;
    margin: 0 0 0 auto;
    text-align: right;
}

.section01 .grid_img {
    align-items: flex-end;
    top: -2rem;
}

.section01 .grid_img last-child {
    top: -3rem;
}

.section01_fadein {
    opacity           : 0;
    transition        : all 2s;
    -moz-transition   : all 2s;
    -webkit-transition: all 2s;
}

.section01_fadein {
    transform: translate(0, 40px);
}

.section01_fadein.scrollin {
    opacity  : 1;
    transform: translate(0, 0);
}

.section01_fadein.scrollout {
    opacity  : 0;
    transform: translate(0, -40px);
}

.section02 {
    background: url(../images/section02_bg_accent01.png), url(../images/section02_bg_accent02.png), url(../images/section02_bg.png);
    background-repeat: no-repeat;
    background-position: top right, bottom right, bottom center;
    background-size: 25rem 16.8rem, 25rem 16.8rem, cover;
}

.section02 .h2Class,
.section07 .h2Class {
    display: table;
    padding: 1rem;
}

.section02 .grid_img {
    align-items: flex-end;
    top: -3rem;
}

.section02 .grid_img last-child {
    top: -4rem;
}

.section02 .content01 {
    background-image: url(../images/section01_bg02.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
    padding: 2rem 0 0.6rem;
    margin: 0.6rem 0 2rem;
}

.section02 .content01 .bg_green {
    background-color: #34C759;
    padding: 0.3em 2rem;
    color: #fff;
    display: table;
    margin: 0 auto 0.5rem;
}

.section02 .content01 .bg_green:nth-child(4) {
    margin-bottom: 1em;
}

.section02 .border_box .h3Class {
    font-size: 1.4rem;
}

.section03 {
    background: url(../images/section03_bg_accent01.png), url(../images/section03_bg_accent02.png), linear-gradient(to bottom, #FFF5CA 54%, #FCCC99 100%);
    background-repeat: no-repeat;
    background-position: top center, bottom center, center;
    background-size: 100%, 100%, cover;
}

.section03 img.img03,
.section04 img.img03,
.section05 img.img03 {
    margin: 0 auto 1rem 0;
}

.section03 img.img03 {
    max-width: 23.7rem;
}

.section03 .h2Class,
.section04 .h2Class,
.section05 .h2Class {
    background-repeat: no-repeat;
    background-position: bottom center;
    background-size: 100%;
    border: none;
    padding-bottom: 1.5rem;
}


.section03 .h2Class {
    background-image: url(../images/dot_orange.svg);
}

.section03 .h2Class span,
.section04 .h2Class span,
.section05 .h2Class span {
    background-color: #fff;
    margin: 0 0.3rem;
}

.section03 .h2Class span {
    color: #FF9500;
}

.section04 .h2Class span {
    color: #FF9D00;
}

.section03 .img_box,
.section04 .img_box,
.section05 .img_box {
    display: table;
    margin: 0 auto 4rem;
    position: relative;
}

.section03 .img_box img:first-child,
.section04 .img_box img:first-child,
.section05 .img_box img:first-child {
    width: 100%;
    max-width: 21.7rem;
}

.section03 .img_box .last-child,
.section04 .img_box .last-child,
.section05 .img_box .last-child {
    position: absolute;
}

.section03 .img_box .last-child {
    bottom: -5rem;
    right: -5rem;
    width: 17rem;
    height: 15.6rem;
}

.section04 .img_box .last-child {
    bottom: -2rem;
    left: -8rem;
    width: 19.1rem;
    height: 14.8rem;
}

.section05 .img_box .last-child {
    bottom: -1rem;
    right: -4rem;
    width: 7rem;
    height: 13.6rem;
}

.section03 img.img04,
.section04 img.img04,
.section05 img.img05 {
    margin: 2rem auto;
}

.section03 img.img04 {
    max-width: 28.9rem;
}

.section04 {
    background: url(../images/section04_bg_accent01.png), url(../images/section04_bg_accent02.png), #FFFCE7;
    background-repeat: no-repeat;
    background-position: top center, bottom center, center;
    background-size: 100%, 100%, cover;
}

.section04 img.img03 {
    max-width: 21.8rem;
}

.section04 .h2Class {
    background-image: url(../images/dot_yellow.svg);
}

.section04 .serif {
    background-repeat: no-repeat;
    background-size: 25rem;
    padding: 1rem 0;
    display: table;
    font-size: 1.2rem;
}

.section04 .serif.start {
    background-image: url(../images/serif_start.svg);
    background-position: center left;
    margin-bottom: 2rem;
}

.section04 .serif.end {
    background-image: url(../images/serif_end.svg);
    background-position: center right;
    margin: 0 0 2rem auto;
    text-align: right;
}

.section04 img.img04 {
    margin-top: 0;
    max-width: 26.3rem;
}

.section05 {
    background: url(../images/section05_bg_accent01.png), url(../images/section05_bg_accent02.png), linear-gradient(to bottom, #EBF5D1 0%, #fff 33%, #fff 67%, #EBF5D1 100%);
    background-repeat: no-repeat;
    background-position: top center, bottom center, center;
    background-size: 100%, 100%, cover;
}

.section05 img.img03 {
    max-width: 29.2rem;
}

.section05 .h2Class {
    background-image: url(../images/dot_green.svg);
}

.section05 img.img04 {
    margin-bottom: 1.5rem;
    max-width: 32.9rem;
}

.section05 img.img05 {
    max-width: 28.7rem;
}

.section06 {
    background: url(../images/section06_bg_accent01.png), url(../images/section06_bg_accent02.png), url(../images/section06_bg_accent03.png), url(../images/section06_bg.png);
    background-repeat: no-repeat;
    background-position: top left, top center, bottom center, center;
    background-size: 16.2rem 11rem, 100%, 100%, cover;
    text-align: center;
}

.section06 .h2Class {
    border: none;
    padding: 0;
    margin: 0 !important;
}

.section06 .logo {
    margin-bottom: 1.5rem;
}

.section06 .logo img {
    max-width: 130px;
}

.section06 img.img01 {
    margin-bottom: 1rem;
    max-width: 26rem;
}

.section06 img.img02 {
    margin-top: 2rem;
    max-width: 25rem;
}

.section06 .more-btn a {
    margin: 0 auto;
}

.section06 .cta {
    margin-top: 2.5rem;
}

.section07 {
    background: url(../images/section07_bg_accent01.png), url(../images/section07_bg_accent02.png), url(../images/section07_bg.png);
    background-repeat: no-repeat;
    background-position: top center, bottom center, center;
    background-size: 100%, 100%, cover;
    padding-bottom: 2rem;
}

.section07 .grid_img {
    margin-bottom: 2rem;
}

.section07 .border_box {
    background-color: #fff;
}

.section07 .h4Class {
    position: relative;
    display: flex;
    align-items: center;
    padding-bottom: 1.5rem;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid #A0C5A3;
}

.section07 .h4Class::before {
    content: "";
    display: inline-block;
    background-image: url(../images/ico_point.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 2.4rem;
    height: 2.4rem;
    margin-right: 0.5rem;
}

.section07 details summary {
    position: relative;
    background-color: #DAF1D8;
    padding: 0.5rem 1.5rem;
    margin-bottom: 2rem;
    cursor: pointer;
}

.section07 details[open] summary {
    margin-bottom: 0;
}

.section07 details summary::after {
    content: "";
    display: inline-block;
    background-image: url(../images/accordion_arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    width: 1.4rem;
    height: 1rem;
    position: absolute;
    top: 50%;
    right: 0.3em;
    transform: translate(-0.3em, -50%);
    -webkit-transform: translate(-0.3em, -50%);
    -ms-transform: translate(-0.3em, -50%);
}

.section07 details .box {
    background-color: #fff;
    padding: 2rem;
    margin-bottom: 2rem;
}

.section07 details .box p {
    margin: 0;
}

.section07 details .more-btn a {
    margin-top: 1em;
}

.section08 {
    background-image: url(../images/section08_bg.png);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    padding-bottom: 3rem;
}

.section08 .border_box {
    background: linear-gradient(180deg, #fff 61.01%, rgba(255, 255, 255, 0.464912) 87.83%, rgba(255, 255, 255, 0) 105.28%);
}

.section08 .content01 .more-btn a {
    margin-bottom: 2rem;
}

/*******************************************************/

/*-----------------------------
Responsive
-----------------------------*/

@media screen and (min-width: 1025px) {
}

@media screen and (min-width: 768px) {
    .grid_img {
        max-width: 500px;
    }

    .section01 {
        background: url(../images/section01_bg01_pc.png);
        background-repeat: no-repeat;
        background-position: bottom center;
        background-size: cover;
    }

    .section01 .title::before {
        background: url(../images/section01_title_bg_pc.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: 100%;
    }

    .section02 {
        background-size: 50rem 33.6rem, 50rem 33.6rem, cover;
    }

    .section03 {
        background: url(../images/section03_bg_accent01_pc.png), url(../images/section03_bg_accent02_pc.png), linear-gradient(to bottom, #FFF5CA 54%, #FCCC99 100%);
        background-repeat: no-repeat;
        background-position: top center, bottom center, center;
        background-size: 100%, 100%, cover;
    }

    .section04 {
        background: url(../images/section04_bg_accent01_pc.png), url(../images/section04_bg_accent02_pc.png), #FFFCE7;
        background-repeat: no-repeat;
        background-position: top center, bottom center, center;
        background-size: 100%, 100%, cover;
    }

    .section05 {
        background: url(../images/section05_bg_accent01_pc.png), url(../images/section05_bg_accent02_pc.png), linear-gradient(to bottom, #EBF5D1 0%, #fff 33%, #fff 67%, #EBF5D1 100%);
        background-repeat: no-repeat;
        background-position: top center, bottom center, center;
        background-size: 100%, 100%, cover;
    }

    .section06 {
        background: url(../images/section06_bg_accent01.png), url(../images/section06_bg_accent02_pc.png), url(../images/section06_bg_accent03_pc.png), url(../images/section06_bg.png);
        background-repeat: no-repeat;
        background-position: top left, top center, bottom center, center;
        background-size: 50rem 33.6rem, 100%, 100%, cover;
    }

    .section07 {
        background: url(../images/section07_bg_accent01_pc.png), url(../images/section07_bg_accent02_pc.png), url(../images/section07_bg_pc.png);
        background-repeat: no-repeat;
        background-position: top center, bottom center, center;
        background-size: 100%, 100%, cover;
    }

    .section08 {
        background-image: url(../images/section08_bg_pc.png);
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
    }
}