@charset "utf-8";
/* --------------------------------------------------------
	reset
-------------------------------------------------------- */

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquote,th,td {
	margin: 0;
	padding: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
	font-style: normal;
}

body {
	color: #333333;
	font-size: 100%;
	font-family: "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN",verdana,"メイリオ", Meiryo, sans-serif;
	line-height: 1.5;
/*	background: url(null) fixed;
*/	background-color: #fff;
/*    overflow-x: hidden;*/
width: 98%;
margin-left: 1%;
}

/* IE6 base font */

html {
	overflow-y: scroll;
}
.scroll {
    overflow: auto;
    white-space: nowrap;
}
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary { 
	display:block;
}
img {
	border: 0;
	vertical-align: bottom;
}
ul, ol {
	list-style: none;
}
table {
	border-spacing: 0;
	empty-cells: show;
}
a,a:link,a:visited,a:hover,a:active{
	color:#054691;
	text-decoration:none;
}

/* --------------------------------------------------------
	text
-------------------------------------------------------- */

.container {
	margin: 14px auto;
	text-align: center;
}

.container p {
	margin: 20px 10px;
}

.logo {
	width: 960px;
	margin: 0 auto ;
	padding: 0 10px;
    text-align: center;
}



header.mainBg {
	/*width: 90%;*/
	text-align: center;
	color: white;
	background-image: url("../img/top.png");
	background-repeat: no-repeat;
	background-attachment: scroll;
/*	background-position: center center;
*/	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
}

/*header.mainBg .introText {
	padding: 200px 0;
}*/
header.mainBg .introText {
    padding: 70% 0px 0px;
}

header.mainBg .introText .mainText {
	font-size: 45px;
	font-weight:bolder;
	margin-bottom: 10px;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}
header.mainBg .introText .mainText.fonts_big {
	font-size: 75px;
	font-weight: bolder;
}
header.mainBg .introText .mainText2 {
	font-size: 40px;
	font-weight: 900;
	margin-bottom: 30px;
}

header.mainBg .introText .mainText .letter {
	display: inline-block;
	line-height: 1em;
}

header.mainBg .introText .catchText img {
	width: 60%;
}

@media (max-width: 768px) {
	header.mainBg .introText {
		padding: 150px 0;
	}
	header.mainBg .introText .mainText {
		font-size: 22px;
		margin-bottom: 25px;
	}
    header.mainBg .introText .catchText {
		font-size: 20px;
		font-weight: 700;
	}
	.logo {
		width: 300px;
		padding: 0 20px;
	}
    .logo img {
width: 100%;
}
}

div.flowing{
    background-color: #0187c4;
    
}
/*.text{
  font-size:1.5em;
  color:#fff;
  animation: flowing 10s linear infinite;
  transform: translateX(100%);
}*/
.text {
    font-size: 1.5em;
    color: #fff;
    animation: flowing 110s linear infinite;
    transform: translateX(0%);
    width: max-content;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    padding: 2px;
}

@keyframes flowing {
  100% {
    transform: translateX(-100%);
  }
}

span.flow_style02 {
    color: #fcee21;
    font-size: 17px;
}
span.flow_style01 {
    color: #fcee21;
    font-size: 1.5em;
}
/**/
.card_col{
    background-color: #0187c4;
    background-color: white;
}
.uk-card-title.card_title{
    background-color: #fff;
}
.card{
  width: 100%;
  height: auto;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0,0,0,.2);
  background-color: #0187c4;
  color: #fff;
}

.card__imgframe{
  width: 100%;
  height: auto;
  padding-top: 86.25%;
  background-image: url("../img/step_1.png");
  box-sizing: border-box;
  background-size: cover;
}
.card__imgframe_2{
  width: 100%;
  height: auto;
  padding-top: 84.25%;
  background-image: url("../img/step_2.png");
  box-sizing: border-box;
  background-size: cover;
}
.card__imgframe_3{
  width: 100%;
  height: auto;
  padding-top: 140.25%;
  background-image: url("../img/step_3.png");
  box-sizing: border-box;
  background-size: cover;
}
.card__imgframe_4{
  width: 100%;
  height: auto;
  padding-top: 56.25%;
  background-image: url("../img/step_4.png");
  box-sizing: border-box;
  background-size: cover;
}
.card__imgframe_5{
  width: 100%;
  height: auto;
  padding-top: 56.25%;
  background-image: url("../img/step_5.png");
  box-sizing: border-box;
  background-size: cover;
}

.card__textbox{
  width: 100%;
  height: auto;
  padding: 20px 18px;
  box-sizing: border-box;
/*  display: flex;*/
}

.card__textbox > * + *{
  margin-top: 10px;
}

.card__titletext{
    font-size: 17px;
    font-weight: bold;
    line-height: 125%;
    background: #fff;
    color: #0186c4;
    padding: 5px;
    border-radius: 7px;
    height: fit-content;
/*    width: 35%;*/
    font-family: 'M PLUS Rounded 1c', sans-serif;
    margin-bottom: 1em;
}

.card__overviewtext{
  font-size: 15px;
  line-height: 150%;
/*  text-align: left;*/
 font-family: 'M PLUS Rounded 1c', sans-serif;
}
.card__textbox > * + * {
    margin-top: 0px;
    padding: 0 24px;
}
.arrow {
  position: relative;
}
.arrow::before {
  content: "";
  display: block;
  position: absolute;
  top: 0px;
  left: 50%;
  width: 0;
  height: 0;
  transform: translateX(-50%);
  border: 12px solid transparent;
  border-top: 12px solid #0187c4;
  border-bottom-width: 0;
}

.stepimg {
    width: 50%;
}

.qaContainer dt {
padding: 10px 10px 10px 35px;
border-radius: 5px;
background: #cce6ff;
text-indent: -25px;
}
.qaContainer dt:before {
content: "Q.";
font-weight: bold;
margin-right: 7px;
}
.qaContainer dd {
margin: 20px 10px 40px 35px;
text-indent: -25px;
}
.qaContainer dd:before {
content: "A.";
color: #1771c6;
font-weight: bold;
margin-right: 7px;
}
/*accordion*/
.acbox{
  width: 100%;
  font-size:0px; /* ラベルと開く部分を分離する時は数値を入れる */
  margin:0 10px; /* ボックス全体の位置調整 */
}

.acbox label{
  width: auto;
  font-size: 20px; /* ラベルの文字サイズ */
  font-weight: bold;
  text-align: center;
  background: #0386c4; /* ラベルの背景色 */
  position: relative;
  display: block;
  padding:8px;
  border-radius: 4px; /* ラベルの角の丸み */
  cursor: pointer;
  color: #fff;
  margin-bottom: 6px;
 letter-spacing: 0.1em;
}

.acbox label:hover{
  background: #0386c4; /* ラベルにマウスを乗せた時の背景色 */
}

.acbox input{
  display: none;
}

.acbox label:after{
  color: #fff;
  content:"▼"; /* ラベルのアイコン */
  position: absolute;
  top: 50%;
  right: 15px;
  margin-top: -14px;
}

.acbox input:checked ~ label::after {
  content:"▲"; /* ラベルをクリックした後のアイコン */
}

.acbox div{
  height: 0px;
  overflow: hidden;
  opacity: 0;
  transition: 0.15s; /* 開閉スピードの設定 */
}

.acbox input:checked ~ div{
  height: auto;
  padding: 18px; /* 開いた部分の枠内の余白 */
  border-radius: 0px;
/*  background: #F3F4F5; /* 開いた部分の背景色 */
 opacity: 1;
}

.acbox input:checked ~ label {
  background: #0386c4; /* クリック後のラベルの背景色 */
}

.acbox-under{
  font-size: 15px; /* 開いた部分の文字サイズ */
  color: #555555; /* 開いた部分の文字色 */}
.acc_w{
    text-align: -webkit-center;
}

.list_test-wrap {
    list-style:  none;  /* デフォルトのアイコンを消す */
    margin:  0;         /* デフォルト指定上書き */
    padding: 0;
    text-align: left;/* デフォルト指定上書き */
}
 
.list_test:before {
    content:  "";     /* 空の要素作成 */
    width: 20px;                /* 幅指定 */
    height: 20px;               /* 高さ指定 */
    display:  inline-block;     /* インラインブロックにする */
    background-color: #0074bf;  /* 背景色指定 */
    position:  relative;        /* 位置調整 */
    top: 3px;                   /* 位置指定 */
    border-radius:  50%;        /* 要素を丸くする */
    margin-right: 5px;          /* 余白指定 */
}
 
.list_test {
    padding:  10px;             /* 余白指定 */
    background-color:  #65ace4; /* 背景色指定 */
    border-radius:  10px;       /* 角丸指定 */
    margin-bottom: 5px;         /* 要素と要素の間指定 */
    color: #fff;                /* 文字色指定 */
    font-size:  0.9em;           /* 文字サイズ指定 */
}

@media screen and (max-width: 768px) {
.acbox {
    width: inherit;
    font-size: 0px;
    margin: 0px;
} 
.topcatch3 {
    font-size: 30px;
    letter-spacing: 0.2em;
    font-weight: bolder;
    color: #fff;
}
}
.map_okinawa{
    text-align: center;
    background: url("../img/dot03.png");
}
.map_okinawa img {
        width: 70%;
        height: auto;
    }

#wrapper{
width:100%;
overflow-x: hidden !important;
}

/*ribon*/
.cp_card {
	width: 70%;
	height:auto;
	position: relative;
	background:#fff;
	overflow: visible;
	margin: 2em auto;
	padding: 0.5em;
	box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
    border-radius: 0.5em;
}
.cp_ribbon02 {
	width: 106px;
	height: 108px;
	overflow: hidden;
	position: absolute;
	top: -6px;
	left: -6px;
}
.cp_ribbon02 .cp_ribbon {
	font-size: 1em;
	line-height: 1.2em;
	position: relative;
	top: 26px;
	left: -33px;
	width: 150px;
	padding: 7px 0;
	-webkit-transform: rotate(-45deg);
	        transform: rotate(-45deg);
	text-align: center;
	letter-spacing: 0.5px;
	color: #fcee21;
	background-color: #0186c4;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-family:"ＭＳ Ｐ明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
    font-weight: bold;
}
.cp_ribbon02 .cp_ribbon::before,.cp_ribbon02 .cp_ribbon::after {
	position: absolute;
	bottom: -4px;
	content: '';
	border-width: 4px 4px 0 4px;
	border-style: solid;
	border-color: #047096 transparent transparent transparent;
}
.cp_ribbon02 .cp_ribbon:before {
	left: 0;
}
.cp_ribbon02 .cp_ribbon:after {
	right: 0;
}
/**/
.fadein {
	opacity : 0.1;
	transform : translate(0, 50px);
	transition : all 500ms;
	}

/* 画面内に入った状態 */
.fadein.scrollin {
	opacity : 1;
	transform : translate(0, 0);
	}

ul.delay-show {
    padding: 70px 0 40px 80px ;
    font-family: 'Kosugi Maru', sans-serif;
    font-size: larger;
    letter-spacing: 0.1em;
    text-align: left;
}
.delay-show li{
    margin-bottom: 5px;
}

/*マーカーアニメーション*/
 
.marker-animation.active{
    background-position: -100% .5em;
}
 
.marker-animation {
    background-image: -webkit-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: -moz-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: -ms-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: -o-linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-image: linear-gradient(left, transparent 50%, rgb(255,250,153) 50%);
    background-repeat: repeat-x;
    background-size: 200% .8em;
    background-position: 0 .5em;
    transition: all 2s ease;
    font-weight: bold;
}

/*基本の吹き出し*/
.balloon{
  position: relative;
  background: #fde7d1;
  padding: 2em;
    box-shadow: 0 2px 2px 0 #ccc;
}
.balloon:after{
  content: "";
  position: absolute;
  right: 0;
  bottom: -20px;
  left: 0;
  width: 0px;
  height: 0px;
  margin: auto;
  border-style: solid;
  border-color: #fde7d1 transparent transparent transparent;
  border-width: 20px 20px 0 20px;
}
section{
    padding: 30px;
}
section.check{
    	background: url("../img/dot02.png");
}
section.whywork{
    	background: url("../img/dot01.png");
}
h3.padtitle img{
    width: 50%;
}
h3.padtitle{
        text-align: center;
}
section.mapimg{
    	background: url("../img/dot01.png");
}
section.qa{
    	background: url("../img/dot02.png");
}

@media screen and (max-width: 480px){
    section {
    padding: 10px 0px 10px 0;
}
    .cp_card {
    width: 90%;
}
    ul.delay-show {
    padding: 13px 0 8px 7px;
    /* text-align: center; */
    font-size: 14px;
}
    h3.padtitle img {
    width: 100%;
}
    header.mainBg .introText .mainText {
    font-size: 39px;
    margin-bottom: -4px;
}
    header.mainBg .introText .mainText.fonts_big {
    font-size: 46px;
    font-weight: bolder;
}
    header.mainBg .introText .catchText img {
    width: 100%;
}
    header.mainBg .introText {
        padding:98% 1px 10% 1px;

}
.stepimg {
    width: 93%;
}  
.acbox input:checked ~ div {
    height: auto;
    padding: 0px;
    border-radius: 0px;
    opacity: 1;
}  
.map_okinawa img {
    width: 100%;
    height: auto;
}
.cp_ribbon02 {
    display: none;
} 
   
}

/*merit*/
#hero,
#slide-container,
#slide-container .item,
#slide-container .item a,
#slide-container .background{ width:100%; height: 207px; }
#hero{ overflow:hidden; }
/*#slide-container{ position:relative; background-color:#eee; }*/
#slide-container{ position:relative;}
#slide-container .item{ position:absolute; top:0; left:0; display:none; overflow:hidden; -webkit-border-radius:4px; -moz-border-radius:4px; border-radius:4px; }
#slide-container .item a{ display:block; width:100%; height:300px; }
#slide-container .item a:hover{ text-decoration:none; }
#slide-container .background { position:absolute; background-position:center center; background-repeat:no-repeat; overflow:hidden; }
#slide-container .foreground {
    position: absolute;
    padding: 35px 65px;
}
/*#slide-container .foreground{ position:absolute; padding:50px 100px; }
*/#slide-container .foreground .element { position: relative; 
font-family: 'M PLUS Rounded 1c', sans-serif;}
#slide-container .title{ margin-bottom:10px; font-size:50px; font-weight:bold; color:#0080c7;; 
font-family: 'M PLUS Rounded 1c', sans-serif;
}
#slide-container .subtitle{ font-size:20px; color:#0080c7; }
#slide-container .first .background{ background-image:url("../img/demo_destaque_0001.jpg"); }
#slide-container .second .background{ background-image:url(../img/demo_destaque_0002.jpg); }
#slide-container .third .background{ background-image:url(../img/demo_destaque_0003.jpg); }
#slide-container .fourth .background{ background-image:url(../img/demo_destaque_0004.jpg); }
#slide-container .controller .pager{ position:absolute; top:230px; z-index:9999; }
#slide-container .controller .prev{ left:20px; }
#slide-container .controller .next{ right:20px; }
.pagination{ position:relative; left:50%; float:left; margin-top:40px; }
.pagination li { float:left; position: relative; right:50%; margin:0 1px; list-style:none; }
.pagination li .bullet {
   display:block;
    width:12px; 
    height:0 !important;
    padding-top:12px; 
/*    background-image:url(../img/slides.jquery/pagination.png); */
    background-position:0 0;
    float:left; overflow:hidden;
}
.pagination li .active { background-position:0 -12px; }

section#hero {
    margin-top: -4em;
    text-align: center;
}

@media screen and (max-width: 480px){
    #slide-container .title {
    margin-bottom: 10px;
    font-size: 25px;
} 
    #slide-container .foreground {
    position: absolute;
    padding: 39px 10px;
}
    #slide-container .subtitle {
    font-size: 14px;
    color: #0080c7;
}
h3.padtitle {
    text-align: center;
    margin-bottom: -1em;
}
}
/*アコーディオン*/
/*全体*/
.hidden_box {
    margin: 2em 0;/*前後の余白*/
    padding: 0;
}

/*ボタン装飾*/
/*.hidden_box label {
    padding: 15px;
    font-weight: bold;
    border: solid 2px black;
    cursor :pointer;
}*/

/*ボタンホバー時*/
/*.hidden_box label:hover {
    background: #efefef;
}*/

/*チェックは見えなくする*/
.hidden_box input {
    display: none;
}

/*中身を非表示にしておく*/
.hidden_box .hidden_show {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.hidden_box input:checked ~ .hidden_show {
    padding: 10px 0;
    height: auto;
    opacity: 1;
}

span.ritou {
    position: absolute;
    left: 8%;
    top: 28%;
	width: 26%;
}
span.hokubu {
    position: absolute;
    left: 52%;
    top: 34%;
	width: 30%;
}
span.uruma {
    position: absolute;
    left: 5%;
    top:54%;
	width: 50%;
}
span.okinawashi {
    position: absolute;
    left: 17%;
    top:63%;
	width: 60%;
}
span.urasoe {
    position: absolute;
    left: 29%;
    top:72%;
	width: 50%;
}
span.naha {
    position: absolute;
    left: 0%;
    top: 79%;
	width: 25%;
}
span.haebaru {
    position: absolute;
    left: 32%;
    top: 85%;
	width: 65%;
}
span.tomigusuku {
    position: absolute;
    left: 1%;
    top: 92%;
	width: 45%;
}



.content {
display: none;
}
.title_eria {
    width: auto;
    font-size: 1em;
    font-weight: bold;
    text-align: center;
    background: #0386c4;
    position: relative;
    display: block;
    padding: 8px;
    border-radius: 4px;
    cursor: pointer;
    color: #fff;
    margin-bottom: 6px;
    letter-spacing: 0.1em;
}
.title_eria:after {
    color: #fff;
    content: "▼";
    position: absolute;
    top: 50%;
    right: 15px;
    margin-top: -14px;
}
.list_test-wrap{
    animation-name: fade-in1;
    animation-duration: 0.5s; 
    animation-timing-function: out; 
    animation-delay: 0; 
    animation-iteration-count: 1;
    animation-direction: normal; 
    animation-fill-mode: forwards; 
  }
  @keyframes fade-in1 {
    0% {
      opacity: 0;
      transform: translate3d(0, -20px, 0);
    }
    100% {
      opacity: 1;
      transform: translate3d(0, 0, 0);
    }
  }

.map_okinawa {
    text-align: center;
    background: url(../img/dot03.png);
    width: 70%;
    margin: 0 auto;
}

@media screen and (max-width: 480px){
.map_okinawa {
    width: 100%;
}
.padtitle.eriatap {
    text-align: center;
    margin-bottom: 0;
}
.card__textbox {
    width: 100%;
    height: auto;
    padding: 19px 14px;
    box-sizing: border-box;
    }
  .padtitle.qa_ttitle img{
    width: 100%;
    margin-bottom: 0em;
    margin-top: -1em;
} 
  .padtitle.qa_ttitle2 img{
    width: 100%;
    margin-bottom: -1em;
    margin-top: -1em;
} 
header.mainBg {
	text-align: center;
	color: #0388c5;
	background-image: url("../img/top_img_sp.png");
	background-repeat: no-repeat;
	background-attachment: scroll;
	/*background-position: center center;*/
/*	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;*/
	background-size: contain;
}
}
.qaContainer {
    text-align: left;
    line-height: 1.7;
}

.qaContainer dt{
    font-family: 'Kosugi Maru', sans-serif;
    font-size: 17px;
    font-weight: bold;
    letter-spacing: 0.1em;
}
.qaContainer dd{
    font-family: 'Kosugi Maru', sans-serif;
    font-size: 15px;
    letter-spacing: 0.1em;
}
.padtitle.qa_ttitle img{
    width: 100%;
}

/*foot*/
.wrapper {
  min-height: calc(100vh - 100px);
}
footer {
  height: 100px;
}

p.footlogo{
    text-align: center;
    padding: 1em;
}

.List-Item {
  display: inline;
  font-size: 14px;
}
.List-Item::after {
  content: '/';
  padding: 6px;
}
.List-Item:last-child::after {
  content: '';
}
.List-Item-Link {
  display: inline-block;
  text-decoration: none;
  color: inherit;
}
p.footcopy{
    text-align: center;
    font-size: 12px;
    padding: 1em;
}




button{
  background:#e3002b;
  color:#fff;
  border:none;
  position:relative;
  height:60px;
  font-size:1.1em;
  padding:0 2em;
  cursor:pointer;
  transition:800ms ease all;
  outline:none;
  width: 95%;
}
button:hover{
  background:#fff;
  color:#e3002b;
}
button:before,button:after{
  content:'';
  position:absolute;
  top:0;
  right:0;
  height:2px;
  width:0;
  background: #e3002b;
  transition:400ms ease all;
}
button:after{
  right:inherit;
  top:inherit;
  left:0;
  bottom:0;
}
button:hover:before,button:hover:after{
  width:100%;
  transition:800ms ease all;
}