﻿/*common*/
html, body {
	margin: 0;
    padding: 0;
}
body {
	box-sizing: border-box;
}
.fade {
	opacity: 1;
}
.fade:hover {
	opacity: 0.7;
}
img {
width: 100%;
height: auto;
}

/*mainvisual*/
#mainvisual {
width: 100%;
margin: 0;
padding: 0;
}
#mainvisual h1 {
width: 100%;
margin: 0;
padding: 0;
}

/*maincontents*/
#maincontents {
width: 100%;
margin: 0 auto;
padding: 0;
}

/*reason*/
#reason {
width: 100%;
background-color: #e9f1f7;
padding: 60px 0;
}
#reason .reason_wrapper {
width: 1080px;
margin: 0 auto;
}
#reason .reason01 ,
#reason .reason02 {
box-shadow: 0 0 10px 0 rgba(38, 113, 177, .1);
position: relative;
margin-bottom: 40px;
}
#reason .reason01_txt {
width: 520px;
position: absolute;
left: 77px;
top: 63px;
}
#reason .reason01_txt h3 {
width: 352px;
margin: 0 auto 15px;
}
#reason .reason01_txt h2 {
width: 520px;
margin-bottom: 41px;
}
#reason .reason01_txt p {
font-size: 16px;
line-height: 1.75;
margin-bottom: 1em;
}
#reason .reason02_txt {
width: 560px;
position: absolute;
right: 77px;
top: 63px;
}
#reason .reason02_txt h2 {
width: 560px;
margin-bottom: 41px;
}
#reason .reason02_txt p {
font-size: 16px;
line-height: 1.75;
margin-bottom: 1em;
}

/*effect*/
#effect {
background: url("../img/sec03_bg.jpg") top center repeat-y;
background-size: 100% auto;
padding: 60px 0;
}
#effect .effect_inner {
width: 920px;
margin: 0 auto;
}
#effect .effect_inner h3 {
width: 322px;
margin: 0 auto 20px;
}
#effect .effect_inner h2 {
width: 590px;
margin: 0 auto 80px;
}
#effect .effect_body_inner {
display: flex;
}
#effect .effect_txt01 {
width: 460px;
margin: 0 auto 0 0;
}
#effect .effect_txt01 p {
font-size: 16px;
line-height: 1.75;
margin-bottom: 1em;
}
#effect .effect_txt01 p.cap {
font-size: 14px;
line-height: 1.6;
color: #767676;
letter-spacing: 0;
}
#effect .effect_img01 {
width: 434px;
margin: 0 0 0 auto;
}

#effect .effect_illarea {
width: 1050px;
margin: 0 auto;
}
#effect .effect_illarea h3 {
margin: 0;
}
#effect .effect_illwrapper {
margin: 0;
background: url("../img/ill_bg_middle_pc.png") top center repeat-y;
position: relative
}
#effect .effect_illwrapper::after {
content: url("../img/ill_bg_bottom_pc.png");
width: 1050px;
height: 75px;
position: absolute;
bottom: -75px;
left: 0;
}
#effect .effect_illinner {
width: 860px;
margin: 0 auto;
}
#effect .illtxt_wrapper {
width: 100%;
padding: 25px;
background-color: #f9f2f9;
}
#effect .illtxt_wrapper p {
font-size: 16px;
line-height: 1.75;
}
#effect .illtxt_wrapper strong {
font-weight: bold;
background: linear-gradient(transparent 60%, #ddb2de 40%);
}

#effect .effect_movarea {
width: 720px;
margin: 100px auto 0;
}
#effect .effect_movarea h3 {
width: 446px;
margin: 0 auto 40px;
}
#effect .effect_movarea p {
font-size: 16px;
line-height: 1.6;
margin-bottom: 1em;
text-align: center;
}
#effect .effect_movarea .mov_inner {
width: 100%;
margin: 0 auto;
position: relative;
padding-top: 56.25%;
}
#effect .effect_movarea .mov_inner iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
}

/*aboutacai*/
#aboutacai {
width: 100%;
background-color: #f8f0f8;
padding: 65px 0;
}
#aboutacai .about_inner {
width: 800px;
margin: 0 auto;
}
#aboutacai .about_inner p {
font-size: 16px;
line-height: 1.75;
}
#aboutacai .acai_titlearea {
display: flex;
margin: 0 auto 60px;
}
#aboutacai .acai_txt {
width: 400px;
margin: 0 auto 0 0;
}
#aboutacai .acai_img {
width: 360px;
margin: 0 0 0 auto;
}
#aboutacai .acai_img_sp {
display: none;
}
#aboutacai .acai_txt p.cap {
font-size: 14px;
line-height: 2;
color: #767676;
padding: 30px 0 0 30px;
letter-spacing: 0;
}
#aboutacai .acai_img02 {
width: 100%;
margin: 40px auto 0;
}


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

}

@media only screen and (max-width: 768px) {
/*reason*/
#reason {
padding: 40px 0;
}
#reason .reason_wrapper {
width: 90%;
margin: 0 auto;
}
#reason .reason01 ,
#reason .reason02 {
box-shadow: 0 0 10px 0 rgba(38, 113, 177, .1);
position: relative;
margin-bottom: 20px;
background-color: #FFF;
}
#reason .reason01_txt {
width: 88%;
position: inherit;
margin: 0 auto;
left: inherit;
top: inherit;
}
#reason .reason01_txt h3 {
width: 82%;
margin: 0 auto 15px;
padding-top: 25px;
}
#reason .reason01_txt h2 {
width: 100%;
margin-bottom: 25px;
}
#reason .reason01_txt p {
font-size: 14px;
line-height: 1.75;
margin-bottom: 1em;
}
#reason .reason02_txt {
width: 88%;
position: inherit;
margin: 0 auto;
right: inherit;
top: inherit;
}
#reason .reason02_txt h2 {
width: 100%;
margin-bottom: 25px;
padding-top: 25px;
}
#reason .reason02_txt p {
font-size: 14px;
line-height: 1.75;
margin-bottom: 1em;
}

/*effect*/
#effect {
background: url("../img/sec03_bg.jpg") top center repeat-y;
background-size: 100% auto;
padding: 40px 0;
}
#effect .effect_inner {
width: 88%;
margin: 0 auto;
}
#effect .effect_inner h3 {
width: 61%;
margin: 0 auto 20px;
}
#effect .effect_inner h2 {
width: 100%;
margin: 0 auto 15px;
}
#effect .effect_body_inner {
display: flex;
flex-direction: column;
}
#effect .effect_txt01 {
width: 100%;
margin: 0 auto;
order: 2;
}
#effect .effect_txt01 p {
font-size: 14px;
line-height: 1.75;
margin-bottom: 1em;
}
#effect .effect_txt01 p.cap {
font-size: 12px;
line-height: 1.4;
color: #767676;
letter-spacing: 0;
}
#effect .effect_img01 {
width: 68%;
margin: 0 auto 15px;
order: 1;
}

#effect .effect_illarea {
width: 100%;
margin: 0 auto;
}
#effect .effect_illarea h3 {
margin: 0;
}
#effect .effect_illwrapper {
margin: 0;
background-image: none;
background-color: #FFF;
background-size: 100% auto;
position: relative
}
#effect .effect_illwrapper::after {
content: "";
width: 100%;
height: auto;
padding-top: 13.333%;
background: url("../img/ill_bg_bottom_sp.png") bottom center no-repeat;
background-size: 100% auto;
position: absolute;
bottom: -4%;
left: 0;
}
#effect .effect_illinner {
width: 90%;
margin: 0 auto;
padding-bottom: 10px;
}
#effect .illtxt_wrapper {
width: 100%;
padding: 20px;
background-color: #f9f2f9;
}
#effect .illtxt_wrapper p {
font-size: 14px;
line-height: 1.75;
}
#effect .illtxt_wrapper strong {
font-weight: bold;
background: linear-gradient(transparent 60%, #ddb2de 40%);
}

#effect .effect_movarea {
width: 90%;
margin: 15% auto 0;
}
#effect .effect_movarea h3 {
width: 100%;
margin: 0 auto 30px;
}
#effect .effect_movarea p {
font-size: 14px;
line-height: 1.6;
margin-bottom: 1em;
text-align: left;
}
#effect .effect_movarea .mov_inner {
width: 100%;
margin: 0 auto;
position: relative;
padding-top: 56.25%;
}
#effect .effect_movarea .mov_inner iframe {
width: 100%;
height: 100%;
position: absolute;
top: 0;
right: 0;
}

/*aboutacai*/
#aboutacai {
width: 100%;
background-color: #f8f0f8;
padding: 35px 0;
}
#aboutacai .about_inner {
width: 90%;
margin: 0 auto;
}
#aboutacai .about_inner p {
font-size: 14px;
line-height: 1.75;
}
#aboutacai .acai_titlearea {
display: flex;
margin: 0 auto 20px;
flex-direction: column;
}
#aboutacai .acai_txt {
width: 100%;
margin: 0 auto;
order: 1;
}
#aboutacai .acai_img {
display: none;
}
#aboutacai .acai_img_sp {
display: block;
width: 90%;
margin: 20px auto 0;
}
#aboutacai .acai_txt p.cap {
font-size: 12px;
line-height: 1.2;
color: #767676;
padding: 10px 0;
margin: 0 0 0 5%;
letter-spacing: 0;
}
#aboutacai .acai_img02 {
width: 100%;
margin: 20px auto 0;
}
}
