@charset "UTF-8";

.spview_only {
    display: none;
}

.hide {
    display: none !important;
}

.icon {
    vertical-align: middle;
    display: inline-block;
    position: relative;
    z-index: 1;
}

.icon::before {
    display: block;
}

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

a {
    color: inherit;
    transition-property: opacity;
    transition-duration: .3s;
}

a:hover {
    text-decoration: none;
}

body.js_mouseover a:hover,
body.js_mouseover button:hover,
body.js_mouseover button:focus,
body.js_mouseover input[type="reset"]:hover,
body.js_mouseover input[type="reset"]:focus {
    opacity: 0.7;
}

/* ------------------------------------------------------------------------------------------------------------ */

/* layout ↓ */

/* ------------------------------------------------------------------------------------------------------------ */
.t-general.contentfix960N2014 .mainArea {
    margin-top: 0 !important;
    width: 100%;
}
@media screen and (min-width: 960px) {
.pc .contentfix960N2014 .mainArea,
.contentfix960N2014 .mainArea {
}
}

.contentfix960N2014 .headerN2015 .hdCateOuter,
.contentfix960N2014 .headerN2015 .lowInfoOuter {
    margin-bottom: 0 !important;
}

#lp,
.block {
    width: 100%;
    display: block;
}

#lp,
.mainvis,
.block,
.container,
.cont {}

#lp {
    overflow-x: hidden;
    font-size: 62.5%;
    /*    font-family: source-han-sans-japanese, 'Noto Sans JP', 'ヒラギノ角ゴ Pro W6', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'メイリオ', 'Meiryo', 'Osaka', 'ＭＳ Ｐゴシック', 'MS PGothic', 'sans-serif';*/
    /*    font-family: 'Arial','Hiragino Sans','Noto Sans JP','ヒラギノ角ゴシック','ヒラギノ角ゴ Pro W3','メイリオ',Meiryo,sans-serif;*/
    font-style: normal;
    font-weight: 400;
    font-weight: 300;
    font-size: 17px;
    line-height: 1.7;
    color: #000;
    color: #514331;
    margin: 0;
    padding: 80px 0;
    padding: 0 0 80px;
    width: 100%;
    background-color: #fff;
}

html.mobilePC #lp {
/*    overflow-x: auto;*/
}

#lp * {
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

.block {
    padding-top: 1px;
    padding-bottom: 1px;
    background: transparent;
}


.container {
    width: 100%;
}

.cont {
    margin-left: auto;
    margin-right: auto;
}

html.mobilePC,
html.mobilePC body {
    /*    overflow-x: hidden;*/
/*    width: 1380px;*/
}

html.mobilePC .cont {
/*    width: 1380px;*/
/*    width: 1420px;*/
/*    margin: auto;*/
/*    overflow-x: hidden;*/
}

html.mobilePC .contentfix960N2014 .mainArea,
html.mobilePC .headerN2015 {
/*    width: 1420px;*/
}

html.mobilePC .fig {
    /*    display: none;*/
}

html.mobilePC .inner {
    /*    transform: scale(0.76);*/
    /*    max-width: calc(100vw - 80px);*/
}

.inner {
    width: 1380px;
    margin-left: auto;
    margin-right: auto;
}

.inner {
    padding-left: 0px;
    padding-right: 0px;
}

.inner.inner788 {
    width: 788px;
}

.inner.inner1174 {
    width: 1174px;
}

.inner.inner1256 {
    width: 1256px;
}

.inner.inner1331 {
    width: 1331px;
}

.box {
    background: #fff;
    border-radius: 10px;
    padding: 10px 77px 121px;
    margin: 44px auto 38px;
}


/* ------------------------------------------------------------------------------------------------------------ */

/* parts */

/* ------------------------------------------------------------------------------------------------------------ */


.txtSS {
    font-size: 12px;
}

.txtS {
    font-size: 14px;
}

.txtN {
    font-size: 16px;
}

.txtM {
    font-size: 22px;
}

.txt20 {
    font-size: 20px;
    line-height: 1.3;
}

.txt22 {
    font-size: 22px;
    line-height: 1.3;
}

.txt26 {
    font-size: 26px;
    line-height: 1.3;
}

.txt30 {
    font-size: 30px;
    line-height: 1.2;
}

.txt34 {
    font-size: 34px;
    line-height: 1.2;
}

.txt40 {
    font-size: 40px;
    line-height: 1.2;
}

.txt46 {
    font-size: 46px;
    line-height: 1.1;
}

.txt50 {
    font-size: 50px;
    line-height: 1.1;
}

.txt53 {
    font-size: 53px;
    line-height: 1.1;
}

.txt62 {
    font-size: 62px;
    line-height: 1.1;
}

.txt70 {
    font-size: 70px;
    line-height: 1.1;
}


.bg_white {
    background-color: #fff;
}

.bg_cream {
    background: #F9EEE3;
}

.bg_green,
.bg_orange,
.bg_wheat,
.bg_yellow {
    position: relative;
    z-index: 9;
}

.bg_green:before,
.bg_orange:before,
.bg_yellow:before {
    position: absolute;
    content: "";
    z-index: -1;
    top: 0;
    left: 0;
    width: 100%;
    height: 50%;
    display: none;
}

.bg_green {
/*    background-color: #BDD7C6;*/
    background: transparent url(../images/bg_green.png) repeat-y bottom;
    background: transparent url(../images/bg_green_mix.png) no-repeat bottom;
    background-size: max(100%, 1380px) auto;
    background-size: max(100%, 1484px) auto;
    padding-bottom: 240px;
    padding-bottom: 52%;
    position: relative;
}
@media screen and (min-width: 1440px) {
    .bg_green {
        padding-bottom: 40%;
/*        padding-bottom: 786px;*/
    }
}
.bg_green:before {
/*    background: #BDD7C6;*/
}

.bg_wheat {
    background-color: #f0e5c0;
    background: transparent url(../images/bg_wheat.png) no-repeat bottom;
    background-size: 100% auto;
    background-size: max(100%, 1380px) auto;
    background-size: max(100%, 1484px) auto;
    padding-bottom: 270px;
    padding-bottom: 240px;
    padding-bottom: 60px;
    position: relative;
}

.bg_wheat:before {
    background: #f0e5c0;
}

@media screen and (max-width: 1480px) {
    .bg_wheat {
        background-size: max(100%, 1800px) auto;
    }
}


.bg_orange {
    background-color: #FFD2AC;
    background: transparent url(../images/bg_orange.png) no-repeat bottom;
    background-size: max(100%, 1380px) auto;
    background-size: max(100%, 1484px) auto;
    padding-bottom: 270px;
    padding-bottom: 60px;
    position: relative;
}

.bg_orange:before {
    background: #FFD2AC;
}

.bg_yellow {
    background-color: #F5D38C;
    background: transparent url(../images/bg_yellow.png) repeat-y bottom;
    background-size: cover;
    padding-bottom: 270px;
    padding-bottom: 240px;
    position: relative;
}

.bg_yellow:before {
    background: #F5D38C;
}

.bg_pic {
    position: relative;
    z-index: -1;
    z-index: 1;
    margin-top: -34vw !important;
}

.bg_pic_img {
    width: 100vw;
}

.bg_pic.pic_b img.pcview_only {
    margin-top: -18vw;
}
.safari #sec_green+.bg_pic.pic_b img.pcview_only {
    min-height: 1200px;
}
/*.safari .bg_green {
    background: transparent url(../images/bg_green_lon.png) no-repeat; bottom;
    background-size: max(100%, 1484px) auto;
    padding-bottom: 240px;
}*/


section#sec_first {
    margin-bottom: -400px;
    position: relative;
    z-index: 99;
}

section#sec_first+section {
    padding-top: 500px;
}


i[class*=clr_],
i[class*=txt] {
    font-style: normal;
}

.clr_red {
    color: #CB2B29;
}

.clr_orange {
    color: #F49127;
}

.clr_white {
    color: #fff;
}

.no_border {
    border: none !important;
}

.shadow {
    /*    box-shadow: 0px 0px 0px 3px #eee;*/
    /*    box-shadow: 0px 10px 25px 1px #ddd;*/
}

/* ------------------------------------------------------------------------------------------------------------ */

/* content */

/* ------------------------------------------------------------------------------------------------------------ */
.tit_01 {
    margin-top: 139px;
    margin-bottom: 139px;
}

.catch {
    margin-top: 112px;
    margin-bottom: 34px;
}

.pc_nowrap {
    white-space: nowrap;
}



.tit_border {
    border-bottom: 1px solid;
    display: inline-block;
    padding-bottom: 24px;
}

.tit_border_solid {
    border-bottom: 2px solid #514331;
    display: inline-block;
    padding-bottom: 0.2em;
    margin-bottom: 0.2em;
}

.tit_border_brown {
    border-bottom: 1px dashed #C7905F;
    display: inline-block;
    padding-bottom: 0.3em;
    margin-bottom: 0.3em;
}

.tit_flow {
    display: flex;
    border-bottom: 2px solid #5C4B36;
    padding: 46px 0 41px 70px;
    margin: -10px -77px 68px;
}


.tit_no {
    color: #CB2B29;
    font-size: 60px;
    margin-right: 32px;
    font-weight: normal;
    font-family: 'Arial';
    display: inline-flex;
    align-items: center;
}

.tit_no span {
    border-left: 4px solid;
    border-left: 9px solid;
    padding-left: 14px;
}

.tit_dtl_sub {
    font-size: 18px;
    display: block;
    margin-top: 8px;
    font-weight: normal;
    font-family: 'Arial';
}

.tit_dtl {}


.area_pic {
    margin: auto;
}

.area_pic_img {
    width: 591px;
}

.area_pic_dtl {
    width: calc(100% - 591px - 47px);
}

.area_ideas {
    margin: 50px auto 20px;
    width: 1077px;
    max-width: 100%;
}
.area_graph {
    width: 1077px;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}


.idea_itm {
    position: relative;
    z-index: 1;
    width: calc(100% + 160px - 434px);
}

.row_normal .idea_itm {
    padding: 90px 230px 90px 65px;
    border-radius: 80px 100px 100px 8px;
}

.row_reverse .idea_itm {
    padding: 90px 65px 90px 230px;
    border-radius: 80px 100px 8px 100px;
}

.idea_pic {
    width: 434px;
    position: relative;
    z-index: 2;
}

.row_normal .idea_pic {
    margin-left: -160px;
}

.row_reverse .idea_pic {
    margin-right: -160px;
}

.fig {
    position: absolute;
    z-index: 9;
}

img#fig_1 {
    right: 40px;
    top: -210px;
    width: 500px;
}

.area_circle {
    margin: auto;
    padding-top: 60px;
}

.circle {
    background: #fff;
    border-radius: 100%;
    height: 628px;
    width: 628px;
    padding: 14% 2% 6%;
    margin-bottom: 200px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
}

.circle~.circle {
    margin-top: -414px;
}

.circle:last-of-type {
    margin-bottom: 0;
}

.circle_left {
    /*    justify-self: flex-start;*/
    float: left;
    margin-right: 50%;
}

.circle_right {
    /*    justify-self: flex-end;*/
    float: right;
    margin-left: 50%;
}

.circle .fig {
    top: 0;
    margin-top: -120px;
}


img#fig_coffee {
    bottom: -360px;
    right: -120px;
    width: 880px;
}

img#fig_coffee {
    bottom: -350px;
    right: -20px;
    width: 770px;
/*    border-radius: 0 0 100% 100%;*/
}


.area_onepoint {
    margin: 240px auto 0;
}

.onepoint {
    margin-bottom: 170px;
}

.onepoint>* {
    width: 668px;
}

.onepoint_dtl {
    padding: 157px 60px 157px 86px;
    background: #fff;
    border-radius: 0 0 34% 0;
}

.onepoint_up {
    margin-top: -100px;
    padding-bottom: 100px;
}

#sec_recommend {
    padding-bottom: 240px;
    padding-bottom: 1px;
}

.area_boxInfo {
    margin: 30px auto;
}

.area_boxInfo_dtl {
    width: 606px;
    padding: 30px 10px;
    padding: 30px 4px;
    border: 1px solid;
    border-radius: 20px 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.area_boxInfo_tit {
    text-align: center;
    background: skyblue;
    padding: 20px;
    border-radius: 20px 20px 0 0;
    margin: -30px -10px 30px;
    margin: -30px -4px 30px;
    font-weight: bold;
    color: #fff;
    width: calc(100% + 10px + 10px);
}

.area_boxInfo_dtl.orange {
    border-color: #D49C66;
    border-color: #E3862D;
}

.area_boxInfo_dtl.orange .area_boxInfo_tit {
    background: #D49C66;
    background: #E3862D;
}

.area_boxInfo_dtl.green {
    border-color: #90B39C;
    border-color: #5FBA7F;
}

.area_boxInfo_dtl.green .area_boxInfo_tit {
    background: #90B39C;
    background: #5FBA7F;
}

.area_boxInfo_dtl ul {
    display: inline-block;
    margin: 0 40px;
}

.area_lead {
    margin: 252px auto 1px;
    margin: 212px auto 1px;
}

.area_lead_pic {
    width: 460px;
}

.area_lead_itm {
    width: calc(100% - 460px - 40px);
}

.ac_head {
    cursor: pointer;
    position: relative;
    z-index: 99;
}

.box.is_closed {
    padding-bottom: 0;
    border-bottom: none;
}

.box.is_closed .tit_flow {
    border-bottom: none;
}

.has_icon {
    position: relative;
}

.has_icon .icon {
    position: absolute;
    display: inline-block;
    top: 0px;
    bottom: 0;
    margin: auto;
    right: 40px;
    height: 2px;
    width: 48px;
    text-align: center;
    background: #000;
    z-index: 9;
    line-height: 1;
    transform: scale(.55);
}

.has_icon .icon:after {
    position: absolute;
    content: "";
    display: inline-block;
    margin: auto;
    right: 23px;
    height: 50px;
    width: 2px;
    text-align: center;
    background: #000;
    z-index: 9;
    line-height: 1;
    top: -23px;
}

.is_open .has_icon .icon:after {
    opacity: 0;
}

.has_fig {
    position: relative;
}

img#fig_coffee_bean1 {
    top: -220px;
    left: -40px;
}

img#fig_coffee_bean2 {
    bottom: -200px;
    right: -120px;
}

img#fig_kitcut1 {
    top: -280px;
    left: -180px;
}

img#fig_kitcut2 {
    bottom: -370px;
    right: -30px;
}


img#fig_o_coffee1 {
    top: -240px;
    left: -30px;
}

img#fig_o_coffee2 {
    bottom: -340px;
    right: -30px;
}

#sec_yellow_tit_01 {
    margin: 240px auto 167px;
}
#sec_yellow_tit_01 .clr_red.tit_border_solid {
    margin-top: 16px;
}
.area_onePoint {
    margin-top: 167px;
}
.area_onePoint .box {
    padding-bottom: 1px;
    margin-bottom: 100px;
}
.area_onePoint .box.is_open {
    border-radius: 10px 10px 200px 10px;
}

.tit_flow.tit_onePoint {
    font-size: 36px;
    line-height: 1.6;
    margin-bottom: 1px;
    padding: 66px 0 60px 115px;
    padding: 66px 0 60px 77px;
}
.tit_flow.tit_onePoint p {
    padding-left: 30px;
    border-left: 9px solid;
    padding: 10px 0 0 36px;
}

.onePoint {
    padding-top: 73px;
    padding-bottom: 61px;
}
.onePoint_img {
    width: 578px;
}

.onePoint_dtl {
    width: calc(100% - 578px - 94px);
    width: calc(100% - 578px - 90px);
}

#lp [href]:hover img:not(.linkButton-icon),
#lp .linkButton:hover {
    opacity: 0.7;
}

#lp .breadcrumbs{
  display: flex;
  max-width: 992px;
  font-size: 12px;
  margin: 8px auto;
  padding: 0 16px;
}

#lp .breadcrumbs-item:not(:last-of-type):after{
  display: inline-block;
  width: 0.7em;
  height: 0.7em;
  margin: 0 10px;
  content: "";
  border-top: 1px solid #514331;
  border-right: 1px solid #514331;
  transform: rotate(45deg) skew(-15deg, -15deg);
}

#lp .block.relative a:not(.linkButton) {
  display: block;
}

#lp .wrapper {
    text-align: center;
}

#lp .linkButton {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 600;
    color: #514331;
    border-radius: 300px;
    background: #ffffff;
    padding: 32px;
    width: 440px;
}

#lp .linkButton-icon {
    margin-right: 10px;
}

#lp .wrapper.inner960 {
    width: 960px;
    margin: 0 auto;
}

#lp .txt22.-hasLine {
    position: relative;
    display: inline-block;
}

#lp .txt22.-hasLine::before,
#lp .txt22.-hasLine::after {
    content: '';
    position: absolute;
    width: 1px;
    height: 20px;
    background-color: #514331;
    top: 0;
    bottom: 0;
    margin: auto;
}

#lp .txt22.-hasLine::before {
    left: -12px;
    transform: rotate(-25deg);
}

#lp .txt22.-hasLine::after {
    right: -12px;
    transform: rotate(25deg);
}