@charset "utf-8";

/* ==================================================
Common CSS
================================================== */

@media(max-width:959px){

/*common*/
.pc {
display:none;
}

img {
width:100%;
}

.tx {
padding-bottom:3vw;
}

.txx {
padding-bottom:7vw;
}

p {
font-size:4.5vw;
}

h1 {
width:37%;
margin:auto;
padding-top:0.5vw;
font-size:2.5vw;
font-weight:normal;
}

h2 {
font-size:6.8vw;
text-align:center;
padding-bottom:7vw;
width:92%;
margin:auto;
}

.titline {
border-bottom:#e50012 3px solid;
}

.titleicong {
font-size:18vw;
text-align:center;
color:#d2d2d2;
}

.titleiconw {
font-size:18vw;
text-align:center;
color:#fff;
}

.titleiconb {
font-size:18vw;
text-align:center;
color:#323232;
}

.btn_icon {
padding-right:2vw;
}

.btn_cta {
width:300px;
margin:auto;
border-radius:10px;
overflow:hidden;
}

.btn_cta a {
display:block;
background:#ff961e;
color:#fff;
text-align:center;
text-decoration:none;
font-weight:bold;
padding:15px 15px;
}

.btn_cta a:hover {
opacity:0.7;
}

.txend {
padding-bottom:50px;
}

.icon {
padding-right:1vw;
}



/*header*/
header {
width:100%;
background:rgba(255,255,255,0.9);
box-shadow:0 0 15px #c8c8c8;
letter-spacing:1px;
z-index:99!important;
}

header .area {
width:94%;
margin:auto;
padding:3vw 0 2.5vw;
display:flex;
}

header .logo {
width:30%;
margin-right:3%;
padding-top:1px;
}

.btn_header {
width:30%;
font-size:4vw;
border-radius:20px;
}

.btn_header a {
display:block;
background:#ff961e;
color:#fff;
text-align:center;
text-decoration:none;
font-weight:normal;
padding:1.5vw 0;
border-radius:20px;
}

.btn_header a:hover {
opacity:0.7;
}

header .header_icon {
padding-right:5px;
}


/*movie*/
.container {
width:100%;
height:56.25vw;
overflow:hidden;
}

.container .movie_area {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
background:url(../img/main_bg.png);
}

.container .movie_area iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index:-1;
}

.main_cts {
padding:13vw 0;
position:absolute;
z-index:99;
top:0;
}

.main_cts .copy_area {
width:80%;
height:74vw;
margin:auto;
background:rgba(255,255,255,0.8);
border-radius:6px;
padding:4vw 5vw;
}

.main_cts .copy_area .copy {
font-size:5.5vw;
line-height:135%;
font-weight:bold;
padding-bottom:5px;
text-align: center;
}

.main_cts .copy_area .ex {
padding-bottom:15px;
font-size:4vw;
}

.btn_main {
width:85%;
margin:auto;
border-radius:10px;
overflow:hidden;
}

.btn_main a {
display:block;
background:#329600;
color:#fff;
text-align:center;
text-decoration:none;
font-weight:normal;
padding:3vw 3vw;
font-size:4vw;
}

.btn_main a:hover {
opacity:0.7;
}

.swiper-container {
height:100vw;
position:relative;
}

.swiper-container img {
width:100%;
text-align:center;
}


/*about*/
.about {
background:url(../img/about_bg.png);
padding:5vw 0;
}

.about .about_area {
width:92%;
margin:0 auto 7vw;
}

.about .multi_device {
width:100%;
margin:auto;
padding-bottom:7vw;
}

.about .recommended_area {
width:92%;
margin:auto;
background:#fff;
border:#e50012 1px dotted;
border-radius:10px;
box-sizing:border-box;
padding:4vw 4vw;
}

.about .recommended_area .check {
width:100%;
margin:0 auto 3vw;
background:#faf0e6;
border-radius:10px;
padding:3vw 3vw;
font-weight:bold;
text-indent:-0.6em;
padding-left:1.9em;
line-height:135%;
}

.about .recommended_area .check_end {
margin-bottom:10vw;
position:relative;
}

.about .recommended_area .check_end:after {
width:0;
height:0;
border-top:#e50012 6vw solid;
border-right:10vw solid transparent;
border-bottom:6vw solid transparent;
border-left:10vw solid transparent;
position:absolute;
display:block;
content:"";
left:0;
right:0;
margin:auto;
bottom:-12vw;
}

.about .recommended_area .recommended {
width:100%;
margin:0 auto 3vw;
text-align:center;
background:#323232;
border-radius:10px;
padding:3vw 3vw;
font-size:5vw;
font-weight:bold;
color:#fff;
}

.about .recommended_area .result {
text-align:center;
font-size5vw;
font-weight:bold;
}


/*reason*/
.reason_area {
background:#666 url(../img/reason_bg.png) no-repeat top;
background-size:100%;
padding:0;
position:relative;
width:100%;
height:100%;
}

.reason_bg {
background:url(../img/reason_mask.png);
position:relative;
padding:10vw 0 6vw;
}

.reason_area .reason {
width:92%;
margin:0 auto 9vw;
position:relative;
background:#fff;
border-radius:10px;
padding:9vw 5vw;
}

.reason_area .reason_top {
margin-top:4vw;
}

.reason_area .reason_end {
margin-bottom:5vw;
}

.reason_area .reason .number {
width:30vw;
margin:auto;
background:#e50012;
border-radius:10px;
color:#fff;
padding:2vw 2vw;
text-align:center;
position:absolute;
top:-5vw;
left:0;
right:0;
font-family: 'Noto Serif', serif;
font-size:4vw
}

.reason_area .reason .number:after {
width:0;
height:0;
border-top:#e50012 10px solid;
border-right:10px solid transparent;
border-bottom:10px solid transparent;
border-left:10px solid transparent;
position:absolute;
display:block;
content:"";
left:0;
right:0;
margin:auto;
bottom:-20px;
}

.reason_area .reason .title {
font-size:6vw;
font-weight:bold;
text-align:center;
margin-bottom:5vw;
}

.reason_area .reason .marker {
border-bottom:#fae600 3px solid;
padding-bottom:0.2vw;
}

.reason_area .reason .title p {
border-bottom:#e50012 3px solid;
}

.reason_area .reason .reason_cts {
}

.reason_area .reason .reason_cts .photol {
width:100%;
margin-bottom:3vw;
}

.reason_area .reason .reason_cts .photor {
width:100%;
margin-bottom:3vw;
}

.reason_area .reason .reason_cts .ex {
width:100%;
}

.reason_area .reason .reason_cts .ex p {
padding-bottom:3vw;
}

.reason_area .reason .reason_cts .ex .attention {
font-size:3vw;
}


/*voice*/
.voice_area {
background:url(../img/voice_bg.png);
padding:5vw 0;
}

.voice_area .voice_title {
font-size:7vw;
text-align:center;
font-weight:bold;
padding-bottom:5vw;
}

.voice_area .voice_title .voice_subtitle {
background:#e50012;
border-radius:10px;
color:#fff;
padding:7px 7px 7px 15px;
margin-right:10px;
font-size:6vw;
font-weight:bold;
}

.voice_area .voice {
width:92%;
margin:0 auto 5vw;
background:#fff;
border-radius:10px;
padding:5vw 5vw 5vw;
box-shadow:0 0 10px #ccc;
position:relative;
}

.voice_area .voice .balloon {
font-size:5vw;
font-weight:bold;
background:#faebb4;
border-radius:10px;
padding:5vw;
position:relative;
margin-bottom:10vw;
}

.voice_area .voice .balloon:after {
width:0;
height:0;
border-top:#faebb4 7vw solid;
border-left:7vw solid transparent;
border-right:7vw solid transparent;
position:absolute;
display:block;
content:"";
left:0;
right:0;
margin:auto;
bottom:-7vw;
}

.voice_area .voice .photo {
width:100%;
}

.voice_area .voice img {
width:100%;
}

.voice_area .voice .ex {
width:100%;
}

.voice_area .voice .customer {
font-size:3vw;
padding:7vw 0 7vw;
text-align:center;
}

.voice_area .voice .customertop {
font-size:3vw;
padding:7vw 0 2vw;
text-align:left;
}

.voice_area .voice .customerbottom {
font-size:3vw;
padding:0 0 7vw;
text-align:left;
}

.voice_area .voice .customer .name {
font-size:6vw;
font-weight:bold;
}

.voice_area .voice .customer .item {
color:#969696;
}

.voice_area .voice .question {
border-top:#e50012 1px solid;
border-bottom:#e50012 1px solid;
color:#e50012;
font-weight:bold;
font-size:4.5vw;
padding:2vw 0;
margin-bottom:3vw;
text-align:center;
}

.voice_area .voice .voice_intro {
padding-bottom:5vw;
}

.voice_area .voice .txend {
padding-bottom:12vw;
}

.voice_area .voice .txspace {
padding-bottom:5vw;
}

.voice_area .voice .evidence {
width:100%;
margin-top:4vw;;
}

.voice_area .voice .voice3 {
padding-bottom:5vw;
}

.voice_area .voice .voice3l {
width:100%;
padding-bottom:3vw;
}

.voice_area .voice .voice3r {
width:100%;
}

.voice_area .voice .evidence3 {
padding-bottom:3vw;
}

.voice_area .voice .evidence_line {
border:#ccc 1px solid;
}

.voice_area .voice .voice_end {
padding-bottom:20vw;
}


/*toggle*/
.grad-wrap {
  position: relative;
}

.grad-trigger {
font-size:4.5vw;
width:40vw;
text-align:center;
background:#329600;
color:#fff;
border-radius:10px;
padding:4vw 7vw;
position:absolute;
margin:auto;
left:0;
right:0;
bottom:0;
z-index:1;
cursor:pointer;
}
.grad-trigger::after {
content:"続きを読む" /*クリック前のボタンのラベル*/
}
.grad-item {
position:relative;
display:none;
}
.mask::before {
display:block;
position:absolute;
bottom:0;
left:0;
content:"";
width:100%;
height:30vw; /*グラデーションで隠す高さ*/
background:-webkit-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
background:linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.9) 50%, rgba(255,255,255,0.9) 50%, #fff 100%);
}
.grad-trigger.is-show::after {
content: "閉じる" /*クリック後にボタンのラベルを変える*/
}

.on-click::after {
content: "閉じる" /*クリック後にボタンのラベルを変える*/
}


/*profile*/
.profile_area {
background:url(../img/profile_bg.png);
padding:5vw 0;
}

.profile_area .profile {
width:92%;
margin:auto;
}

.profile_area .profile .profile_cts {
padding-bottom:5vw;
}

.profile_area .profile .profile_cts .ex {
width:100%;
padding-bottom:3vw;
}

.profile_area .profile .profile_cts .ex .name {
font-size:7vw;
font-weight:bold;
padding-bottom:3vw;
}

.profile_area .profile .profile_cts .photo_area {
width:100%;
}

.profile_area .profile .profile_cts .lecturer {
width:70%;
margin:auto;
padding-bottom:5vw;
}

.profile_area .profile .profile_cts .lecturer img {
border:#ddd 1px solid;
}

.profile_area .profile .profile_cts .photo_area .book {
width:50%;
margin:0 auto 3vw;
border:#ddd 1px solid;
}

.profile_area .profile .bookstore {
}

.profile_area .profile .bookstore .bookstore_l {
padding-bottom:5vw;
}

.profile_area .profile .bookstore .bookstore_r {
padding-bottom:5vw;
}

.profile_area .profile .bookstore .photo {
padding-bottom:2vw;
}

.profile_area .profile .bookstore .caption {
font-size:3.5vw;
}


/*whats*/
.whats_area {
background:url(../img/whats_bg.png);
padding:5vw 0;
}

.whats_area .whats {
width:92%;
margin:auto;
}

.whats_area .whats .photos {
padding-bottom:7vw;
}

.whats_area .whats .photos .photol {
padding-bottom:4vw;
}

.whats_area .whats .photos .photor {
}

.whats_area .whats .position {
}

.whats_area .whats .position .title {
border-top:#e50012 3px solid;
border-bottom:#e50012 3px solid;
padding:2vw 0;
text-align:center;
font-weight:bold;
font-size:5vw;
margin-bottom:4vw;
}

.whats_area .whats .position table {
width:100%;
border-collapse:collapse;
border:#d2d2d2 1px solid;
margin-bottom:4vw;
text-align:center;
}

.whats_area .whats .position th {
background:#f0f0f0;
padding:3vw;
text-align:center;
border:#d2d2d2 1px solid;
font-size:3vw;
}

.whats_area .whats .position td {
background:#fff;
padding:3vw;
border:#d2d2d2 1px solid;
font-size:4vw;
}

.whats_area .whats .position .item {
width:20%;
}

.whats_area .whats .position .toll {
width:40%;
}

.whats_area .whats .position .free {
width:40%;
}

.whats_area .whats .position .item {
width:20%;
}

.whats_area .whats .position .strong_linet {
border-top:#e50012 3px solid;
box-sizing:border-box;
}

.whats_area .whats .position .strong_liner {
border-right:#e50012 3px solid;
box-sizing:border-box;
}

.whats_area .whats .position .strong_lineb {
border-bottom:#e50012 3px solid;
box-sizing:border-box;
}

.whats_area .whats .position .strong_linel {
border-left:#e50012 3px solid;
box-sizing:border-box;
}

.whats_area .whats .position .target {
background:#faf0e6;
}

.whats_area .whats .position .ex {
padding-bottom:3vw;
}

.whats_area .whats .position .attention {
background:#e50012;
padding:3vw;
color:#fff;
text-align:center;
font-weight:bold;
}


/*operation*/
.operation_area {
background:url(../img/operation_bg.png);
padding:7vw 0 5vw;
}

.operation_area .operation {
width:92%;
margin:auto;
}

.operation_area .operation .title {
font-size:5vw;
font-weight:bold;
padding-bottom:3vw;
text-align:center;
}

.operation_area .operation .ex {
font-size:4vw;
padding-bottom:4vw;
}

.operation_area .operation .cts {
background:#fff;
padding:5vw 5vw;
border-radius:6px;
box-shadow:0 0 10px #ddd;
margin-bottom:4vw;
}

.operation_area .operation .cts .subtitle {
font-size:4vw%;
font-weight:bold;
color:#e50012;
padding-bottom:3px;
}

.operation_area .operation .cts .subcts {
font-size:4vw;
}

.operation_area .operation .notation {
}

.operation_area .operation .notation .flex {
display:flex;
}

.operation_area .operation .notation .notation_title {
width:25%;
font-size:4vw;
}

.operation_area .operation .notation .notation_detail {
width:75%;
font-size:4vw;
}


/*cta*/
.cta_area {
background:url(../img/cta_line_bg.png);
padding:10px 0;
}

.cta {
background:url(../img/cta_bg.png);
padding:6vw 0;
}

.cta_area .cta .cta_cts {
width:92%;
margin:auto;
text-align:center;
}

.cta_area .cta .cta_cts .title {
font-size:6vw;
font-weight:bold;
line-height:150%;
}

.cta_area .cta .cta_cts .title_area {
padding-bottom:3vw;
}

.cta_area .cta .cta_cts .formstyle {
width:100%;
padding:4vw 4vw;
font-size:4vw;
border-radius:10px;
outline:none;
appearance:none;
-webkit-appearance:none;
-ms-appearancen:none;
-mos-appearance:none;
border:#d2d2d2 1px solid;
margin-bottom:5vw;
}

.cta_area .cta .cta_cts input[type="text"]:focus {
border:#e50012 1px solid;
}

::placeholder {
color:#969696;
}

:-moz-placeholder {
color:#969696;
}

::-moz-placeholder {
color:#969696;
}

:-ms-placeholder {
color:#969696;
}

input[type="submit"] {
font-family:FontAwesome;
}

.cta_area .cta .cta_cts form .cta_btn {
background:#e50012;
}

.cta_area .cta .cta_cts form .btnstyle {
font-size:6vw;
padding:3vw 5vw;
border-radius:10px;
background:#e50012;
color:#fff;
border:none;
font-weight:bold;
-webkit-appearance:none;
-ms-appearancen:none;
-mos-appearance:none;
margin-bottom:5vw;
}

.cta_area .cta .cta_cts input[type="submit"]:hover {
opacity:0.8;
}

.cta_area .cta .cta_cts .attention {
font-size:3.5vw;
font-weight:bold;
}

.cta_area .cta .cta_cts .attention .decoration {
border-bottom:#e50012 2px solid;
}


/*footer*/
footer {
width:90%;
margin:auto;
padding:3vw 0;
text-align:center;
}

footer .links {
font-size:2.5vw;
padding-bottom:2vw;
}

footer .copyright {
font-size:2.5vw;
color:#d2d2d2;
}



}