@charset "UTF-8";

/*
Theme Name: Wavy		
Author: Aimi Kinjo
Version: 1.0
*/

html #wpadminbar {display: none;}
/*--------------------------------------------------------------------------------
 *
 *
 *
 *
 * 基本設定
 *
 *
 *
 *
--------------------------------------------------------------------------------*/
html,body { width:100%; color:#333333; font-family: noto-sans-cjk-jp, sans-serif; }
table, caption, tbody, tfoot, thead, tr, th, td {vertical-align: middle;}
/* ------------------------------小見出し属性------------------------------　*/
h1 , h2 ,h3 ,h4 ,h5 { margin:0; padding:0; line-height:1.7; margin:0; font-weight:bold; }
h1 { font-size:30px; }
h2 { font-size:26px; text-align:center; }
h3 { font-size:22px; }
h4 { font-size:18px; }
h5 { font-size:16px; }

@media screen and (max-width:768px){
	h1 { font-size:24px;}
	h2 { font-size:19px; }
	h3 { font-size:18px; }
	h4 { font-size:5vw; }
	h5 { font-size:16px; }
}
p { font-size:14px; margin:0; padding:0; line-height:2; display:block; color:#333; font-family: noto-sans-cjk-jp, sans-serif; font-style: normal; font-weight: 400;
	font-feature-settings: "palt"; text-align: justify; text-justify: inter-ideograph; letter-spacing: 1px;}

ul { margin:0; padding:0; }
li { margin:0; padding:0; font-size:14px; }
i { padding-right:6px; }
img { max-width:100%; height:auto; display:block; }

@media screen and (max-width:767px){
	p { /* font-size:12px; */ font-size: 3.6vw;}
	li { /* font-size:12px; */ font-size: 3.6vw;}
}

.pc { display:block!important; }
.sp { display:none!important; }
@media screen and (max-width:767px){
	.pc { display:none!important; }
	.sp { display:block!important; }
}


/* ------------------------------共通------------------------------　*/
section { width:100%; }
section .inner { max-width:1000px; margin:0 auto; padding:80px 0; }

@media screen and (max-width:768px) {
	section .inner { width:90%; padding:60px 0; }
}

/* ------------------------------mv------------------------------　*/
#index {width:100%; height:550px;  background: url(../img/kv@2x.png) no-repeat center center; background-size:cover ; margin-top: 55px;}
#index > .inner {width:1000px; margin: auto; padding: 0;}
#index .catch-wrapper {height: 550px; width: 60%; margin-left: 41%;
	display:-webkit-box; display:-ms-flexbox; display: flex; 
	-webkit-box-align: center; -ms-flex-align: center; align-items: center; 
	-webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; }
#index .teasercap p {font-size: 17px; text-align: center; margin-bottom: .4em;}
#index .teasercap span {color: #3075ba; background: none; margin-right: .5em;}
#index .teaserttl p {text-align: center; font-size: 35px; font-family: noto-sans-cjk-jp, sans-serif; font-style: normal; font-weight: 400; line-height: 1.2;}
#index .teaserlpgo {border-bottom: 1px solid #3075ba; padding: .7em 0; margin: 0 0 1em 0;}
#index .teasertxt p {font-family: noto-sans-cjk-jp, sans-serif; font-style: normal; font-weight: 500; text-align: center; font-size: 18px; letter-spacing: 1px; line-height: 1.6;}
#index .teasertxt span {color: #3075ba; display: block; background: none;}
/* #index .catch-wrapper img {margin-left: auto;} */

@media screen and (max-width:768px){
	#index > .inner {width: 92%; margin: auto;}
}

@media screen and (max-width:767px){
	#index {width:100%; height:80vh;  background: url(../img/kv@3x.png) no-repeat center center; background-size:cover ; margin-top: 20px; padding-top: 9vh;}
	#index .catch-wrapper {width: 100%; height: 80vh; margin: 0;
		-webkit-box-pack: start; -ms-flex-pack: start; align-items: flex-start;}
	#index .teasercap p {font-size: 3vw; margin-bottom: .5em;}
	#index .teasercap span { margin-right: .5em;}
	#index .teaserttl p {font-size: 6vw; }
	#index .teaserlpgo { padding: .7em 0; margin: 0 0 1em 0;}
	#index .teasertxt p { font-size: 3.5vw; }
}

@media screen and (max-width: 320px){
	#index { height: 100vh; /* padding-top: 4vh; */}
	#index .catch-wrapper {height: 100vh;}
}


/*タイトル*/
.title {margin-bottom: 60px;}
.title h2 {font-weight: bold;  margin-bottom: 10px; text-align: center ; font-size: 37px; padding-bottom: 0px; color: #3075ba; letter-spacing: 3px; font-family: noto-sans-cjk-jp, sans-serif;
	font-style: normal;font-weight: 900; line-height: 1.5;}
.title h2 span {display: block; font-size: 17px; font-weight: bold; padding-bottom: .5%;}
.title p {text-align: center !important;}
p span {background: linear-gradient(transparent 55%, #c0e0fa 50%); font-weight: bold; padding-bottom: 0.6%;}

@media screen and (max-width:767px){
	.title {margin-bottom: 10%;}
	.title h2 {font-size: 7vw;}
	.title h2 span {font-size: .5em;}
}

/*ボタン*/
.btn {color: #3075ba; font-size: 16px; font-family: noto-sans-cjk-jp, sans-serif; font-style: normal; font-weight: 700; border: 1px solid #3075ba; height: 38px; width: 270px; border-radius: 50px; 
	background: #fff; box-shadow: 0 2px 12px rgba(0,0,0,0.1);
	display:-webkit-box; display:-ms-flexbox; display: flex;
	-webkit-box-align: center; -ms-flex-align: center; align-items: center;
	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}

@media screen and (max-width:767px){
	.btn {margin: auto;}
}

/*追従ボタン*/
.position_btn.fixed{
	top: 40px;
}
.position_btn ul li.fix_contact_mitumori a{
	font-size: 1em;
}
.position_btn ul li.fix_contact a{
	font-size: 1em;
}
/* ------------------------------what------------------------------　*/
#what ul {display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
  -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start;
  -ms-flex-wrap: wrap; flex-wrap: wrap;}
#what ul li {width: calc(50%); position: relative;
	display: -webkit-box; display: -ms-flexbox; display: flex;
  -webkit-box-align: center; -ms-flex-align: center; align-items: center;}
#what ul li img { width: 100%; box-shadow: 0 2px 13px rgba(0,0,0,0.2);}
#what ul li .text-box { padding-left: 50px;}
#what ul:nth-child(even) {border-bottom: 1px solid #d9e2e8; margin-bottom: 60px;
  -webkit-box-orient: horizontal; -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse; flex-direction: row-reverse;}
#what ul:nth-child(even) li .text-box { padding-left: 0px; padding-right: 50px; padding-bottom: 30px;}

@media screen and (max-width:767px){
	#what ul {display: block;}
	#what ul li {width: 100%;}
	#what ul li img {margin-bottom: 30px;}
	#what ul li .text-box {padding-left: 0px;}
	#what ul:nth-child(even) li .text-box {padding-left: 0; padding-right: 0;}	
}

/* ------------------------------point------------------------------　*/
#point {background: #3075ba;}
#point h2 {color: #fff;}
#point ul {background: #fff; padding: 30px;
	display: -webkit-box; display: -ms-flexbox; display: flex;
  -ms-flex-wrap: wrap; flex-wrap: wrap; }
#point ul li { width:calc(50%); padding: 30px; 
	display: -webkit-box; display: -ms-flexbox; display: flex; }
#point ul li .txt-wrapper {margin-left: 30px;}
#point ul li .txt-wrapper p {font-size: 17px; letter-spacing: 0px;}
#point ul li .txt-wrapper p span {background: none; color: #3075ba;}

@media screen and (max-width:768px){
	#point ul li {width: 100%; align-items: center; padding: 1em;}
	.pad {display: none;}
}

@media screen and (max-width:767px){
	#point ul {display: block; padding: 10% 5%; }
	#point ul li {width: 100%; display: block; padding: 0; margin-bottom: 15%;}
	#point ul li:last-child {margin-bottom: 0;}
	#point ul li .img-wrapper {margin-bottom: 5%;}
	#point ul li .img-wrapper img {margin: auto; width: 18vw;}
	#point ul li .txt-wrapper {margin-left: 0;}
	#point ul li .txt-wrapper p {font-size: 4vw; text-align: center;}
	.pad {display: block;}
	
}

/* ------------------------------case------------------------------　*/
#case .inner {padding: 80px 0 0 0;}
#case .case {width: 100%;}
#case .case-01 { background: url(../img/case01@2x.png) no-repeat top right; background-size: 45%; border-bottom: 1px solid #d9e2e8;}
#case .case-02 { background: url(../img/case02@2x.png) no-repeat center left; background-size: 45%; border-bottom: 1px solid #d9e2e8;}
#case .case-03 { background: url(../img/case03@2x.png) no-repeat bottom right; background-size: 45%; border-bottom: 1px solid #d9e2e8;}
#case .case-04 { background: url(../img/case04@2x.png) no-repeat left; background-size: 45%;}
#case .case > .inner {width:100%; max-width: 880px; padding: 60px 0;}
#case .case-left .txt-box {width: 535px; margin-right: auto;}
#case .case-right .txt-box {width: 535px; margin-left: auto;}
#case .txt-box h3 {background: #3075ba; color: #fff; font-size: 15px; font-family: futura-pt, sans-serif; font-style: normal; font-weight: 700; display: inline-block; padding: 2px 25px;}
#case .txt-box h3 span{font-size: 19px;}
#case .txt-box h4 {font-size: 19px; color: #3075ba; font-weight: bold; margin: 15px 0 10px 0; line-height: 2;}

@media screen and (max-width:768px){
	#case .case-01 {background-size: 50%;}
	#case .case-02 {background-size: 50%;}
	#case .case-03 {background-size: 50%;}
	#case .case-04 {background-size: 50%;}
	#case .case > .inner {width: 90%;}
	#case .case-left .txt-box {width: 60%;}
	#case .case-right .txt-box {width: 60%;}
}

@media screen and (max-width:767px){
	#case .case-01 {background: none; border-top: 1px solid #d9e2e8;}
	#case .case-02 {background: none;}
	#case .case-03 {background: none;}
	#case .case-04 {background: none;}
	#case .case > .inner  {width: 100%; padding: 10% 0 0 0;}
	#case .case-left .txt-box {width: 90%; margin: auto;}
	#case .case-right .txt-box {width: 90%; margin: auto;}
	#case .txt-box h3 {font-size: 3vw; margin: 0; padding: 0 3vh;}
	#case .txt-box h3 span{font-size: 5vw;}
	#case .txt-box h4 {font-size: 5vw; margin: 4vw 0;}
	#case .case img {height: 30vh; width: 100%; object-fit: cover; margin-top: 7%;}	
}

/* ------------------------------comparison------------------------------　*/
#comparison {background: #f1f1f1;}
#comparison .table-wrapper {background: #fff; padding: 60px; box-shadow: 0 2px 13px rgba(0,0,0,0.1); transition: .3s;}
.comparison-table {width: 100%; table-layout: fixed; max-width: 880px; margin: auto;}
.comparison-table h3 {font-size: 15px; padding: 5px 0; margin: 0; color: #fff; font-weight: bold; line-height: 1.5;}
.comparison-table tr{border-bottom: 1px solid #d9e2e8;}
.comparison-table thead th { width: 45px; border-bottom: 1px solid #d9e2e8; background-color: white;}
.comparison-table thead td {text-align: center; background: #7c7c7c; border: 1px solid #fff;}
.comparison-table thead td:nth-of-type(1) {width: 50%; background: #fff; border-bottom: 1px solid #d9e2e8;}
.comparison-table tbody th {display: table-cell; vertical-align: middle; text-align: center; min-height: 135px;}
.comparison-table tbody th .ttl-wrapper {display: inline-block; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl;}  
.comparison-table tbody th p {color: #fff; font-size: 15px; font-weight: bold; line-height: 1.2;}
.comparison-table tbody tr td:nth-of-type(1) {font-size: 15px; text-align: left; padding: 10px;}
.comparison-table tbody td {font-size: 30px; text-align: center; border: 1px solid #d9e2e8; padding: 10px 0;}
.comparison-table tbody td.round {color: #3075ba; background-color: white;}
.comparison-table tbody td.cross {color: #e53636; background-color: white;}
.comparison-table tbody td sup {color: #e53636; vertical-align: revert;}
.note span {color: #e53636; background: none !important;}
.note {margin: 10px 0 0 0;}

/*比較表タイトル背景*/
.ttl-blue {background: #4fa3e5;}
.ttl-bg {background: #32d3dd;}
.ttl-green {background: #3fcea1;}
.bg-blue {background: #c9e7ff;}
.bg-bg {background: #cdf6ff;}
.bg-green {background: #d9fff3;}

@media screen and (max-width:767px){
	#comparison .table-wrapper {padding: 1%;}
	.comparison-table h3 {font-size: 3vw; line-height: 1.2;}
	.comparison-table thead th {width: 30px;}
	.comparison-table thead td {width: 24%;}
	.comparison-table tbody th .ttl-wrapper {padding:  5em 0; }
	.comparison-table tbody th p {font-size: 3.5vw; display: block; letter-spacing: 0;}
	.comparison-table tbody tr td:nth-of-type(1) {font-size: 3vw; line-height: 1.6; padding: .8em;}
	.comparison-table tbody td {font-size: 7vw;}
	.note {margin: 5% 0 10% 0;}
}

/*table*/
div.scroll_div {overflow: scroll;}
.fixed_header_display_none_at_print {top:90px !important;}

@media screen and (max-width:767px){
	.fixed_header_display_none_at_print {top: 65px !important;}
}


/*possible*/
#possible ul {width: 880px; margin: auto; 
	display:-webkit-box; display:-ms-flexbox; display: flex;
	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;}
#possible ul li {width: calc(47%); }
#possible ul li img {width: 100%;}
#possible h3 {font-family: noto-sans-cjk-jp, sans-serif; font-style: normal; font-weight: 900; font-size: 17px; margin: 20px 0; color: #3075ba;}

@media screen and (max-width:768px){
	#possible ul {width: 100%;}
}

@media screen and (max-width:767px){
	#possible ul {width: 100%; display: block;}
	#possible ul li {width: calc(100%);  margin-bottom: 5%;}
}

/* ------------------------------help------------------------------　*/
#help {background: #3075ba;}
#help .title h2, #help .title p {color: #fff;}
#help .table-wrapper {background: #fff; padding: 60px;}
#help .table-ttl {font-size: 22px; color: #3075ba; font-family: noto-sans-cjk-jp, sans-serif; font-style: normal; font-weight: 900; text-align: center; margin: 50px 0 30px 0; line-height: 1.5;}
.help-table {width: 100%; table-layout: fixed; max-width: 880px; margin: auto; }
.help-table tr{border-bottom: 1px solid #d9e2e8;}
.help-table h3 {font-size: 20px; padding: 5% 0; margin: 0; color: #fff; font-weight: bold; padding: 0 !important;}
.help-table thead th { width: 45px; background-color: white;}
.help-table tbody th {font-weight: normal; background: #7c7c7c; display: table-cell; vertical-align: middle; text-align: center; min-height: 130px;}
.help-table tbody th .ttl-wrapper {display: inline-block; writing-mode: vertical-rl; -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl;}
.help-table th p {color: #fff; font-size: 15px; font-weight: bold; line-height: 1.6;}
.help-table td {text-align: center; padding: 1%; width: calc(835px/3); border-right: 1px solid #d9e2e8;}
.help-table tbody td {font-size: 15px; font-family: noto-sans-cjk-jp, sans-serif; font-style: normal; font-weight: 500; background-color: white; text-align: left; padding: 15px 10px; vertical-align: top;}


@media screen and (max-width:768px){
	.help-table td {width: 30%; padding: .7em 0;}	
}

@media screen and (max-width:767px){
	#help .table-wrapper {padding: 5%;}	
	.help-table  th {font-size: .8rem;}
	.help-table th p {font-size: 3.5vw;}
	.help-table h3 {font-size: 3.5vw; line-height: 1.2;}
	.help-table thead th {width: 30px;}
	.help-table tbody td {font-size: 3.6vw; line-height: 1.6;}
	
}

/* ------------------------------security------------------------------　*/
#security ul {border-bottom: 1px solid #d9e2e8;
	display:-webkit-box; display:-ms-flexbox; display: flex; 
	-webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; }
#security ul li {width: calc(48%);}
#security ul li img {width: 100%; box-shadow: 0 2px 13px rgba(0,0,0,0.2);}
#security .btn {margin: 30px 0;}

@media screen and (max-width:767px){
	#security ul {display: block;}
	#security ul li {width: 100%;}
	#security .btn {margin: 30px auto;}
	
}

/* ------------------------------devise------------------------------　*/
#devise img {margin: auto;}

/* ------------------------------interview------------------------------　*/
#interview {background: url(../img/interview@2x.png) no-repeat center center; background-size: cover; }
#interview .title {margin-bottom: 40px;}
#interview .title h2, #interview .title p {color: #fff;}
#interview ul { margin-bottom: 30px;
	display:-webkit-box; display:-ms-flexbox; display: flex;
	-webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;}
#interview .btn {min-width: 250px;width: 80%; margin: 0 10px;}
#interview .message {color: #fff; font-size: 22px; line-height: 1.7; text-align: center; font-family: noto-sans-cjk-jp, sans-serif; font-style: normal;font-weight: 700; }

@media screen and (max-width:768px){
	#interview .btn {min-width: 220px;}
}

@media screen and (max-width:767px){
	#interview ul {display: block;}
	#interview ul li {margin-bottom: 5%;}
	#interview .btn {margin: auto;}
	#interview .message {font-size: 5vw;}
}

/* ------------------------------footer------------------------------　*/
footer {margin: 0; padding: 0;}
footer p {color: #fff;}
footer #sitemap .base {position: initial; left: 0; max-width: 1100px; width: 100%; margin-left: auto;}
footer .companyin .base {max-width: 1100px; margin: 0 auto;margin-left: auto;}
.footer-flex {display: flex;}
.footer-flex > .row-group {margin-right: 30px;}
.footer-flex a {color: #fff;}
footer .copyright {text-align: center;}

@media screen and (max-width:768px){
	footer #sitemap {height: auto;}
	footer #sitemap  nav {width: 50%;}
	footer .companyin {padding: 1em;}
}

@media screen and (max-width: 767px){
	footer #sitemap nav {width: 100%;}
	.footer-flex {display: block;}
	footer .copyright {padding: 0.5em 0 0 0;}
}


#devise img{
	width: 50%;
}



/*- 追記 -*/
@media screen and (max-width:767px){
	#index {
		padding-top: 7vh;
	}
	#index .teaserttl p {
    font-size: 5vw;
}
#index .teasercap p {
    font-size: 2vw;
}
}


#index {
    position: relative;
}
.online_movie{
	position: absolute;
    bottom: -15%;
    right: 20px;
    -webkit-transform: translate(-0, -15%);
    -ms-transform: translate(-0, -15%);
    transform: translate(-0, -15%);
    width: 240px;
    -webkit-transition: all 1s;
    -moz-transition: all 1s;
    -ms-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    z-index: 100;
	transition: 0.3s;
}
.online_movie:hover{
	opacity: 0.2;
	transition: 0.3s;
}
.online_movie.fixed {
	 bottom: 80px;
	position: fixed;
}
@media screen and (max-width: 600px) {
	.page-id-6766 .bootstrap .banner-fixed .list-inline li:first-of-type {
		padding-left: 5px;
		width: 30%;
	}
	.page-id-6766 .bootstrap .list-inline > li {
		display: inline-block;
		padding-right: 5px;
		padding-left: 5px;
		width: 50%;
	}
	.online_movie{
		bottom: 10px;
		right: 0px;
		width: 100%;
	}
	.online_movie.fixed {
		bottom: 0;
		position: fixed;
	}
}