/**************************************************************/
/**********************      共通      ************************/
/**************************************************************/

:root {
  --orange: #F29600;
  --yellow: #f3fc17;
  --blue: #2ca6e0;
  --deepblue: #207aa5;
}

html,body{
	overflow-x:hidden; /* モバイル端末で右にはみ出すことがあるので消す */
	overflow-y:auto; /* 上記の指定をするとブラウザ左のスクロールバーが二つ表示されることがあるのでその対応 */
	padding:0 !important;
}

/* IEだと縦スクロールバーが2つ出るのを回避 */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { 
	html,body{
		overflow-x:visible;
		overflow-y:visible; 
	}
}

#wrapper{
	position:relative;
	padding:0;
	margin:0;
	width: 100%;
}

.pc {
	display: none !important;
}

.sp {
	display: block !important;
}

/**************************************************************/
/**********************     スマホ     ************************/
/**************************************************************/


/* +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
   header
++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#header{
	position: fixed;
	top:0;
	left:0;
	height: 80px;
	width: 100%;
	background-color: rgba(255,255,255,0.9);
	z-index:10;
	
	box-shadow: 0px 10px 10px -5px rgba(0,0,0,0.25);
}

#header #header_logo{
	position: absolute;
	left:5px;
	top:15px;
	max-width:240px;
	text-align:center;
	font-size:12px;
}

#header #header_logo img{
	width:185px;
}

#header  .contact{
	position:absolute;
	right:130px;
	top:22px;
	font-size:12px;
	background-color:#F3FC17;
	padding:10px 5px;
}

#header  .tel_sp{
	position:absolute;
	right:80px;
	top:22px;
}


.button-toggle {
	width: 46px;
	height: 46px;
	text-align: center;

	position: absolute;
	top: 17px;
	right: 20px;
	z-index:11;
}

.overlay {
  content: "";
  display: block;
  width: 0;
  height: 0;
  background-color: rgba(0, 0, 0, 0.75);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;
  opacity: 0;
  transition: opacity .5s;
}

.overlay.open {
  width: 100vw;
  height: 100vh;
  opacity: 1;
}

.menu-trigger {
  display: inline-block;
  width: 46px;
  height: 46px !important;
  vertical-align: middle;
  cursor: pointer;
  margin: auto;
  z-index: 9999;
  transition: transform .5s;
  color: #fff;
  text-align:center;
}

.menu-trigger span {
  display: inline-block;
  box-sizing: border-box;
  position: absolute;
  width: 36px;
  height: 4px;
  left: 5px;
  background-color: var(--blue);
}
.menu-trigger span:nth-of-type(1) {
  top: 9px;
}
.menu-trigger span:nth-of-type(2) {
	top: 20px;
}
.menu-trigger span:nth-of-type(3) {
	top: 31px;
}

.menu-trigger div{
  position: absolute;
  top: 28px;
  left: 0;
  right: 0;
  font-size:14px;
  text-align:center;
}

#drawer-menu {
  width: 270px;
  height: 100%;
  background-color: #2E9CD0;
  position: fixed;
  top: 0;
  right: 0;
  z-index: 99999;
  -webkit-transform: translate(300px);
  -ms-transform: translate(300px);
  transform: translate(300px);
  transition: all .5s;
  overflow-y:auto;
  box-sizing: border-box;

  width: 100%;
  -webkit-transform: translate(100%);
  -ms-transform: translate(100%);
  transform: translate(100%);
}

#drawer-menu.open {
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
}


#drawer-menu .logo_area {
	position:relative;
	background:#fff;
	height:80px;
}

#drawer-menu .logo_area > *{
	display:inline-block;
}

#drawer-menu .logo_area #header_logo_sp{
	position:absolute;
	left:5px;
	top:15px;
	max-width:240px;
	text-align:center;
	font-size:12px;
}

#drawer-menu .logo_area #header_logo_sp img{
	width:185px;
}

#drawer-menu .logo_area .contact{
	position:absolute;
	left:250px;
	top:22px;
	font-size:12px;
	background-color:#F3FC17;
	padding:10px 5px;
}

#drawer-menu .logo_area .tel{
	position:absolute;
	right:80px;
	top:22px;
}

#drawer-close-btn{
  height: 50px;
  margin:0 auto 30px auto;
}

.menu-close {
  display: inline-block;
  width: 50px;
  height: 50px;
  vertical-align: middle;
  cursor: pointer;
  position: absolute;
  top: 15px;
  right: 20px;
  z-index: 1;
  -webkit-transform: translateX(0);
  -ms-transform: translateX(0);
  transform: translateX(0);
  transition: transform .5s;
}
.menu-close span {
  display: inline-block;
  box-sizing: border-box;
  position: absolute;
  left: 0;
  width: 100%;
  height: 7px;
  background-color: #2E9CD0;
}
.menu-close span:nth-of-type(1) {
  top: 10px;
  -webkit-transform: translateY(12px) rotate(-45deg);
  -ms-transform: translateY(12px) rotate(-45deg);
  transform: translateY(12px) rotate(-45deg);
}
.menu-close span:nth-of-type(2) {
  bottom: 9px;
  -webkit-transform: translateY(-12px) rotate(45deg);
  -ms-transform: translateY(-12px) rotate(45deg);
  transform: translateY(-12px) rotate(45deg);
}

#drawer-menu ul {
	width:80%;
	margin:40px auto;
}

#drawer-menu li {
  padding:10px 0;
}

#drawer-menu li a{
	position:relative;
	font-weight:bold;
	color:#fff;
	font-size:20px;
	padding-left:2em;
}

#drawer-menu li a:before{
  content: "";
  position: absolute;
  top: .1em;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: #F3FC17;
  border-radius: 50%;
}

#drawer-menu #contact_area .msg{
	color: #FFF;
	display:block;
	padding:10px 100px 10px 10px;
	background:url(../images/common/mail_drawer.png) ;
	background-color: #F29600;
	background-repeat:no-repeat;
	background-position:right;
	margin-bottom:5px;
}



/* +++++++++++++++++++++++++++++++++++++++++++++++++++++
   フッター
++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */
#footer{
	width: 100%;
	text-align:center;
	background:#666;

	position: relative;
}

#footer .inner{
	width: 1920px;
	height: 939px;
	left: 50%;
	margin-left: -960px;

	position: relative;
}


#footer  #logo_area{
	position:absolute;
	left:20px;
	top:40%;
	color:#fff;
	font-size:19px;
	max-width:416px;
}

#footer  #logo_area h1{
	margin-bottom:60px;
}

#footer  #logo_area h1 img{
	width:100%;
	max-width:416px;
	margin-top:10px;
}

#footer  #logo_area h1 img:before{
	content: "\A" ;
	white-space: pre ;
}


#footer  #logo_area p{
	margin-bottom:40px;
	font-weight:bold;
}

#footer  #logo_area p span{
	font-size:24px;
	font-weight:bold;
}

#footer  #logo_area p span::before {
	content: "\A" ;
	white-space: pre ;
}

#footer  #contact_area{
	position:absolute;
	right:100px;
	top:25%;
	max-width:700px;
	text-align:left;
}

#footer  #contact_area a.msg{
	display:block;
	color:#FFF;
	font-size:22px;
	padding:15px 150px 15px 20px;
	background:url(../images/footer/mail.png) ;
	background-color:#27A8E0;
	background-repeat:no-repeat;
	background-position:right;
	margin-bottom:5px;

	position:relative;
	overflow: hidden;
	z-index: 1;
}

#footer  #contact_area a.msg::before {
  content: "";
  width: 180%;
  position: absolute;
  top: 0;
  right: -200px;
  border-right: 150px solid transparent;
  border-bottom: 150px solid #CBF7F1;
  transform: translateX(-100%);
  transition: transform ease .3s;

  z-index: -1;
}


#footer  #contact_area a.msg:hover{
	transition: .3s;
	color:var(--blue);
}

#footer  #contact_area a.msg:hover::before {
  transform: translateX(0);
}


#footer  #contact_area .info_box{
	background-color:#FFF;
	width:100%;
}

#footer  #contact_area .info_box .business_hours{
	font-size:20px;
}

#footer  #contact_area .info_box .tel{
	text-align: left;
}
#footer  #contact_area .info_box .tel a{
	font-size:36px;
}

#footer #copyright{
	position:absolute;
	bottom:0;
	right:0;
	display:inline-block;
	background:#000000;
	color:#27A8E0;
	text-align: center;
	font-size:18px;
	line-height:24px;
	padding:7px 40px;
}

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

	#footer .inner{
		width: 100%;
		height: auto;
		position: relative;
		left: 0;
		margin-left: 0;
	}

	#footer  #logo_area h1{
		margin-bottom:0;
	}

	#footer  #logo_area p{
		margin-bottom:10px;
	}
}

/* ページトップへ戻る */
.pageTop {
	/*display:none;*/ /* jqueryで指定 */
	position:relative;
	width: 100%;
	max-width:100%;
	height:0;
	margin:0 auto;
}

.pageTop a {
	position: fixed;
	bottom: 0px;
	right:0;
	display: block;
	width: 80px;
	hegiht:60px;
	padding:1.5em 0 1.5em 2px;
	background-color:#000;
	text-align:center;
	outline:none;
	text-decoration: none;
	z-index:9999;
	border-radius:10px 10px 0 0;
	font-weight:bold;
	color:#fff;
}

.pageTop a:hover {
	cursor:pointer;
}

/* 矢印作成 */
.pageTop a:before,
.pageTop a:after {
	position:absolute;
	left:50%;
	content:"";
	width:0px;
	height:0px;
	margin-left:-15px;
	border:15px solid transparent;
}
.pageTop a:before {
	top:50%;
	margin-top:-18px;
	border-bottom:15px solid #000;
}
.pageTop a:after {
	top:50%;
	margin-top:-23px;
	z-index:-1;
	border-bottom:15px solid #fff; 
}

.pageTop a:hover:after {
	border-bottom:15px solid #999;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++
   共通部品　共通パーツ
++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

.container720{
	width:95%;
	margin:0 auto;
}

.container900{
	width:95%;
	margin:0 auto;
}

.container1100{
	width:95%;
	margin:0 auto;
}

.container1150{
	width:95%;
	margin:0 auto;
}

.container1160{
	width:95%;
	margin:0 auto;
}

.container1180{
	width:95%;
	margin:0 auto;
}

.container1200{
	width:95%;
	margin:0 auto;
}

.container1250{
	width:95%;
	margin:0 auto;
}

.container1350{
	width:95%;
	margin:0 auto;
}

.container1550{
	width:95%;
	margin:0 auto;
}

.eventFadeIn {
    opacity: 0;
    -webkit-transition: all 1.5s;
    -o-transition: all 1.5s;
    transition: all 1.5s;
}


.eventFadeIn.in-top {
    -webkit-transform: translate(0,-20px);
    -ms-transform: translate(0,-20px);
    transform: translate(0,-20px);
}

.eventFadeIn.in-bottom {
    -webkit-transform: translate(0,20px);
    -ms-transform: translate(0,20px);
    transform: translate(0,20px);
}

.eventFadeIn.in-left {
    -webkit-transform: translate(-20px, 0);
    -ms-transform: translate(-20px, 0);
    transform: translate(-20px, 0);
}

.eventFadeIn.in-right {
    -webkit-transform: translate(20px, 0);
    -ms-transform: translate(20px, 0);
    transform: translate(20px, 0);
}

.eventFadeIn.active {
    opacity: 1;
    -webkit-transition: all 1s;
    -o-transition: all 1s;
    transition: all 1s;
    -webkit-transform: translate(0, 0) !important;
    -ms-transform: translate(0, 0) !important;
    transform: translate(0, 0) !important;
}

.fadein-turn .child {
	opacity : 0;
	transition : all 1.5s;
	-webkit-transform: translate(0,30px);
	-ms-transform: translate(0,30px);
	transform: translate(0,30px);
}
  
.fadein-turn .child.active {
	opacity : 1;
	-webkit-transform: translate(0, 0) !important;
	-ms-transform: translate(0, 0) !important;
	transform: translate(0, 0) !important;
}

h2.ptn1  {
	text-align:center;
	position: relative;
	font-size:36px;
	color:#FFF;
	background-color:#2CA6E0;
	padding:100px 0 80px 0;
}

main section:nth-of-type(1) h2.ptn1  {
	padding:200px 0 80px 0;
}

h2.ptn1 span{
	display:block;
	position: relative;
	font-size:24px;
	line-height:1em;
	color:#f3fc17;
	margin-bottom:80px;
}

h2.ptn1 span:before {
	display:block;
	position: absolute;
	top: 120%;
	left:0;
	right:0;
	margin:auto;

	width: 188px;

	content:url(../images/common/title_deco.png) ;
}

.title_area{
	position: relative;
}

.title_area:after  {
	content: '';
	display: inline-block;
	width: 100%;
	height:76px;
	background-image: url(../images/common/blue_wave.png) ;
	background-repeat:no-repeat;
	background-position:0 -1px;
	background-size: 100%;
}

.fixed_contact_btn{
	position: fixed;
	right:0;
	top:200px;
	background-color:#FAFD04;
	font-size:18px;
	font-weight:bold;
	color: var(--blue);
	padding:20px 7px;
	writing-mode: vertical-rl;
	text-align:center;
	z-index:10;
	overflow: hidden;
	
}

@keyframes shiny {
    0% { top: -20%; }
    10% { top: 120%; }
    100% { top: 120%; }
}

.fixed_contact_btn::after {
    content: '';
    position: absolute;
    top: -10%;
    left: -20%;
    width: 70px;
    height: 100%;
    transform: scale(2) rotate(20deg);
    background-image: linear-gradient(100deg, rgba(255, 255, 255, 0) 10%, rgba(255, 255, 255, .9) 100%, rgba(255, 255, 255, 0) 0%);
    
    /* アニメーション */
    animation-name: shiny;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}


a.ptn2{
	display:inline-block;
	text-align:center;
	font-size:26px;
	color:#f39801;
	background-color:#FAE7C7;
	border:solid 4px #f39801;
	padding:15px;
	width:496px;
	max-width:80%;
	margin:0 auto;
	-moz-border-radius: 35px; 
	-webkit-border-radius: 35px; 
	border-radius:35px; 

	display:block;
	position:relative;
	overflow: hidden;
	z-index: 1;
}

a.ptn2::before {
  content: "";
  width: 150%;
  position: absolute;
  top: 0;
  right: -100px;
  border-right: 100px solid transparent;
  border-bottom: 100px solid var(--orange);
  transform: translateX(-100%);
  transition: transform ease .3s;

  z-index: -1;
}


a.ptn2:hover{
	transition: .3s;
	color:#FAE7C7;
}

a.ptn2:hover::before {
  transform: translateX(0);
}


a.ptn3{
	display:block;
	text-align:center;
	font-size:22px;
	background-color:#F3FC17;
	padding:30px 10px;
	width:80%;
	max-width:712px;
	margin:0 auto;

	position:relative;
	overflow: hidden;
	z-index: 1;
}

a.ptn3::before {
  content: "";
  width: 150%;
  position: absolute;
  top: 0;
  right: -100px;
  border-right: 100px solid transparent;
  border-bottom: 100px solid var(--orange);
  transform: translateX(-100%);
  transition: transform ease .3s;

  z-index: -1;
}


a.ptn3:hover{
	transition: .3s;
	color:#FAE7C7;
}

a.ptn3:hover::before {
  transform: translateX(0);
}


.google-maps {
	position: relative;
	padding-bottom: 40%; /* ここが縦横比 */
	height: 0;
	overflow: hidden;
}
.google-maps iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}

.info_box{
	width:580px;
	display:table;
	border-collapse: separate;  /* セルの間隔を空ける */
	border-spacing: 0 10px;  /* 左右 上下で記述 */
	
	margin:auto;
}

#header .info_box{
	position: absolute;
	right:0;
	top:10px;
	width:auto;
}

.info_box  .business_hours{
	display:table-cell;
	width:50%;
	border-right:solid 1px #000;
	padding-right:0.5em;
}

.info_box  .business_hours span{
	display:block;
	font-weight:bold;
	text-align:right;
	white-space: nowrap;
}

.info_box  .tel{
	width:50%;
	display:table-cell;
	text-align:right;
	vertical-align:middle;
}

.info_box  .tel a{
	position:relative;
	font-size:30px;
	font-weight:bold;
	padding-left:1.5em;
	color:#27A8E0;	
	white-space: nowrap;
}

.info_box .tel a:before{
	position:absolute;
	top:-2px;
	left:0.4em;
	content:url(../images/common/tel.png);
}

#drawer-menu .info_box{
	width:100%;
	background-color:#fff;
}
#drawer-menu .info_box .tel{
	text-align:left;
}

#drawer-menu .info_box  .tel a{
	font-size:22px;
	padding-left:2em;
	letter-spacing: 0;

}

.feature_list{
	background-color:#27A8E0;
	width:95%;
	margin:auto auto 40px auto;
	padding:45px 0;
	text-align:center;
}

.feature_list h2{
	font-size:30px;
	color:#fafd04;
	margin-bottom:20px;
}

.feature_list h2 + p{
	font-size:16px;
	color:#FFF;
	margin-bottom:40px;
}

.feature_list .panel_area{
	display:flex;
	flex-wrap: wrap;
	margin-bottom:30px;
}

.feature_list .panel_area .panel_block{
	/*width:100%;
	margin-bottom:30px;*/
	margin:0 20px 30px 20px !important;
	padding-top:20px;
}

.feature_list .panel_area .panel_block h4{
	text-align:center;
	font-size:25px;
	color:#f9f741;
}

.feature_list .panel_area .panel_block ul {
	display:flex;
	width:100%;
}

.feature_list .panel_area .panel_block ul li{
	width:calc(50% - 40px);
	margin:20px !important;
	
	padding:20px 5px;
	text-align:center;
	background-color:#CBF7F1;
	-moz-border-radius: 20px; 
	-webkit-border-radius: 20px; 
	border-radius:20px; 
}

.feature_list .panel_area .panel_block ul li span{
	display:block;
	font-size:22px;
	letter-spacing: 0;
	line-height:1.25em;
	font-weight:bold;
	color: var(--orange);
}

.feature_list .panel_area .panel_block:nth-of-type(1){
	background-color:#F39801;
}

.feature_list .panel_area .panel_block:nth-of-type(1) li{
	background-color:#FCF4E7;
}

.feature_list .panel_area .panel_block:nth-of-type(2){
	background-color:var(--deepblue);
}

.feature_list .panel_area .panel_block:nth-of-type(2) li{
	background-color:#E7FCF4;
}

.feature_list .panel_area .panel_block:nth-of-type(2) li span{
	color: var(--deepblue);
}

.feature_list .panel_area .panel_block:nth-of-type(3){
	background-color:#FBF9E6;
}

.feature_list .panel_area .panel_block:nth-of-type(3) h4{
	color:#666;
}

.feature_list .panel_area .panel_block:nth-of-type(3) li{
	background-color:#E4ECEF;
}

.feature_list .panel_area .panel_block:nth-of-type(3) li span{
	color: #989c9e;
}

.link_area {
	align-items:flex-start;
	margin-bottom:-20px;
	position: relative;
	z-index:2;
}

.link_area .block{
	background-color:#16E1B8;
	padding:30px;
	position: relative;
}

.link_area .block:nth-of-type(2){
	background-color:#F39801;
}

.link_area .block h3{
	position: relative;
	font-size:40px;
	line-height:1em;
	color:#fafd04;
	border-bottom:solid 1px #fff;
	padding-bottom:15px;
}

.link_area .block h3 span{
	position: absolute;
	top: 10px;
	right: 0;
	font-size:25px;
	color:#FFF;
}

.link_area .block .column2{
	display:flex;
	/*align-items:flex-end;*/
}

.link_area .block .column2 > .child dt{
	font-size:26px;
	line-height:1.25em;
	letter-spacing: 0;
}

.link_area .block .column2 > .child dd{
	font-size:22px;
	margin-top:25px;
	color:#fff;
}

.link_area .block .column2 > .child {
	width:55%;
}

.link_area .block .column2 > .child:nth-of-type(1) {
	padding-top:30px;
}


.link_area .block .column2 > .child:nth-of-type(2) {
	width:45%;
	margin-bottom:auto;
}

.link_area .block .column2 > .child img{
	margin-bottom:-30px;
	margin-left:0;
	max-width: none;
	width:calc(100% + 30px);
}


/* +++++++++++++++++++++++++++++++++++++++++++++++++++++
   TOP
++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#top #lower_header{
	position: relative;
	margin-bottom:100px;
}

#top #lower_header .inner{
	width: 1920px;
	height: 1025px;
	position: relative;
	left: 100%;
	margin-left: -1920px;
}
/**
#top #lower_header img.msg1{
	position: absolute;
	top:200px;
	left:5%;
	width:53%;
	min-width:700px
}

#top #lower_header #supported_language1 {
	position: absolute;
	left:80px;
	bottom:130px;
	max-width:1072px;
	display: table;
}
**/
#top #lower_header img.msg1{
	position: absolute;
	top:200px;
	left:5%;
	width:80%;
	max-width:920px
}

#top #lower_header #supported_language1 {
	position: absolute;
	left:80px;
	bottom:130px;
	width:80%;
	max-width:1072px;
	display: table;
}

#top #lower_header #supported_language1 div{
	display: table-cell;
	vertical-align:middle
}

#top #lower_header #supported_language1 div.translate{
	width:23%;
}

#top #lower_header #supported_language1 div.lang{
	width:54%;
}

#top #lower_header #supported_language1 div.manual{
	width:23%;
}


/**************
#top #lower_header #supported_language1 {
	position: absolute;
	left:80px;
	bottom:130px;
	display:table;
	max-width:960px;
}

#top #lower_header #supported_language1 dt{
	display:table-cell;
	width:26%;
}

#top #lower_header #supported_language1 dd{
	display:table-cell;
	width:74%;
	vertical-align:middle;
}

#top #lower_header #supported_language1 dd ul li{
	display:inline-block;
	color:#FFF;
	font-size:22px;
	background-color:#F39801;
	-moz-border-radius: 20px; 
	-webkit-border-radius: 20px; 
	border-radius:20px; 
	padding:10px 15px;
	margin:10px 0 10px 20px;
}

#top #lower_header #supported_language1 dd ul li:nth-child(5){
	margin:10px 0 10px 50px;
}

#top #lower_header #supported_language1 dd ul li img{
	vertical-align:-5px;
	margin-right:20px;
}
*********/


#top #lower_header  .msg2{
	position: absolute;
	right:0;
	bottom:0;
	background-color:#FAFD04;
	font-size:22px;
	padding:15px 10px;
}

#top #lower_header  .msg2 a{
	color:#2494c5;
	font-weight:bold;
}


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

	#top #lower_header .inner{
		width: 100%;
		height: auto;
		position: relative;
		left: 0;
		margin-left: 0;
	}

	#top #lower_header  img.msg1{
		top:150px;
		left:0;
		right:0;
		width:95%;
		margin:auto;
		
		top:15%;
		min-width:auto;
	}

	#top #lower_header #supported_language2 {
		position: absolute;
		left:5%;
		top:45%;
		bottom:auto;
		width:180px;
		text-align:center;

		top:35%;
	}

	#top #lower_header #supported_language2 dd ul li{
		display:inline-block;
		width:23px;
		margin:3px ;
	}


	#top #lower_header .manual {
		position: absolute;
		right:5%;
		top:55%;

		top:45%;
	}

	#top #lower_header  .msg2{
		position: static;
	}

}

@media only screen and (max-width : 768px ) {
	#top #lower_header #supported_language2 {
		top:35%;
	}

	#top #lower_header .manual {
		top:45%;
	}
}


#top #lower_header .contact{
	position: absolute;
	right:0;
	top:20%;
	background-color:#FAFD04;
	font-size:22px;
	padding:15px 10px;
	writing-mode: vertical-rl;
}

#top #about h2{
	text-align:center;
	font-size:28px;
	color:var(--blue);
	margin:0 auto 50px auto;
	
	width:500px;
	max-width:100%;
}

#top #about h2 .orange{
	color:var(--orange);
}

#top #about h2 .option{
	display:block;
	font-size:14px;
	text-align:right;
	color:#000;
}

#top #about h2 + p{
	font-size:22px;
	margin-bottom:70px;
}

#top #about h2 + p mark{
	background-color:#FAFD04;
}

#top #about img.bg{
	margin-top:-100px;
	position:relative;
	z-index:-1;
}

#top .feature_list{
	margin-top:-100px;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++
   SERVICE
++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#service #our_features {
	background-image:  url(../images/service/bg2.png);
	background-position: right 0 bottom 0;
	background-size: auto;
	background-repeat:  no-repeat;
}

#service #our_features h3{
	color:#2ca6e0;
	font-size:30px;
	margin-bottom:70px;
}

#service #our_features ul.target li{
	background-color: #FAFD04;
	color:#2ca6e0;
	font-size:15px;
	display:inline-block;
	margin:10px;
	padding:3px 5px;
	-moz-border-radius: 35px; 
	-webkit-border-radius: 35px; 
	border-radius:20px; 
}

#service #our_features ul.issue{
	margin-bottom:100px;
}

#service #our_features ul.issue li{
	position:relative;
	font-size:22px;
	margin-bottom:50px;
	padding-left:3em;
}

#service #our_features ul.issue li:before{
	display: inline-block;
	position:absolute;
	top:5px;
	left:10px;
	content:"";
	background:url(../images/service/chk.png);
	background-repeat: no-repeat;
	background-size: contain;
	width:40px;
	height:40px;
}


#service #five_features {
	background-color: #27A8E0;
	width:95%;
	margin:auto auto 50px auto;
	padding:50px 0;
	counter-reset: number 0; 
}

#service #five_features h2{
	color:#fafd04;
	font-size:50px;
	text-align:center;
	margin-bottom:60px;
}

#service #five_features h2 span{ 
	font-size:28px;
	line-height:1.25em;
	display:block;
	margin-bottom:10px;
}

#service #five_features .box{
	margin-bottom:50px;
	width:100%;
	background-color: #CBF7F1;
	padding:20px 20px 20px 80px;
}

#service #five_features .box dt{
	position: relative;
	color: #27a8e0;
	font-size:32px;
	font-weight:bold;
	line-height:1.25em;
	letter-spacing: 0em;
	padding-left:0.5em;
	margin-bottom:30px;
}

#service #five_features .box dt:before {
	counter-increment: number 1; 
	content: "0" counter(number);

	position: absolute;
	left:-75px;
	top:15px;
	font-size:60px;
	color:#F29600;
	font-weight:bold;
	font-family:arial;
}

#service #five_features .box dd{
	font-size:25px;
	position: relative;
	padding-left:1.5em;
	margin-bottom:20px;
}

#service #five_features .box dd:before {
  content: "";
  position: absolute;
  top: .45em;
  left: 0;
  width: 20px;
  height: 20px;
  background-color: #27A8E0;
  border-radius: 50%;
}

#service #list_features h3{
	font-size:28px;
	color:#2ca6e0;
	text-align:center;
	margin-bottom:80px;
}

#service #list_features > .column2 > .child{
	border:solid 8px var(--orange);
	-moz-border-radius: 25px; 
	-webkit-border-radius: 25px; 
	border-radius:25px; 
	padding:40px 40px 20px 40px;
	margin-bottom:50px;
}

#service #list_features > .column2 > .child:nth-of-type(2){
	border:solid 8px var(--deepblue) ;
}

#service #list_features > .column2 > .child h4{
	font-size:30px;
	text-align:center;
	margin-bottom:40px;
}

#service #list_features > .column2 > .child:nth-of-type(1) h4{
	color: var(--orange);
}

#service #list_features > .column2 > .child:nth-of-type(2) h4{
	color: var(--deepblue);
}

#service #list_features > .column2 > .child h4 + p{
	margin-bottom:40px;
	font-size:20px;
}

#service #list_features > .column2 > .child > .column2 > .child ul li{
	position:relative;
	font-size:18px;
	margin-bottom:10px;
	padding-left:3.25em;
}

#service #list_features > .column2 > .child > .column2 > .child ul li:before{
  content: "";
  position: absolute;
  top: 0.25em;
  left: 1em;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

#service #list_features > .column2 > .child:nth-of-type(1) > .column2 > .child ul li:before{
  background-color: var(--orange);
}

#service #list_features > .column2 > .child:nth-of-type(2) > .column2 > .child ul li:before{
  background-color: var(--deepblue);
}

#service #list_features > .column2 > .child .remarks{
	margin-top:20px;
	font-size:20px;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++
   COMPANY
++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */


#company #about_us {
	margin-bottom:50px;
}

#company #about_us table{
	width:95%;
	max-width:950px;
	margin:auto auto 100px auto;
	border:none;
	border-collapse:collapse;
}

#company #about_us table th{
	width:160px;
	font-size:20px;
	padding:15px 10px ;
	background-color: #F5F5F5 ;
    border-bottom: 1px solid #ccc;
}

#company #about_us table tr:first-child th{
    border-top: 1px solid #ccc;
}

#company #about_us table td{
	width:calc(100% - 160px);
	font-size:20px;
	padding:15px 10px ;
    border-bottom: 1px solid #ccc;
}

#company #about_us table tr:first-child td{
    border-top: 1px solid #ccc;
}


#company #about_us h3{
	color: var(--blue);
	font-size:30px;
	margin-bottom:40px;
}

#company #about_us  p{
	font-size:24px;
	margin-bottom:1em;
}

#company #about_us .column2{
	align-items:center
}

#company #about_us .column2 > .child:nth-of-type(1){
	width:100%;
}

#company #about_us .column2 > .child:nth-of-type(2){
	width:100%;
	margin-left:0;
	text-align:center;
}

#company #table{
  background-color: #2CA6E0;
  padding:60px 0;
  
}

#company   #table .column2{
	align-items:flex-end
}

#company   #table .column2 > .child{
	width:100%;
}

#company   #table .column2 > .child:nth-of-type(2){
	width:100%;
	margin-left:0;
	text-align:right;
}

#company   #table .column2 > .child:nth-of-type(2) img{
	margin-top:auto;
}

#company   #table .column2 > .child dl{
	display:flex;
	flex-wrap: wrap;
	color:#fff;
}

#company   #table .column2 > .child dl dt{
	display:inline-block;
	width:150px;
	font-size:20px;
	padding-bottom:15px;
}

#company  #table .column2 > .child dl dd{
	display:inline-block;
	width:calc(100% - 150px);
	font-size:20px;
	padding-bottom:15px;

}

#company   #map_area {
	padding:60px 0 150px 0;

}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++
   PLAN
++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#plan #implement{
	margin-bottom:80px;
}

#plan #implement h3{
	color: var(--blue);
	font-size:24px;
	margin-bottom:80px;
	text-align:center;
}

#plan #implement  h4{
	position:relative;
	font-size:26px;
	padding:0 0 15px 20px ;
	margin-bottom:20px;
	border-bottom: solid 2px #999;
}

#plan #implement  h4:before{
	position: absolute;
	top: 3px;
	left: 0em;
	content:"";
	width:5px;
	height:1em;
	background-color:#2CA6E0;
}

#plan #implement  h4 + p{
	font-size:18px;
}

#plan #implement  ul.chart {
	width:100%;
}

#plan #implement  ul.chart li{
	background-color:#F4F4F4;
	font-size:22px;
	position:relative;
	text-align:center;
	width:calc(100% - 60px);
	padding:10px;
	margin-bottom:15px;

	width:calc(100% - 60px);
	margin-left:60px;
}

#plan #implement  ul.chart li span.num{
    position: absolute;
	left:-60px;
	top:0;
	letter-spacing: 0;
	display:inline-block;
	text-align:center;
	padding:10px 0;
	width:50px;
	color:var(--yellow);
	background-color:#2E9CD0;
}

#plan #implement  ul.chart li:not(:last-child)  span.num:before{
    content: "";
    position: absolute;
    bottom: -25px;
    left: 11px;
    border: 12px solid #f00;
    border: 14px solid transparent;
    border-top: 15px solid #2E9CD0;	
	
}

#plan #implement  ul.chart li span.asterisk{
	display:inline-block;
	font-size:18px;
	line-height:1.25em;
}

/*******
#plan #implement  ul.chart li{
	font-size:22px;
	position:relative;
	text-align:center;
	width:100%;
	padding:10px;
}


#plan #implement  ul.chart li span{
	display:inline-block;
	text-align:center;
	padding:10px;
}

#plan #implement  ul.chart li span:nth-of-type(1){
	position:relative;
    position: absolute;
	left:0;
	top:10px;
	color:var(--yellow);
	background-color:#2E9CD0;
	text-align:left;
	
}

#plan #implement  ul.chart li:not(:last-child)  span:nth-of-type(1):before{
    content: "";
    position: absolute;
    bottom: -25px;
    left: 11px;
    border: 12px solid #f00;
    border: 14px solid transparent;
    border-top: 15px solid #2E9CD0;	
	
}

#plan #implement  ul.chart li span:nth-of-type(2){
	background-color:#F4F4F4;
	width:calc(100% - 50px);
	margin-left:50px;
}
************/

#plan #implement  ul.remarks{
	margin-left:60px;
}

#plan #flow h3 {
	color: var(--blue);
	font-size:45px;
	margin-bottom:40px;
	text-align:center;
}

#plan #flow > .column2 > .child{
	border:solid 5px #2CA6E0;
	-moz-border-radius: 25px; 
	-webkit-border-radius: 25px; 
	border-radius:25px; 
	padding:40px 40px 40px 40px;
	margin-bottom:70px;
}

#plan #flow > .column2 > .child:nth-of-type(2){
	border:solid 5px #F39801;
}

#plan #flow > .column2 > .child h4{
	font-size:45px;
	color: var(--blue);
	text-align:center;
	margin-bottom:15px;
}

#plan #flow > .column2 > .child:nth-of-type(2) h4{
	color: var(--orange);
}

#plan #flow > .column2 > .child h4 + p{
	margin-bottom:40px;
	font-size:20px;
	text-align:center;
}

#plan #flow > .column2 > .child h4 + p strong{
	font-size:50px;
}

#plan #flow > .column2 > .child  ul{
	width:90%;
	max-width:400px;
	margin:auto;
}

#plan #flow > .column2 > .child  ul li{
	position:relative;
	font-size:18px;
	margin-bottom:10px;
	padding-left:1.5em;

}

#plan #flow > .column2 > .child  ul li:before{
  content: "";
  position: absolute;
  top: 0.4em;
  left: 0em;
  width: 15px;
  height: 15px;
  background-color: #27A8E0;
  border-radius: 50%;
}

#plan #flow > .column2 > .child:nth-of-type(2)  ul li:before{
	background-color: #F39801;
}

#plan #flow .remarks{
	margin-left:2em;
}

#plan #flow .msg{
	font-size:22px;
	max-width:450px;
	width:80%;
	margin:auto auto 50px auto;
}

#plan #flow .info_box{
	max-width:100%;
}

#plan #flow .info_box .business_hours{
	display: block;
	width:100%;
	border-right:none;
}

#plan #flow .info_box .business_hours span{
	text-align:center;
}

#plan #flow .info_box .tel{
	display: block;
	width:100%;
	text-align:center;
}


#faq #inner_link {
	text-align:center;
	margin:80px 0;
}

#faq #inner_link a{
	display:inline-block;
	font-size:22px;
	line-height:1em;
	padding:0 1.5em;
	margin-bottom:15px;
	border-left:solid 1px #000;
	border-right:solid 1px #000;
}

#faq .faq_box{
	width:95%;
	margin:0 auto 50px auto;
	background-color: #27A8E0;
	padding:140px 0 30px 0;
}

#faq .faq_box h3{
	position: relative;
	font-size:45px;
	text-align:center;
	color:var(--yellow);
	border-bottom:solid 1px var(--yellow);
	width:95%;
	margin:auto auto 100px auto;
}

#faq .faq_box h3:before{
	position: absolute;
	top:-100px;
	left:0;
	right:0;
	width:100px;
	display:inline-block;
	margin:auto ;
	content:url(../images/faq/faq1.png) ;
}

#faq #faq02.faq_box h3:before{
	content:url(../images/faq/faq2.png) ;
}

#faq #faq03.faq_box h3:before{
	content:url(../images/faq/faq3.png) ;
}

#faq #faq04.faq_box h3:before{
	content:url(../images/faq/faq4.png) ;
}

#faq #faq05.faq_box h3:before{
	content:url(../images/faq/faq5.png) ;
}

#faq .faq_box dl dt{
	position: relative;
	color:#fff;
	font-size:28px;
	padding-left:3em;
	margin-bottom:40px
}

#faq .faq_box dl dt:before {
	position: absolute;
	top:-10px;
	left:0;
	content:url(../images/faq/Q.png) ;
}

#faq .faq_box dl dd{
	position: relative;
	background-color: #CBF7F1;
	font-size:22px;
	padding:20px 1em 20px 4em;
	margin-bottom:60px;
	margin-left:60px;
	-moz-border-radius: 25px; 
	-webkit-border-radius: 25px; 
	border-radius:35px 0 35px 0; 
	
}

#faq .faq_box dl dd:before {
	position: absolute;
	top:15px;
	left:1em;
	content:url(../images/faq/A.png) ;
}


/**************************************************************/
/**********************    パソコン    ************************/
/**************************************************************/


@media only screen and (min-width : 950px ) {

.pc {
	display: block !important;
}

.sp {
	display: none !important;
}

.container720{
	max-width:720px;
}

.container900{
	max-width:900px;
}

.container1100{
	max-width:1100px;
}

.container1150{
	max-width:1150px;
}

.container1160{
	max-width:1150px;
}

.container1180{
	max-width:1180px;
}

.container1200{
	max-width:1200px;
}

.container1250{
	max-width:1250px;
}

.container1350{
	max-width:1350px;
}

.container1550{
	max-width:1550px;
}



/* +++++++++++++++++++++++++++++++++++++++++++++++++++++
   header
++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#header{
	height: 150px;
}

#header #header_logo{
	left:30px;
	top:25px;
	max-width:352px;
	font-size:16px;
}

#header #header_logo img{
	width:auto;
	margin-top:5px;
}


#header #header_menu{
	position: absolute;
	right:0;
	bottom:20px;
}

#header #header_menu li{
	float:left;
	height:30px;
	line-height:30px;
	text-align:center;
}


#header #header_menu li a {
	position: relative;
	display:block;
	width:100%;
	height:30px;
	line-height:30px;
	font-size:20px;
	font-weight:bold;
	padding:0 15px;
}

#header #header_menu li a:hover {
	cursor:pointer;
	color:#000;
}


#header #header_menu li a::after {
  background-color: #27A8E0;
  bottom: 0;
  content: '';
  display: block;
  height: 4px;
  left: 0;
  position: absolute;
  transition: .25s all;
  width: 0;
}

#header #header_menu li a:hover::after {
  width: 100%;
}

.menu {
	display:none !important;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++
   フッター
++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#footer  #contact_area a.msg{
	padding:30px 150px 30px 40px;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++
   共通パーツ
++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

h2.ptn1  {
	font-size:40px;
}

h2.ptn1 span{
	font-size:26px;
	margin-bottom:80px;
}

.fixed_contact_btn{
	padding:35px 20px;
	font-size:22px;
}

.feature_list h2{
	font-size:36px;
}

.feature_list h2 + p{
	font-size:20px;
}

.feature_list .panel_area .panel_block{
	margin: 0 !important;
}

.feature_list .panel_area .panel_block:nth-of-type(4) h4{
	top: -0.6em;
}

.link_area .block:nth-of-type(2){
	margin-top:20px;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++
   TOP
++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#top #about h2{
	font-size:45px;
	width:800px;
}

#top #about h2 + p{
	font-size:24px;
}


/* +++++++++++++++++++++++++++++++++++++++++++++++++++++
   SERVICE
++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#service #our_features {
	background-image: url(../images/service/bg1.png), url(../images/service/bg2.png);
	background-position: left 2%  bottom 20%, right 0 bottom 0;
	background-size: auto, auto;
	background-repeat: no-repeat, no-repeat;
}

#service #our_features h3{
	font-size:45px;
}

#service #our_features ul.target li{
	font-size:20px;
	padding:5px;
}

#service #our_features ul.issue li{
	font-size:30px;
}

#service #our_features ul.issue li:before{
	top:-10px;
	left:0;
	width:80px;
	height:67px;
}

#service #five_features h2{
	font-size:85px;
}

#service #five_features h2 span{ 
	font-size:36px;
}


#service #five_features .box{
	position: relative;
	width:60%;
	min-height:400px;
	background-color: #CBF7F1;
	padding:20px 100px 20px 160px;
}

#service #five_features .box img{
	position: absolute;
	left:calc(100% - 100px);
	bottom:-30px;
}

#service #five_features .box dt{
	font-size:40px;
}

#service #five_features .box dt:before {
	top:25px;
	left:-150px;
	font-size:120px;
}

#service #list_features h3{
	font-size:45px;
}

#service #list_features > .column2 > .child h4{
	font-size:45px;
}


/* +++++++++++++++++++++++++++++++++++++++++++++++++++++
   PLAN
++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#plan #implement h3{
	font-size:30px;
}

#plan #flow .info_box{
	max-width:100%;
}

#plan #flow .info_box .business_hours{
	display: table-cell;
	width:50%;
	border-right:solid 1px #000;
}

#plan #flow .info_box .business_hours span{
	text-align:right;
}


#plan #flow .info_box .tel{
	display: table-cell;
	width:50%;
	text-align:left;
}

/* +++++++++++++++++++++++++++++++++++++++++++++++++++++
   COMPANY
++++++++++++++++++++++++++++++++++++++++++++++++++++++++ */

#company #about_us table th{
	width:250px;
	padding:15px;
}

#company #about_us table td{
	width:calc(100% - 250px);
	padding:15px;
}

#company #about_us .column2 > .child:nth-of-type(1){
	width:54%;
}

#company #about_us .column2 > .child:nth-of-type(2){
	width:44%;
	margin-left:2%;
}

#company   #table .column2 > .child{
	width:60%;
}

#company   #table .column2 > .child:nth-of-type(2){
	width:36%;
	margin-left:4%;
}



} /* min-width : 950px */


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

	#top #lower_header #supported_language1 {
		position: absolute;
		left:0;
		right:0;
		bottom:130px;
		width:80%;
		margin:auto;
	}

	#footer  #logo_area{
		position:absolute;
		right:0;
		left:0;
		top:10%;
		color:#fff;
		font-size:19px;
		max-width:416px;
		margin:auto;
	}

	#footer  #contact_area{
		position:absolute;
		right:0;
		left:0;
		top:auto;
		bottom:10%;
		width:700px;
		max-width:95%;
		text-align:left;
		margin:auto;
	}

	#footer  #contact_area .info_box .business_hours{
		display: block;
		width:100%;
		border-right: none;
		padding-right: 0;
	}

	#footer  #contact_area .info_box .business_hours span{
		text-align:center;
	}

	#footer  #contact_area .info_box .tel{
		display: block;
		width:100%;
		text-align:center;
	}

	#top #about img.bg{
		margin-top:20px;
	}


	#top .feature_list{
		margin-top:-20px;
	}

} /* max-width : 1300px */




@media only screen and (min-width : 951px )  and (max-width : 1450px ) {

	#header #header_logo{
		top:10px;
	}

	#header #header_menu{
		bottom:5px;
	}

	#header #header_menu li a {
		font-size:18px;
	}

	.link_area .block h3{
		font-size:34px;
	}

	.link_area .block h3 span{
		position: absolute;
		top: -30px;
		right: 0;
	}

} /* min-width : 951px  and  max-width : 1450px */

@media only screen and (min-width : 1921px ) {

	#top #lower_header .inner{
		width: 100%;
		height: auto;
		left: 0;
		margin-left: 0;
	}

	#footer .inner{
		width: 100%;
		height: auto;
		left: 0;
		margin-left: 0;
	}

} /* min-width : 1921px */