/*全体
--------------------------------------------------------------------------*/
body {
	margin: 0;
	padding: 0;
	COLOR: #111;
	FONT-SIZE:20px;
    font-family:'Noto Sans JP', "Noto Serif" , sans-serif;
	font-weight: 400;
	LINE-HEIGHT: 150%;
	text-align: center;
	background: #eee;
}

/*paddingとborderをwidthに含める*/
* {	
	-webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    box-sizing: border-box;
  }

#con{
    width:100%;
max-width: 1920px;
	height:auto;
	margin:0 auto;
	padding:0;
	position:relative;
	text-align: center;
    background: #fff;
}
#con.subp{
background: #f9f9fc;
}

/*page-top用*/
.clearfix:after{
	content:".";
	display:block;
	height:0;
	clear:both;
	visibility:hidden;
	font-size: 0;
	line-height:0;
}

img{
	border:0;
}
@media screen and (max-width:1280px){
img{
max-width: 100%;
height: auto;
width :auto;
}
}

a:link,a:visited{
	outline:0;
	color:#406ec8;
	font-weight: 500;
}

a:hover{
	outline:0;
	color: #ba9434;
}

a:hover img {
opacity: 0.8;
  -ms-filter: "alpha(opacity=80)";
}

br.br1440,br.br1280,br.br1080,br.br835,br.br640,br.br480,br.br414{
display:none;
}
@media only screen and (max-width: 1440px) {
br.br1440{
display:inherit;
}
br.nobr1440{
display:none;
}
}
@media only screen and (max-width: 1280px) {
br.br1280{
display:inherit;
}
br.nobr1280{
display:none;
}
}
@media only screen and (max-width: 1080px) {
br.br1080{
display:inherit;
}
br.nobr1080{
display:none;
}
}
@media only screen and (max-width: 835px) {
br.br835{
display:inherit;
}
br.nobr835{
display:none;
}
}
@media only screen and (max-width: 640px) {
br.br640{
display:inherit;
}
br.nobr640{
display:none;
}
}
@media only screen and (max-width: 480px) {
br.br480{
display:inherit;
}
br.nobr480{
display:none;
}
}
@media only screen and (max-width: 414px) {
br.br414{
display:inherit;
}
br.nobr414{
display:none;
}
}

/*ヘッダ
--------------------------------------------------------------------------*/
header {
    width: 100% !important;
    max-width: 1920px;
    margin: 0 auto;
    height: auto;
    position: fixed !important; /* stickyから変更 */
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999; /* 重なり順を最大級に */
    display: block !important;
    background-color: rgba(255, 255, 255, 0); /* 初期は透明 */
    transition: all 0.4s ease-in-out;
}
/* スクロール後のヘッダーのスタイル */
header.scrolled {
    background-color: #ffffff !important;
    background: #ffffff !important; /* 念のためbackgroundも指定 */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2) !important;
}
header img{
float: left;
margin: 15px 0 15px 3%;
max-width: 5%;
}
@media only screen and (max-width: 1280px) {
header img{
float: left;
margin: 15px 0 15px 3%;
max-width: 6%;
}
}
@media only screen and (max-width: 835px) {
header img{
float: left;
margin: 15px 0 15px 3%;
max-width: 10%;
}
}
@media only screen and (max-width: 640px) {
header img{
float: left;
margin: 15px 0 15px 3%;
max-width: 15%;
}
}
@media only screen and (max-width: 480px) {
header img{
float: left;
margin: 15px 0 15px 3%;
max-width: 15%;
}
}
@media only screen and (max-width: 414px) {
header img{
float: left;
margin: 15px 0 15px 3%;
max-width: 15%;
}
}

#menu-box {
  float: right;
  width: 60%;
  height: auto;
  margin: 40px 3% 0 0;
  padding: 0;
}
@media only screen and (max-width: 1280px) {
#menu-box {
  float: right;
  width: 70%;
  height: auto;
  margin: 40px 3% 0 0;
  padding: 0;
}
}

menu {
  clear: both;
  float: left;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

menu ul {
  clear: both;
  float: left;
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}
menu li {
  list-style-type: none;
  margin: 0;
  padding: 0;
  text-align: center;
  font-size: 17px;
  line-height: 100%;
  flex: 1 0 auto;
}
menu li a:link,
menu li a:visited {
  height: auto;
  text-decoration: none;
  color: #fff; /* 初期の色 */
  font-weight: 400;
  line-height: 100%;
  transition: color 0.3s ease-in-out; /* 文字色のトランジション */
}
menu li.mb{
border: 1px solid #fff;
margin: -15px 0 0;
padding: 15px 0 15px 1%;
background: url(image/mail.png) no-repeat 10% 50%;
}
/* スクロール後のメニューリンクのスタイル */
header.scrolled menu li a:link,
header.scrolled menu li a:visited {
  color: #111;
}
header.scrolled menu li.mb {
  border: 1px solid #222;
  background: url(image/mail-b.png) no-repeat 10% 50%,#fff;
}
header.scrolled menu li.mb a:link,
header.scrolled menu li.mb a:visited {
  color: #111; 
}
menu li a:hover {
  text-decoration: underline;
}
@media only screen and (max-width: 1280px) {
header.scrolled menu li.mb {
padding: 15px 0 15px 3%;
  background: url(image/mail-b.png) no-repeat 10% 50%,#fff;
}
header.scrolled menu li.mb a:link,
header.scrolled menu li.mb a:visited {
  color: #111; 
}
}
@media only screen and (max-width:1080px) {
#menu-box{
clear: both;
float: none;
width: 100%;
height: auto;
margin: 0;
padding: 0;
position: fixed;
top:0;
left:0;
z-index: 9999;
}
menu{
clear: both;
float: left;
width: 100%;
height: auto;
height: 100vh;
margin: 0;
padding: 0;
text-align: center;
position: fixed;
top: 0;
background: rgba(2,53,34,0.9);
}
menu ul{
display:inherit;
clear: both;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: center;
border-top:1px solid #fff;
}
menu li a:link,menu li a:visited{
float: none;
display: block;
text-decoration: none;
color: #fff;
padding: 25px 0 25px;
text-align: center;
line-height: 100%;
font-size: 17px;
border-bottom:1px solid #fff;
}
menu li a:hover{
text-decoration: underline;
}
menu li.mb{
width: 60%;
margin: 15px 20% 15px;
padding: 0;
border: 1px solid #fff;
  background: url(image/mail-g.png) no-repeat 10% 50%,#fff;
}
menu li.mb a:link,menu li.mb a:visited{
border-bottom:none;
color: #222;
padding: 10px 0 10px;
}
/* スクロール後のメニューリンクのスタイル */
header.scrolled menu li a:link,
header.scrolled menu li a:visited {
  color: #fff; /* スクロール後の色 */
}
header.scrolled menu li.mb a:link,header.scrolled menu li.mb a:visited{
color: #222;
}
@media only screen and (max-width: 640px) {
menu li a:link,menu li a:visited{
float: none;
display: block;
text-decoration: none;
color: #fff;
padding: 25px 0 25px;
text-align: center;
line-height: 100%;
font-size: 17px;
background: url(image/menu-li2.png) no-repeat center 10px/2%;
}
menu li.mb a:link,menu li.mb a:visited{
padding: 10px 0 10px;
}
}
@media only screen and (max-width: 480px) {
menu li a:link,menu li a:visited{
float: none;
display: block;
text-decoration: none;
color: #fff;
padding: 20px 0 20px;
text-align: center;
line-height: 100%;
font-size: 17px;
background: url(image/menu-li2.png) no-repeat center 10px/3%;
}
menu li.mb{
width: 70%;
margin: 15px 15% 15px;
padding: 0;
border: 1px solid #fff;
  background: url(image/mail-g.png) no-repeat 10% 50%,#fff;
}
menu li.mb a:link,menu li.mb a:visited{
padding: 10px 0 10px;
}
}
@media only screen and (max-width: 414px) {
menu li a:link,menu li a:visited{
float: none;
display: block;
text-decoration: none;
color: #fff;
padding: 20px 0 20px;
text-align: center;
line-height: 100%;
font-size: 17px;
background: url(image/menu-li2.png) no-repeat center 10px/4%;
}
menu li.mb{
width: 80%;
margin: 15px 10% 15px;
padding: 0;
border: 1px solid #fff;
  background: url(image/mail-g.png) no-repeat 10% 50%,#fff;
}
menu li.mb a:link,menu li.mb a:visited{
padding: 15px 0 15px;
}
}

/*==================================================
　5-2-4 MENUがCLOSEに
===================================*/

/*ボタン外側※レイアウトによってpositionや形状は適宜変更してください*/
.openbtn4{
float: right;
  position: fixed;/*ボタン内側の基点となるためrelativeを指定*/
  background:#181f59;
  cursor: pointer;
    width: 50px;
    height:50px;
  border-radius: 5px;
  top:10px;
  right:10px;
  z-index: 999;
  border: 2px solid #fff;
}
/*ボタン内側*/
.openbtn4 span{
    display: inline-block;
    transition: all .4s;/*アニメーションの設定*/
    position: absolute;
    left: 13px;
    height: 2px;
    border-radius: 5px;
  background: #fff;
    width: 45%;
  }
.openbtn4 span:nth-of-type(1) {
  top:11px; 
}
.openbtn4 span:nth-of-type(2) {
  top:17px;
}
.openbtn4 span:nth-of-type(3) {
  top:23px;
}
.openbtn4 span:nth-of-type(3)::after {
  content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
  position: absolute;
  top:0px;
  left:-5px;
  color: #fff;
  font-size: 0.7rem;
  text-transform: uppercase;
  font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
@media only screen and (max-width: 640px) {
.openbtn4 span:nth-of-type(3)::after {
  content:"Menu";/*3つ目の要素のafterにMenu表示を指定*/
  position: absolute;
  top:0px;
  left:-5px;
  color: #fff;
  font-size: 0.7rem;
  text-transform: uppercase;
  font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
}

/*activeクラスが付与されると線が回転して×になり、Menu⇒Closeに変更*/
.openbtn4.active span:nth-of-type(1) {
    top: 12px;
    left: 16px;
    transform: translateY(6px) rotate(-45deg);
    width: 30%;
}
.openbtn4.active span:nth-of-type(2) {
  opacity: 0;
}
.openbtn4.active span:nth-of-type(3){
    top: 24px;
    left: 16px;
    transform: translateY(-6px) rotate(45deg);
    width: 30%;
}

.openbtn4.active span:nth-of-type(3)::after {
  content:"Close";/*3つ目の要素のafterにClose表示を指定*/
    transform: translateY(0) rotate(-45deg);
  top:-1px;
  left:-0px;
  font-size: 0.8rem;
  font-family: "メイリオ", Osaka, "ヒラギノ丸ゴ Pro W4", "ＭＳ Ｐゴシック";
}
/*.doneクラスがついたヘッダー*/
.dnone {
display: none;
}
/*メニューボタンをクリックした際に付与されるpanelactiveクラスがついたら*/
.dnone.panelactive {
display: inherit;
}
}

/*メイン
--------------------------------------------------------------------------*/
#fv{
clear: both;
  width: 100%;
  height:800px;
  margin:0 0 0;
  padding: 0;
  text-align: left;
position: relative;
  z-index: 1;
}
/* スライダー全体の枠 */
.fv-slider-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* 各スライドの初期設定（透明にして重ね合わせる） */
.fv-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity 1.0s ease-in-out, visibility 1.0s ease-in-out;
  z-index: 1;
}
/* アクティブなスライド（不透明にして最前面へ） */
.fv-slide.is-active {
  opacity: 1;
  visibility: visible;
  z-index: 2;
}
/* 背景画像の指定 */
.fv-bg-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  z-index: 1;
}
/* 文字群の配置（元の#fvにかかっていたpaddingをここに適用） */
.fv-text-item {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 280px 5% 0 3%;
  box-sizing: border-box;
  text-align: left;
  z-index: 10;
}
/* レスポンシブの高さとインナー余白の連動 */
@media only screen and (max-width: 1600px) {
  #fv { height: 750px; }
  .fv-bg-item { background-size: auto 100%; }
  .fv-text-item { padding: 200px 5% 0 3%; }
}
@media only screen and (max-width: 1280px) { #fv { height: 700px; } }
@media only screen and (max-width: 1080px) { #fv { height: 650px; } }
@media only screen and (max-width: 835px)  { #fv { height: 600px; } }
@media only screen and (max-width: 640px)  { #fv { height: 550px; } }
@media only screen and (max-width: 480px)  { .fv-text-item { padding: 160px 5% 0 3%; } }
@media only screen and (max-width: 414px)  { #fv { height: 500px; } }


@media only screen and (max-width: 1600px) {
  #fv{
    height:750px;
    padding: 200px 5% 0 3%;
  }
  .fv-bg-item {
    background-size: auto 100%;
  }
}
@media only screen and (max-width: 1280px) {
#fv{
  height:700px;
}
}
@media only screen and (max-width: 1080px) {
#fv{
  height:650px;
}
}
@media only screen and (max-width: 835px) {
#fv{
  height:600px;
}
}
@media only screen and (max-width: 640px) {
#fv{
  height:550px;
}
}
@media only screen and (max-width: 480px) {
#fv{
padding: 160px 5% 0 3%;
}
}
@media only screen and (max-width: 414px) {
#fv{
  height:500px;
}
}

#fv h1{
color: #fff;
margin: 0 0 30px;
padding: 0;
text-align: left;
line-height: 160%;
font-size: 45px;
font-weight: 700;
text-shadow: 2px 2px 8px #333;
}
#fv h1 strong{
font-size: 55px;
font-weight:800;
}
#fv p{
text-align: left;
color: #fff;
font-size: 25px;
line-height: 150%;
text-shadow: 2px 2px 8px #111;
}
#fv h1, #fv p {
  position: relative;
  z-index: 10;
}
@media only screen and (max-width: 1280px) {
#fv h1{
font-size: 40px;
}
#fv h1 strong{
font-size: 50px;
}
#fv p{
font-size: 22px;
}
}
@media only screen and (max-width: 1080px) {
#fv h1{
font-size:35px;
}
#fv h1 strong{
font-size: 45px;
}
#fv p{
font-size: 20px;
}
}
@media only screen and (max-width: 835px) {
#fv h1{
font-size:30px;
}
#fv h1 strong{
font-size: 40px;
}
}
@media only screen and (max-width: 640px) {
#fv h1{
font-size:28px;
}
#fv h1 strong{
font-size: 36px;
}
}
@media only screen and (max-width: 480px) {
#fv h1{
font-size:25px;
text-shadow: 2px 2px 6px #222;
}
#fv h1 strong{
font-size: 30px;
}
#fv p{
font-size: 18px;
text-shadow: 2px 2px 6px #222;
}
}
@media only screen and (max-width: 414px) {
#fv h1{
font-size:20px;
}
#fv h1 strong{
font-size: 25px;
}
}

#fv-sub{
clear: both;
  width: 100%;
  height:400px;
  margin:0 0 0;
  padding:180px 5% 0 3%;
  background:url(image/fv-service.webp) no-repeat center top/auto 100%;
  text-align: left;
}
#fv-sub.sub-campany{
background:url(image/fv-company.webp) no-repeat center top/auto 100%;
}
#fv-sub.sub-features{
background:url(image/fv-features.webp) no-repeat center top/auto 100%;
}
#fv-sub.sub-contact{
background:url(image/fv-contact.webp) no-repeat center top/auto 100%;
}
#fv-sub.sub-news{
background:url(image/fv-news.webp) no-repeat center top/auto 100%;
}
@media only screen and (max-width: 835px) {
#fv-sub{
  height:350px;
  padding:150px 5% 0 3%;
}
}
@media only screen and (max-width: 640px) {
#fv-sub{
  height:300px;
  padding:150px 5% 0 3%;
}
}
@media only screen and (max-width: 480px) {
#fv-sub{
  height:270px;
  padding:130px 5% 0 3%;
}
}
@media only screen and (max-width: 414px) {
#fv-sub{
  height:230px;
  padding:110px 5% 0 3%;
}
}

#fv-sub h1{
color: #fff;
margin: 0 0 30px;
padding: 0;
text-align: left;
line-height: 160%;
font-size: 45px;
font-weight: 700;
}
@media only screen and (max-width: 835px) {
#fv-sub h1{
font-size: 40px;
}
}
@media only screen and (max-width: 480px) {
#fv-sub h1{
font-size: 35px;
}
}
@media only screen and (max-width: 414px) {
#fv-sub h1{
font-size: 30px;
}
}

main{
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
main.sub-page{
padding:60px 15% 100px;
}
@media only screen and (max-width: 1600px) {
main.sub-page{
padding:60px 10% 100px;
}
}
@media only screen and (max-width: 1440px) {
main.sub-page{
padding:60px 5% 100px;
}
}
@media only screen and (max-width: 640px) {
main.sub-page{
padding:50px 5% 60px;
}
}
@media only screen and (max-width: 414px) {
main.sub-page{
padding:40px 5% 50px;
}
}

main h2{
margin: 0 0 80px;
padding: 0 0 25px;
text-align: center;
font-weight: 700;
line-height: 120%;
font-size: 50px;
background: url(image/top-h.png) no-repeat center bottom;
}
@media only screen and (max-width: 1440px) {
main h2{
font-size: 45px;
background: url(image/top-h.png) no-repeat center bottom/25%;
}
}
@media only screen and (max-width: 835px) {
main h2{
margin: 0 0 50px;
padding: 0 0 20px;
font-size: 40px;
background: url(image/top-h.png) no-repeat center bottom/30%;
}
}
@media only screen and (max-width: 640px) {
main h2{
margin: 0 0 40px;
font-size: 35px;
background: url(image/top-h.png) no-repeat center bottom/35%;
}
}
@media only screen and (max-width: 480px) {
main h2{
margin: 0 0 30px;
font-size: 30px;
background: url(image/top-h.png) no-repeat center bottom/40%;
}
}

#jigyo{
clear: both;
width: 100%;
height: auto;
margin: 0;
padding: 150px 10% 80px;
background: url(image/jigyo-back.webp) no-repeat left top;
}
@media only screen and (max-width: 1440px) {
#jigyo{
padding: 100px 5% 60px;
}
}
@media only screen and (max-width: 835px) {
#jigyo{
padding: 70px 5% 40px;
background: url(image/jigyo-back.webp) repeat-y left top/150%;
}
}

#jigyo-area{
display: flex;
justify-content:space-between;
margin: 0 0 60px;
}
.jigyo-box{
width: 28%;
}
.jigyo-box img{
max-width: 100%;
margin: 0 0 40px;
}
#jigyo-area h3{
margin: 0 0 30px;
padding: 0;
min-height: 2.5em;
text-align: center;
font-size: 35px;
line-height: 120%;
font-weight: 700;
}
#jigyo-area p{
text-align:justify;
font-size: 20px;
line-height: 180%;
margin: 0;
}
@media only screen and (max-width: 1080px) {
#jigyo-area h3{
font-size: 30px;
}
#jigyo-area p{
font-size: 18px;
}
}
@media only screen and (max-width: 835px) {
#jigyo-area{
flex-direction: column;
margin: 0 0 0px;
}
.jigyo-box{
width: 100%;
margin: 0 0 50px;
}
.jigyo-box img{
max-width: 70%;
margin: 0 0 20px;
}
#jigyo-area h3{
margin: 0 0 20px;
min-height: 1em;
}
}
@media only screen and (max-width: 640px) {
.jigyo-box img{
max-width: 80%;
margin: 0 0 15px;
}
#jigyo-area h3{
margin: 0 0 15px;
}
#jigyo-area p{
line-height: 160%;
font-size: 17px;
}
}
@media only screen and (max-width: 480px) {
.jigyo-box img{
max-width: 90%;
}
#jigyo-area h3{
font-size: 25px;
}
#jigyo-area p{
font-size: 16px;
}
}

.link{
width: 100%;
height: auto;
margin:30px 0 60px;
padding: 0;
}
.link a:link,.link a:visited{
display: block;
width: 25%;
margin: 0 auto;
padding: 15px 20px;
text-decoration: none;
font-size: 20px;
line-height: 100%;
text-align: center;
border: 1px solid #fff;
color: #fff;
background: url("image/link-w.png") no-repeat 5% 50%,#1c9a6b;
}
.link a:hover{
border: 1px solid #1c9a6b;
color: #1c9a6b;
background: url("image/link.png") no-repeat 5% 50%,#fff;
}
@media only screen and (max-width: 1280px) {
.link a:link,.link a:visited{
width: 30%;
}
}
@media only screen and (max-width: 1080px) {
.link a:link,.link a:visited{
width: 35%;
}
}
@media only screen and (max-width: 835px) {
.link{
margin:0px 0 40px;
}
.link a:link,.link a:visited{
width: 40%;
}
}
@media only screen and (max-width: 640px) {
.link a:link,.link a:visited{
width: 60%;
font-size: 16px;
}
}
@media only screen and (max-width: 480px) {
.link a:link,.link a:visited{
width: 70%;
}
}
@media only screen and (max-width: 414px) {
.link a:link,.link a:visited{
width: 80%;
}
}

#kai{
width: 100%;
height: auto;
margin: 0;
padding: 120px 10% 120px;
border-top:1px solid #033f7e;
}
@media only screen and (max-width: 1440px) {
#kai{
padding: 110px 5% 110px;
}
}
@media only screen and (max-width: 1280px) {
#kai{
padding: 100px 5% 100px;
}
}
@media only screen and (max-width: 1080px) {
#kai{
padding: 70px 5% 100px;
}
}
@media only screen and (max-width: 835px) {
#kai{
padding: 60px 5% 80px;
}
}
@media only screen and (max-width: 640px) {
#kai{
padding: 60px 5% 80px;
}
}
@media only screen and (max-width: 640px) {
#kai{
padding: 50px 5% 70px;
}
}

#kai h3{
width: 100%;
margin: 0 0 80px;
padding: 0;
text-align: center;
font-weight: 700;
line-height: 100%;
font-size: 45px;
text-indent: 0;
}
@media only screen and (max-width: 1080px) {
#kai h3{
clear: both;
font-size: 40px;
}
}
@media only screen and (max-width: 835px) {
#kai h3{
font-size:35px;
}
}
@media only screen and (max-width: 640px) {
#kai h3{
font-size: 25px;
margin: 0 0 40px;
}
}
@media only screen and (max-width: 414px) {
#kai h3{
font-size: 25px;
margin: 0 0 30px;
}
}

#kai-area{
width: 100%;
height: auto;
margin: 0 0 60px;
padding: 0;
display: flex;
justify-content:center;
gap: 5%;
align-items: flex-start;
}
#kai-area img{
max-width: 40%;
}
@media only screen and (max-width: 1600px) {
#kai-area{
margin: 0 0 50px;
}
}
@media only screen and (max-width:835px) {
#kai-area{
flex-direction: column;
align-items: center;
}
#kai-area img{
max-width: 60%;
}
}
@media only screen and (max-width: 640px) {
#kai-area{
margin: 0 0 40px;
}
#kai-area img{
max-width:70%;
}
}
@media only screen and (max-width: 480px) {
#kai-area{
margin: 0 0 20px;
}
#kai-area img{
max-width:80%;
}
}

#kai ul{
width: 40%;
height: auto;
margin: 0;
padding: 0;
}
#kai li{
text-align: left;
line-height: 120%;
margin: 0 0 25px;
padding: 0 0 15px;
font-size: 30px;
font-weight: 500;
color: #033f7e;
list-style-position: inside;
border-bottom: 1px solid #033f7e;
}
#kai p{
clear: both;
text-align: center;
margin: 0;
font-weight: 500;
font-size: 30px;
}
@media only screen and (max-width: 1280px) {
#kai li{
font-size: 25px;
}
#kai p{
font-size: 25px;
}
}
@media only screen and (max-width: 1080px) {
#kai ul{
width: 100%;
}
}
@media only screen and (max-width: 835px) {
#kai p{
line-height: 120%;
font-size: 25px;
}
}
@media only screen and (max-width: 640px) {
#kai li{
font-size: 18px;
padding: 0 0 10px;
}
}
@media only screen and (max-width: 480px) {
#kai p{
font-size: 20px;
}
}
@media only screen and (max-width: 414px) {
#kai li{
font-size: 17px;
}
#kai p{
font-size: 20px;
}
}

#tsuyomi{
width: 100%;
height: auto;
margin: 0;
padding: 120px 5% 50px;
border-top:1px solid #033f7e;
}
@media only screen and (max-width: 1600px) {
#tsuyomi{
padding: 120px 0% 50px;
}
}
@media only screen and (max-width: 1280px) {
#tsuyomi{
padding: 100px 0% 50px;
}
}
@media only screen and (max-width: 1080px) {
#tsuyomi{
padding: 80px 0% 50px;
}
}
@media only screen and (max-width: 835px) {
#tsuyomi{
padding: 70px 0% 40px;
}
}

#tsuyomi-area{
display: flex;
flex-wrap: wrap;
align-items: flex-start;
}
.tsuyomi-box{
width: 46%;
margin: 0 2% 60px;
display: flex;
align-items: flex-start;
}
.tsuyomi-box img{
max-width:20%;
margin: 0 5% 0 0;
}
.tsuyomi-box h3{
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0 0 10px 40px;
text-align: left;
font-size: 26px;
font-weight: 600;
line-height: 120%;
background: url(image/tsuyomi-h.png) no-repeat left center/contain;
}
.tsuyomi-box p{
text-align: justify;
font-size: 20px;
line-height: 160%;
margin: 0;
}
@media only screen and (max-width: 1440px) {
.tsuyomi-box h3{
padding: 0 0 10px 40px;
font-size: 23px;
}
.tsuyomi-box p{
font-size:18px;
}
}
@media only screen and (max-width: 1280px) {
.tsuyomi-box img{
max-width:25%;
}
.tsuyomi-box h3{
margin: 0 0 10px;
padding: 0 0 10px 40px;
font-size: 23px;
background: url(image/tsuyomi-h.png) no-repeat left bottom/contain;
}
}
@media only screen and (max-width: 1080px) {
  #tsuyomi-area {
    flex-direction: column;
    padding: 0 5%;
  }
  .tsuyomi-box {
    width: 100%;
    margin: 0 0% 40px;
    align-items: flex-start;
    justify-content: center;
  }
.tsuyomi-box img{
max-width:15%;
}
  
  /* テキスト全体の幅を「65%」にカチッと固定（画像30% + 余白5% = 35% の残り） */
  .tsuyomi-text {
    width: 65%;
    flex-shrink: 0;
  }
  
  .tsuyomi-box h3 {
    padding: 0 0 10px 50px;
  }
}

@media only screen and (max-width: 640px) {
  .tsuyomi-box {
    flex-direction: column;
    align-items: center; /* スマホ時に中央に揃うよう追加 */
    margin: 0 0% 60px;
  }
  /* スマホ縦並び時は、テキストも100%の幅に広げる */
  .tsuyomi-text {
    width: 100%;
  }
  .tsuyomi-box img {
    max-width: 25%;
    margin: 0 0 20px 0; /* 下に余白を作る */
  }
}
@media only screen and (max-width: 480px) {
#tsuyomi-area{
margin: 0 0 10px;
}
.tsuyomi-box p{
font-size:16px;
}
.tsuyomi-box h3 {
    padding: 0 0 10px 40px;
    font-size: 20px;
  }
.tsuyomi-box {
    margin: 0 0% 30px;
  }
.tsuyomi-box img {
    max-width: 30%;
  }
}
@media only screen and (max-width: 414px) {
#tsuyomi-area{
margin: 0 0 20px;
}
.tsuyomi-box img {
    max-width: 35%;
  }
}

#news{
width: 100%;
height: auto;
margin: 0;
padding: 120px 0% 50px;
background: #e9f2f9;
}
#news h4{
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0 0 20px;
text-align: center;
font-weight: 600;
line-height: 100%;
font-size: 35px;
background: url(image/top-h.png) no-repeat center bottom/5%;
}
@media only screen and (max-width: 1440px) {
#news{
padding: 110px 0% 50px;
}
}
@media only screen and (max-width: 1080px) {
#news{
padding: 90px 0% 40px;
}
}
@media only screen and (max-width: 835px) {
#news{
padding: 70px 0% 40px;
}
#news h4{
margin: 0 0 40px;
font-size: 30px;
}
}
@media only screen and (max-width: 640px) {
#news h4{
margin: 0 0 30px;
font-size: 25px;
}
}
@media only screen and (max-width: 480px) {
#news{
padding: 60px 5% 20px;
}
#news h4{
margin: 0 0 20px;
}
}

#news-area{
width: 80%;
height: auto;
margin: 0 10% 60px;
padding: 70px 5% 50px;
background: #fff;
display: flex;
box-shadow: 0 0 10px #ccc;
border-radius: 7px;
}
@media only screen and (max-width: 1440px) {
#news-area{
width: 80%;
margin: 0 10% 60px;
padding: 70px 5% 50px;
}
}
@media only screen and (max-width: 1280px) {
#news-area{
width: 80%;
margin: 0 10% 50px;
padding: 50px 50px 50px;
}
}
@media only screen and (max-width: 1080px) {
#news-area{
width: 90%;
margin: 0 5% 40px;
}
}
@media only screen and (max-width: 835px) {
#news-area{
width: 90%;
margin: 0 5% 40px;
padding: 30px 30px 30px;
}
}
@media only screen and (max-width: 640px) {
#news-area{
padding: 30px 30px 10px;
}
}
@media only screen and (max-width: 480px) {
#news-area{
margin: 0 5% 20px;
padding: 20px 20px 5px;
}
}

ul#newsList{
clear: none;
float: left;
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
ul#newsList li{
list-style-type: none;
font-size: 17px;
line-height: 150%;
margin: 0 0 30px;
padding: 0 0 30px;
text-align: justify;
display: flex;
align-items: flex-start;
border-bottom: 1px solid #ccc;
}
ul#newsList li:last-of-type{
border-bottom:none;
margin: 0;
padding: 0;
}
@media only screen and (max-width: 835px) {
ul#newsList li{
margin: 0 0 20px;
padding: 0 0 20px;
font-size: 16px;
}
}
@media only screen and (max-width: 640px) {
ul#newsList li{
flex-direction: column;
margin: 0 0 20px;
padding: 0 0 20px;
border-bottom: 1px solid #ccc;
}
ul#newsList li:last-of-type{
margin: 0 0 25px;
padding: 0;
border-bottom:none;
}
}

ul#newsList li .up_ymd{
width: 25%;
text-align: center;
margin: 0;
padding: 10px 3% 10px;
border-right: 1px solid #ccc;
align-self:stretch;
display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
ul#newsList li .title{
width: 75%;
padding: 10px 3% 10px;
}
ul#newsList a:link,ul#newsList a:visited{
color: #222;
}
ul#newsList a:hover{
color: #1c9a6b;
}
@media only screen and (max-width: 640px) {
ul#newsList li .up_ymd{
width: 100%;
margin: 0 0 10px;
padding: 0;
border-right: none;
justify-content: flex-start;
align-items: flex-start;
text-align: left;
}
ul#newsList li .title{
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
}

#news iframe{
width: 100%;
height: auto;
margin: 0;
padding: 0;
background: #fff;
}

#news-sub{
width: 100%;
height: auto;
margin: 0;
padding: 0 10%;
}
@media only screen and (max-width: 1440px) {
#news-sub{
padding: 0 5%;
}
}
@media only screen and (max-width: 1280px) {
#news-sub{
padding: 0 0;
}
}

#news-sub ul{
clear: both;
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: left;
}
#news-sub ul li{
width: 100%;
height: auto;
margin: 0 0 40px;
padding: 0 0 40px;
border-bottom: 1px solid #ccc;
text-align: left;
display: flex;
flex-wrap: wrap;
}
#news-sub ul li .up_ymd{
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
text-align: left;
font-size: 16px;
line-height: 100%;
}
#news-sub ul li .title{
clear: both;
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
text-align: left;
font-size: 20px;
font-weight: 600;
line-height: 120%;
}
#news-sub ul li .comment{
width: 100%;
height: auto;
margin: 0;
padding: 0;
text-align: left;
font-size: 18px;
line-height: 180%;
display: flex;
flex-wrap: wrap;
flex-direction: column;
gap: 30px;
}
@media only screen and (max-width: 640px) {
#news-sub ul li .title{
font-size: 18px;
}
#news-sub ul li .comment{
font-size: 16px;
gap: 20px;
}
}

#toi{
width: 100%;
height: auto;
margin: 0;
padding: 100px 20% 80px;
background: #1c9a6b;
}
@media only screen and (max-width: 1440px) {
#toi{
padding: 100px 10% 80px;
}
}
@media only screen and (max-width: 1280px) {
#toi{
padding: 100px 5% 80px;
}
}
@media only screen and (max-width: 1080px) {
#toi{
padding: 80px 0% 70px;
}
}
@media only screen and (max-width: 835px) {
#toi{
padding: 70px 5% 60px;
}
}
@media only screen and (max-width: 640px) {
#toi{
padding: 60px 5% 20px;
}
}
@media only screen and (max-width: 480px) {
#toi{
padding: 50px 5% 40px;
}
}
@media only screen and (max-width: 414px) {
#toi{
padding: 50px 5% 40px;
}
}

#toi h5{
width: 100%;
height: auto;
margin: 0 0 60px;
padding: 0 0 20px;
text-align: center;
line-height: 100%;
color: #fff;
font-weight: 600;
font-size: 40px;
background: linear-gradient(#fff, #fff) no-repeat center bottom / 100px 1px;
}
@media only screen and (max-width: 1280px) {
#toi h5{
margin: 0 0 50px;
font-size: 35px;
}
}
@media only screen and (max-width: 835px) {
#toi h5{
margin: 0 0 40px;
font-size: 30px;
}
}
@media only screen and (max-width: 640px) {
#toi h5{
margin: 0 0 30px;
font-size: 25px;
}
}
@media only screen and (max-width: 480px) {
#toi h5{
margin: 0 0 15px;
}
}
@media only screen and (max-width: 414px) {
#toi h5{
margin: 0 0 30px;
font-size: 20px;
}
}

#toi-area{
display: flex;
justify-content:space-between;
}
.toi-box{
width: 50%;
margin:0;
padding: 0 5%;
border-right: 1px solid #fff;
text-align: left;
display: flex;
align-items: flex-start;
}
.toi-box:last-of-type{
border-right: none;
}
@media only screen and (max-width: 1080px) {
.toi-box{
padding: 0 2%;
}
}
@media only screen and (max-width: 835px) {
#toi-area{
flex-direction: column;
}
.toi-box{
width:100%;
margin:0 0 20px;
padding: 0;
border-right: none;
}
#toi-area .toi-box:first-of-type{
border-left:none;
border-bottom:1px solid #fff;
padding:0 0 20px;
}
}
@media only screen and (max-width: 480px) {
.toi-box{
margin:0;
padding: 0;
}
#toi-area .toi-box:first-of-type{
border-bottom:none;
border-top:none;
}
}

.toi-box img{
width: 20%;
}
.toi-text{
width: 80%;
padding: 0 0 0 5%;
}
@media only screen and (max-width: 835px) {
.toi-box img{
width: 15%;
}
.toi-text{
width: 85%;
padding: 0 0 0 5%;
}
}

.toi-box p{
color: #fff;
font-weight: 500;
margin: 0 0 20px;
font-size: 25px;
line-height: 100%;
}
.toi-box p.ps{
font-size: 16px;
font-weight: 400;
margin: 0;
}
.toi-box:first-of-type p a strong {
font-size: 40px;
}
.toi-box:last-of-type p a strong {
  font-weight: 400;
}
.toi-box p span{
display: none;
}
.toi-box a:link,.toi-box a:visited{
text-decoration: none;
color: #fff;
}
#toi-area .toi-box:last-of-type a:link,#toi-area .toi-box:last-of-type a:visited{
display: block;
margin: 0;
border: 1px solid #fff;
padding: 10px 15px;
font-size: 20px;
color: #fff;
text-align: center;
border-radius: 5px;
background: url(image/toi-ar.png) no-repeat 90% 50%;
}
#toi-area .toi-box:last-of-type a:hover{
background: url(image/toi-ar2.png) no-repeat 90% 50%,#fff;
color: #1c9a6b;
text-decoration: underline;
}
@media only screen and (max-width: 1080px) {
.toi-box:first-of-type p a strong {
font-size:35px;
}
}
@media only screen and (max-width: 835px) {
.toi-box p{
font-size: 20px;
margin: 0 0 20px;
}
.toi-box:first-of-type p a strong {
font-size:35px;
}
}
@media only screen and (max-width: 480px) {
.toi-box p{
margin: 0 0 10px;
}
.toi-box p.bno{
display: none;
}
.toi-box p strong{
display: none;
}
.toi-box p span{
display: inherit;
}
.toi-box p.ps{
font-size: 13px;
}
.toi-box a:link,.toi-box a:visited{
width: 100%;
display: block;
border: 1px solid #fff;
padding: 10px 0;
margin: 0;
font-size: 22px;
text-align: center;
border-radius: 5px;
}
#toi-area .toi-box a:hover{
background: url(image/toi-ar2.png) no-repeat 90% 50%,#fff;
color: #1c9a6b;
}
}

#map{
width: 100%;
height: auto;
margin: 0;
padding: 0;
}
#map iframe{
width: 100%;
height: 400px;
}
@media only screen and (max-width: 1080px) {
#map iframe{
height: 350px;
}
}
@media only screen and (max-width: 835px) {
#map iframe{
height: 300px;
}
}
@media only screen and (max-width: 640px) {
#map iframe{
height: 250px;
}
}
@media only screen and (max-width: 480px) {
#map iframe{
height: 200px;
}
}
@media only screen and (max-width: 414px) {
#map iframe{
height: 150px;
}
}

/* フェードイン(基本) */
.js-fadeUp {
  opacity: 0; 
  transform: translateY(50px);
  transition: opacity .8s, transform 1.2s; 
}
.js-fadeUp.is-inview {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.4s; 
}

#service{
}

#ser-info{
width: 100%;
height: auto;
margin: 0 0 100px;
padding: 0 0 60px;
display: flex;
border-bottom: 1px solid #033f7e;
}
#ser-infotext{
width: 80%;
}
#ser-infopict{
display: none;
width: 45%;
padding: 0 0 0 3%;
}
@media only screen and (max-width: 1280px) {
#ser-info{
flex-direction: column;
}
#ser-infotext{
width:100%;
margin: 0 0 30px;
}
#ser-infopict{
width: 100%;
padding: 0;
}
}
@media only screen and (max-width: 1080px) {
#ser-info{
margin: 0 0 60px;
padding: 0 0 60px;
}
}

#ser-info h2{
font-size: 46px;
font-weight: 800;
line-height: 150%;
margin: 0 0 20px;
text-align: left;
color: #033f7e;
background: none;
}
#ser-info p{
text-align: justify;
font-size: 25px;
margin: 0;
line-height: 180%;
}
#ser-infopict img{
max-width: 47%;
margin: 0 1.5% 20px;
}
@media only screen and (max-width: 1600px) {
#ser-info h2{
font-size: 42px;
}
}
@media only screen and (max-width: 1280px) {
#ser-info h2{
margin: 0 0 0px;
}
#ser-infopict img{
max-width: 23%;
margin: 20px 1% 0;
}
}
@media only screen and (max-width: 835px) {
#ser-infopict img{
max-width: 47%;
margin: 20px 1.5% 0;
}
}
@media only screen and (max-width: 640px) {
#ser-info h2{
font-size: 33px;
}
#ser-info p{
font-size: 20px;
}
}
@media only screen and (max-width: 480px) {
#ser-info h2{
font-size: 30px;
}
#ser-info p{
font-size: 18px;
}
}

.ser-cate{
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 0 0 50px;
display: flex;
align-items: flex-start;
border-bottom: 1px dashed #699bd0;
}
.ser-cate img{
max-width: 35%;
}
.ser-text{
width: 65%;
padding: 0 0 0 5%;
}
@media only screen and (max-width: 1080px) {
.ser-cate{
flex-direction: column;
align-items: center;
margin: 0 0 60px;
padding: 0 0 50px;
}
.ser-cate img{
max-width: 50%;
margin: 0 0 20px;
}
.ser-text{
width: 100%;
padding: 0;
}
}
@media only screen and (max-width: 640px) {
.ser-cate{
margin: 0 0 50px;
padding: 0 0 40px;
}
.ser-cate img{
max-width: 60%;
}
}
@media only screen and (max-width: 480px) {
.ser-cate{
margin: 0 0 40px;
padding: 0 0 30px;
}
.ser-cate img{
max-width: 70%;
}
}
@media only screen and (max-width: 414px) {
.ser-cate img{
max-width: 80%;
}
}

.ser-cate h3{
text-align: left;
font-size: 35px;
font-weight: 800;
color: #033f7e;
line-height: 120%;
margin: 0 0 20px;
padding: 0;
}
.ser-cate h3 img{
margin: 0 1% 0 0;
vertical-align: middle;
max-height: 50px;
}
.ser-cate p{
text-align: justify;
font-size: 20px;
line-height: 180%;
margin: 0 0 40px;
}
@media only screen and (max-width: 835px) {
.ser-cate p{
font-size: 18px;
}
}
@media only screen and (max-width: 640px) {
.ser-cate h3{
font-size: 30px;
margin: 0 0 10px;
}
.ser-cate h3 img{
max-height: 40px;
}
.ser-cate p{
font-size: 16px;
}
}
@media only screen and (max-width: 480px) {
.ser-cate h3{
font-size: 25px;
}
.ser-cate h3 img{
max-height: 35px;
}
}
@media only screen and (max-width: 414px) {
.ser-cate h3{
font-size: 22px;
}
}

.ser-cate h4{
text-align: left;
font-size: 25px;
font-weight: 800;
line-height: 100%;
margin: 0 0 20px;
color: #033f7e;
}
.ser-cate ul{
width: 100%;
height: auto;
margin: 0;
padding: 0 0 0 3%;
display: flex;
flex-wrap: wrap;
}
.ser-cate li{
margin: 0 0 10px;
text-align: left;
font-size: 20px;
width: 50%;
line-height: 120%;
}
@media only screen and (max-width: 835px) {
.ser-cate li{
font-size: 18px;
}
}
@media only screen and (max-width: 640px) {
.ser-cate h4{
font-size: 20px;
}
.ser-cate ul{
padding: 0 0 0 4%;
}
.ser-cate li{
width: 100%;
font-size: 16px;
}
}

#ser-bunya{
width: 100%;
height: auto;
margin: 0;
padding: 0;
display: flex;
}
#ser-bunya-text{
width: 35%;
}
#ser-bunya-pict{
width: 65%;
padding: 0 0 0 5%;
}
@media only screen and (max-width: 1440px) {
#ser-bunya-text{
width: 25%;
}
#ser-bunya-pict{
width: 75%;
}
}
@media only screen and (max-width: 1080px) {
#ser-bunya{
flex-direction: column;
}
#ser-bunya-text{
width: 100%;
}
#ser-bunya-pict{
width: 100%;
padding: 0;
}
}

#ser-bunya h4{
text-align: left;
font-size: 35px;
font-weight: 800;
color: #033f7e;
line-height: 120%;
margin: 0 0 20px;
padding: 0;
}
#ser-bunya h4 img{
margin: 0 1% 0 0;
vertical-align: middle;
max-height: 50px;
}
#ser-bunya p{
text-align: justify;
font-size: 20px;
line-height: 180%;
margin: 0 0 40px;
}
#ser-bunya h5{
width: 100%;
height: auto;
margin: 0 0 10px;
padding:10px 0;
text-align: center;
line-height: 100%;
font-size: 25px;
font-weight: 400;
border: 1px solid #ccc;
border-radius: 50px;
color: #777;
}
@media only screen and (max-width: 1280px) {
#ser-bunya h5{
font-size: 20px;
}
}
@media only screen and (max-width: 835px) {
#ser-bunya h4{
font-size: 30px;
margin: 0 0 10px;
}
#ser-bunya h4 img{
max-height: 40px;
}
#ser-bunya p{
font-size: 18px;
margin: 0 0 30px;
}
}
@media only screen and (max-width: 480px) {
#ser-bunya h4{
font-size: 25px;
margin: 0 0 10px;
}
#ser-bunya h4 img{
max-height: 35px;
}
#ser-bunya p{
font-size: 16px;
}
#ser-bunya h5{
font-size: 18px;
}
}
@media only screen and (max-width: 414px) {
#ser-bunya h4{
font-size: 22px;
}
}

#ser-bunya-pict ul{
display: flex;
flex-wrap: wrap;
}
#ser-bunya-pict li{
list-style-type: none;
margin: 0 0 20px;
padding: 0 1%;
text-align: center;
font-size: 17px;
line-height: 120%;
width: 25%;
}
#ser-bunya-pict li img{
max-width: 100%;
margin: 0 0 10px;
}
@media only screen and (max-width: 835px) {
#ser-bunya-pict ul{
justify-content: flex-start;
padding: 0;
}
#ser-bunya-pict li{
font-size: 16px;
}
}
@media only screen and (max-width: 640px) {
#ser-bunya-pict ul{
margin: 0;
}
#ser-bunya-pict li{
width: 33.3%;
}
}
@media only screen and (max-width: 480px) {
#ser-bunya-pict li{
font-size: 13px;
}
}

#ser-toi{
width: 100%;
height: auto;
margin: 0;
padding: 40px;
background: #f3f7fd;
display: flex;
}
#ser-toi h6{
font-size: 30px;
line-height: 150%;
margin: 0 5% 0 0;
text-align: left;
font-weight: 800;
color: #033f7e;
}
#ser-toi p{
text-align: left;
font-size: 20px;
line-height: 150%;
margin: 0;
}
@media only screen and (max-width: 1280px) {
#ser-toi{
flex-direction: column;
}
#ser-toi h6{
margin: 0 0 20px;
}
}
@media only screen and (max-width: 835px) {
#ser-toi{
padding: 30px;
}
#ser-toi h6{
font-size: 25px;
}
#ser-toi p{
font-size: 18px;
}
}
@media only screen and (max-width: 480px) {
#ser-toi{
padding: 20px;
}
}
@media only screen and (max-width: 414px) {
#ser-toi h6{
font-size: 22px;
}
#ser-toi p{
font-size: 16px;
}
}

#office{
}

#rinen{
width: 100%;
height: auto;
margin: 0 0 140px;
padding:80px 40px 50px;
border: 1px double #ccc;
background: #e9f2f9;
}
#rinen h3{
width: 100%;
height: auto;
margin: 0 0 20px;
padding: 0;
text-align: center;
font-weight: 900;
line-height: 150%;
color: #033f7e;
font-size: 40px;
}
#rinen p{
line-height: 200%;
}
@media only screen and (max-width: 1280px) {
#rinen h3{
font-size:35px;
}
}
@media only screen and (max-width: 835px) {
#rinen{
margin: 0 0 60px;
padding: 35px 35px 20px;
}
#rinen h3{
font-size:30px;
text-align: left;
}
#rinen p{
font-size: 18px;
text-align: justify;
}
}
@media only screen and (max-width: 640px) {
#rinen h3{
font-size:25px;
}
#rinen p{
font-size: 17px;
}
}
@media only screen and (max-width: 480px) {
#rinen{
margin: 0 0 50px;
padding: 30px 30px 20px;
}
#rinen p{
font-size: 16px;
line-height: 180%;
}
}
@media only screen and (max-width: 414px) {
#rinen{
margin: 0 0 50px;
padding: 20px 20px 15px;
}
#rinen h3{
font-size:22px;
text-align: justify;
}
}

#office h4{
width: 100%;
height: auto;
margin: 0 0 50px;
padding: 0;
text-align: center;
font-size: 40px;
font-weight: 700;
line-height: 100%;
}
@media only screen and (max-width: 835px) {
#office h4{
margin: 0 0 20px;
font-size: 30px;
}
}
@media only screen and (max-width: 480px) {
#office h4{
margin: 0 0 20px;
font-size: 25px;
}
}

#office dl{
width: 100%;
height: auto;
margin: 0 0% 50px;
padding: 0;
display: flex;
flex-wrap: wrap;
}
#office dt{
width: 20%;
margin: 0;
padding: 25px 0;
line-height: 150%;
text-align: right;
font-size: 20px;
border-bottom: 1px solid #ccc;
}
#office dd{
width: 80%;
margin: 0;
padding: 25px 0 25px 10%;
line-height: 150%;
text-align: left;
font-size: 20px;
border-bottom: 1px solid #ccc;
}
#office dt:last-of-type,#office dd:last-of-type{
border-bottom: none;
}
@media only screen and (max-width: 1080px) {
#office dt{
font-size: 18px;
}
#office dd{
font-size: 18px;
}
}
@media only screen and (max-width: 835px) {
#office dt{
font-size: 17px;
}
#office dd{
font-size: 17px;
}
}
@media only screen and (max-width: 640px) {
#office dl{
margin: 0 0% 30px;
}
#office dt{
width: 20%;
padding: 15px 0;
font-size: 16px;
}
#office dd{
width: 80%;
padding: 15px 0 15px 5%;
font-size: 16px;
}
}
@media only screen and (max-width: 480px) {
#office dl{
flex-direction: column;
margin: 0 0% 0;
}
#office dt{
width: 100%;
padding: 0;
font-size: 16px;
text-align: left;
border-bottom: none;
font-weight: 600;
}
#office dd{
width:100%;
padding: 5px 0 15px;
margin: 0 0 15px;
font-size: 16px;
}
}

#fea{
}

#fea-info{
}
@media only screen and (max-width: 835px) {
#fea-info p{
text-align: left;
}
}
@media only screen and (max-width: 640px) {
main #fea-info p{
font-size: 18px;
}
}
@media only screen and (max-width: 480px) {
main #fea-info p{
font-size: 16px;
}
}

#fea-area{
width: 100%;
margin: 120px 0 0;
display: block;
justify-content:space-between;
align-items: flex-start;
flex-wrap: wrap;
}
@media only screen and (max-width: 1080px) {
#fea-area{
margin:120px 0 -80px;
}
}
@media only screen and (max-width: 835px) {
#fea-area{
margin: 80px 0 -40px;
}
}
@media only screen and (max-width: 640px) {
#fea-area{
margin: 60px 0 -40px;
}
}

.fea-box{
margin: 0 0 100px;
display: flex;
align-items: flex-start;
justify-content:space-between;
}
#fea-area img{
max-width: 35%;
width: 35%;
height: auto;
}
.fea-text{
width: 65%;
padding: 0 0 0 5%;
text-align: left;
}
.fea-box:nth-child(even) {
flex-direction: row-reverse;
}
.fea-box:nth-child(even) .fea-text {
padding: 0 5% 0 0;
}

@media only screen and (max-width: 835px) {
.fea-box, 
.fea-box:nth-child(even) {
flex-direction: column;
align-items: center;
margin: 0 0 50px;
}  
#fea-area img {
max-width: 60%;
width: 60%;
margin: 0 0 20px 0;
}
.fea-text,
.fea-box:nth-child(even) .fea-text {
width: 100%;
padding: 0;
}
}
@media only screen and (max-width: 640px) {
#fea-area img {
max-width: 70%;
width: 70%;
}
}
@media only screen and (max-width: 480px) {
#fea-area img {
max-width: 80%;
width: 80%;
}
}

#fea h3{
width: 100%;
height: auto;
margin: 0 0 30px;
padding: 0;
text-align: left;
font-size: 35px;
font-weight: 800;
color: #033f7e;
line-height: 130%;
display: flex;
align-items: center;
}
#fea h3 span {
font-size: 40px;
font-weight: 400;
margin: 0 15px 0 0;
display: inline-flex;
align-items: center; 
justify-content: center; 
height: 1.5em;
aspect-ratio: 1 / 1;
line-height: 1;
box-sizing: border-box;
background: #033f7e;
color: #fff;
border-radius: 5px;
}
#fea h4{
width: 100%;
height: auto;
margin: 0 0 15px;
padding: 0;
text-align: left;
font-size: 25px;
font-weight: 800;
line-height: 130%;
}
@media only screen and (max-width: 640px) {
#fea h3{
font-size: 30px;
}
#fea h3 span {
font-size: 35px;
margin: 0 15px 0 0;
}
#fea h4{
font-size: 22px;
}
}
@media only screen and (max-width: 480px) {
#fea h3{
font-size:25px;
margin: 0 0 15px;
}
#fea h3 span {
font-size: 30px;
margin: 0 10px 0 0;
}
#fea h4{
font-size: 20px;
}
}

@media only screen and (max-width: 1080px) {
main #fea p{
font-size: 19px;
}
}
@media only screen and (max-width: 835px) {
main #fea p{
font-size: 18px;
}
}
@media only screen and (max-width: 640px) {
main #fea p{
font-size: 17px;
}
}
@media only screen and (max-width: 480px) {
main #fea p{
font-size: 16px;
text-align: justify;
}
}

#mail{
clear: both;
width: 100%;
height: auto;
margin: 0 0 80px;
padding: 0;
}
#mail-info{
width: 100%;
height: auto;
margin: 0;
padding: 30px 0 50px;
}
@media only screen and (max-width: 1600px) {
#mail{
margin: 0 0 50px;
}
}
@media only screen and (max-width: 1280px) {
#mail{
margin: 0;
}
}
@media only screen and (max-width: 835px) {
#mail-info{
padding: 0 0 30px;
}
}

#mail-area{
display: flex;
justify-content:space-between;
}
.mail-box{
width: 48%;
margin:0 1%;
padding: 25px 5%;
text-align: left;
display: flex;
align-items: flex-start;
background: #fff;
border-radius: 7px;
box-shadow: 0 0 7px #ddd;
}
@media only screen and (max-width: 1080px) {
.mail-box{
padding: 20px 2%;
}
}
@media only screen and (max-width: 835px) {
#mail-area{
flex-direction: column;
}
.mail-box{
width:100%;
margin:0 0 20px;
padding:20px 2%;
}
}
@media only screen and (max-width: 480px) {
.mail-box{
margin:0 0 20px;
padding:15px 2%;
}
}

.mail-box img{
width: 15%;
}
.mail-text{
width: 85%;
padding: 0 0 0 5%;
}
@media only screen and (max-width: 835px) {
.mail-box img{
width: 15%;
}
.mail-text{
width: 85%;
padding: 0 0 0 5%;
}
}

.mail-box p{
color: #033f7e;
font-weight: 500;
margin: 0 0 15px;
font-size: 25px;
line-height: 120%;
}
.mail-box p.ps{
font-size: 16px;
font-weight: 400;
margin: 0;
color: #777;
}
.mail-box:first-of-type p a strong {
font-size: 40px;
}
.mail-box p span{
display: none;
}
.mail-box a:link,.mail-box a:visited{
text-decoration: none;
color: #033f7e;
}
@media only screen and (max-width: 1080px) {
.mail-box:first-of-type p a strong {
font-size:35px;
}
}
@media only screen and (max-width: 835px) {
.mail-box p{
font-size: 20px;
margin: 0 0 20px;
}
.mail-box:first-of-type p a strong {
font-size:35px;
}
}
@media only screen and (max-width: 480px) {
.mail-box p{
margin: 0 0 10px;
font-size: 16px;
}
.mail-box p strong{
display: none;
}
.mail-box p span{
display: inherit;
}
.mail-box p.ps{
font-size: 13px;
}
.mail-box a:link,.maili-box a:visited{
width: 100%;
display: block;
border: 1px solid #033f7e;
background: url(image/toi-ar3.png) no-repeat 90% 50%,#fff;
padding: 10px 0;
margin: 0;
font-size: 22px;
text-align: center;
border-radius: 5px;
}
#mail-area .mail-box a:hover{
background: url(image/toi-ar2.png) no-repeat 90% 50%,#fff;
color: #1c9a6b;
}
}

form{
clear: both;
width:100%;
height: auto;
margin: 0 auto;
padding: 50px 10%;
text-align: center;
background: #fff;
border-radius: 7px;
box-shadow: 0 0 7px #ddd;
}
@media only screen and (max-width: 1080px) {
form{
padding: 40px 5%;
}
}
@media only screen and (max-width: 835px) {
form{
padding: 30px 2%;
}
}
@media only screen and (max-width: 640px) {
form{
padding: 15px;
}
}

.hissu{
font-size: 12px;
border-radius: 5px;
background: #fff;
color:#f54242;
padding: 0 5px 1px;
margin: 0 0 0 2%;
border: 1px solid #f54242;
}
#mail-check{
	clear:both;
	width:100%;
	height:auto;
	margin:10px 0 10px;
	padding:10px 0;
	text-align:center;
}
@media only screen and (max-width: 640px) {
#mail-check{
	clear:both;
	width:100%;
	height:auto;
	margin:0 0 30px;
	padding:0;
	text-align:center;
}
}

table {
	clear:both;
	width:100%;
	margin:5px 0 20px;
    border:none;
    border-collapse:collapse;
    border-spacing:0px;
    empty-cells:show;
    table-layout:auto;
    text-align:left;
	background:#fff;
}
table hr{
border-top:none;
border-left:none;
border-right:none;
border-bottom:none;
}

#sub-page table p{
font-size: 15px;
line-height: 120%;
margin: 0 0 10px;
padding: 0;
}

table caption{
clear: both;
width: 100%;
height: auto;
margin: 0;
padding:25px 0 20px;
text-align: center;
font-size: 25px;
line-height: 100%;
font-weight: 500;
border-radius: 10px 10px 0 0;
background: #9ddbf8;
}
@media only screen and (max-width: 640px) {
table caption{
clear: both;
width: 100%;
height: auto;
margin: 0;
padding:20px 0 15px;
text-align: center;
font-size: 20px;
line-height: 100%;
font-weight: 500;
border-radius: 10px 10px 0 0;
background: #9ddbf8;
}
}

th{
	width:30%;
	text-align:left;
	font-weight: 600;
	padding: 10px;
	font-size: 17px;
	}
td{
	padding: 10px;
	font-size: 17px;
}
@media only screen and (max-width: 1080px) {
th{
	width:30%;
	text-align:center;
	font-weight: normal;
	padding: 10px;
	font-size: 15px;
	}
td{
	padding: 10px;
	font-size: 15px;
}
}
@media only screen and (max-width: 835px) {
th{
width:35%;
	text-align:center;
	font-weight: normal;
	padding: 10px;
	font-size: 14px;
	}
td{
	padding: 10px;
	font-size: 14px;
}
}
@media only screen and (max-width: 640px) {
table {
	clear:both;
	width:100%;
	margin:5px 0 0;
    border-collapse:collapse;
    border-spacing:0px;
    empty-cells:show;
    table-layout:auto;
    text-align:left;
}
th{
clear: both;
float: left;
	width:100%;
	text-align:left;
	font-weight:700;
	border-right:none;
	padding: 0;
	font-size: 15px;
	line-height: 150%;
	}
td{
clear: both;
float: left;
width: 100%;
	border-right:none;
    margin: 0 0 15px;
	padding: 10px 0 20px;
    border-bottom: 1px solid #ccc;
	font-size: 15px;
}
td.bno{
border-bottom:none;
}
#sub-page table p{
font-size: 13px;
line-height: 120%;
margin: 0 0 10px;
padding: 0;
}
}
@media only screen and (max-width: 480px) {
th{
	font-size: 14px;
	line-height: 150%;
	}
td{
	font-size: 14px;
}
}

textarea,input[type="text"] ,input[type="email"]{
width: 100%;
padding: 10px;
}
input[type="text"].s70{
width: 75%;
}
select{
width: 20%;
margin: 0 2% 0 0;
}
@media only screen and (max-width: 640px) {
textarea,input[type="text"] ,input[type="email"]{
width: 100%;
line-height: 150%;
}
input[type="text"].s70{
width: 100%;
margin: 5px 0 0;
}
select{
width: 23%;
margin: 0 2% 0 0;
}
select.s30{
width: 35%;
margin: 0 2% 0 0;
}
}
@media only screen and (max-width: 480px) {
textarea,input[type="text"] ,input[type="email"]{
width: 100%;
padding: 5px;
}
textarea{
font-size: 14px;
}
}

input.btn_submit,input.btn_submit2,input.btn_submit3{
 width:250px;
 height:50px;
 background: url(image/btn1b.png) no-repeat 90% 50%,#033f7e;
 border-radius:7px;
 border: 1px solid #033f7e;
 font-size: 20px;
 font-weight: 500;
 color: #fff;
 line-height: 46px;
}
input.btn_submit2{
   background: url(image/btn2.png) no-repeat 90% 50%,#fff;
 color: #033f7e;
 margin: 0 0 0 2%;
}
input.btn_submit3{
   background: url(image/toi-ar4.png) no-repeat 10% 50%,#fff;
 color: #033f7e;
 margin: 0 0 0 2%;
}
input.btn_submit:hover {
 background:  url(image/btn1b.png) no-repeat 90% 50%,#1c9a6b;
 cursor: pointer;
}
input.btn_submit2:hover {
 background: url(image/btn2b.png) no-repeat 90% 50%,#ddd;
  cursor: pointer;
}
input.btn_submit3:hover {
 background: url(image/toi-ar4.png) no-repeat 10% 50%,#ddd;
  cursor: pointer;
}
@media only screen and (max-width: 640px) {
input.btn_submit,input.btn_submit2,input.btn_submit3{
 width:180px;
 height:40px;
 font-size: 18px;
 line-height: 36px;
}
input.btn_submit:hover {
 background:  url(image/btn1b.png) no-repeat 90% 50%,#1c9a6b;
 cursor: pointer;
}
input.btn_submit2:hover {
 background: url(image/btn2b.png) no-repeat 90% 50%,#ddd;
  cursor: pointer;
}
input.btn_submit3:hover {
 background: url(image/toi-ar4.png) no-repeat 10% 50%,#ddd;
  cursor: pointer;
}
}
@media only screen and (max-width: 480px) {
input.btn_submit,input.btn_submit2,input.btn_submit3{
 width:150px;
 height:40px;
 font-size: 18px;
 line-height: 36px;
 padding: 0 15px 0 0;
 background: url(image/btn1b.png) no-repeat 90% 50%/15px,#033f7e;
}
input.btn_submit2{
   background: url(image/btn2.png) no-repeat 90% 50%/15px,#fff;
}
input.btn_submit3{
   background: url(image/toi-ar4.png) no-repeat 10% 50%/15px,#fff;
 color: #033f7e;
  padding: 0 0 0 15px;
 margin: 0 0 0 2%;
}
input.btn_submit:hover {
 background:  url(image/btn1b.png) no-repeat 90% 50%/15px,#1c9a6b;
 cursor: pointer;
}
input.btn_submit2:hover {
 background: url(image/btn2b.png) no-repeat 90% 50%/15px,#ddd;
  cursor: pointer;
}
input.btn_submit3:hover {
 background: url(image/toi-ar4.png) no-repeat 10% 50%/15px,#ddd;
  cursor: pointer;
}
}
@media only screen and (max-width: 414px) {
input.btn_submit,input.btn_submit2,input.btn_submit3{
 width:120px;
 height:40px;
 font-size: 16px;
 line-height: 36px;
 padding: 0 15px 0 0;
 background: url(image/btn1b.png) no-repeat 90% 50%/15px,#033f7e;
}
input.btn_submit2{
   background: url(image/btn2.png) no-repeat 90% 50%/15px,#fff;
}
input.btn_submit3{
   background: url(image/toi-ar4.png) no-repeat 10% 50%/15px,#fff;
   padding: 0 0 0 15px;
}
input.btn_submit:hover {
 background:  url(image/btn1b.png) no-repeat 90% 50%/15px,#1c9a6b;
 cursor: pointer;
}
input.btn_submit2:hover {
 background: url(image/btn2b.png) no-repeat 90% 50%/15px,#ddd;
  cursor: pointer;
}
input.btn_submit3:hover {
 background: url(image/toi-ar4.png) no-repeat 10% 50%/15px,#ddd;
  cursor: pointer;
}
}

form strong{
color: #ef3876;
}
label{
 cursor: pointer;
}

/*フッタ
--------------------------------------------------------------------------*/
#page-top{
	width:40px;
	height:40px;
	display:none;
	position:fixed;
	right:16px;
	bottom:16px;
	color:#fff;
}
 
#page-top p{
	margin:0;
	padding:0;
	text-align:center;
	background:#1c9a6b;
	transition:all 0.3s;
	color:#fff;
}
 
#page-top p:hover{
	background:#181f59;
	color:#fff;
}
 
#move-page-top{
	color:#fff;
	line-height:40px;
	text-decoration:none;
	display:block;
	cursor:pointer;
}

footer{
width: 100%;
height: auto;
margin: 0;
padding: 50px 10% 20px;
background: #033f7e;
}
@media only screen and (max-width: 1280px) {
footer{
padding: 50px 5% 20px;
}
}
@media only screen and (max-width: 1080px) {
footer{
padding: 40px 5% 20px;
}
}
@media only screen and (max-width: 640px) {
footer{
padding: 20px 5% 10px;
}
}

footer p{
text-align: center;
margin:20px 0 0;
font-size: 16px;
color: #7fa8d3;
}

#footer-area{
display: flex;
justify-content:space-between;
}
@media only screen and (max-width: 1080px) {
#footer-area{
flex-direction: column;
}
footer p{
font-size: 13px;
}
}
@media only screen and (max-width: 640px) {
footer p{
margin:10px 0 0;
}
}

address{
font-style: normal;
color: #fff;
line-height: 120%;
text-align: left;
font-size: 16px;
}
address h6{
width: 100%;
height: auto;
margin: 0 0 10px;
padding: 0;
text-align: left;
font-weight: 500;
line-height: 100%;
color: #fff;
font-size: 25px;
}
@media only screen and (max-width: 1080px) {
address{
text-align:center;
line-height: 100%;
}
address h6{
margin: 0px;
text-align:center;
}
}
@media only screen and (max-width: 835px) {
address h6{
font-size: 20px;
}
}
@media only screen and (max-width: 640px) {
address{
font-size:13px;
}
address h6{
line-height: 100%;
}
}

footer ul{
margin: 0;
padding: 0;
display: flex;
width: 60%;
justify-content:space-between;
}
footer li{
list-style-type: none;
margin: 0 0 0 2%;
}
footer li a:link,footer li a:visited{
color: #fff;
text-decoration: none;
font-size: 16px;
}
footer li a:hover{
text-decoration: underline;
}
@media only screen and (max-width: 1080px) {
footer ul{
display: none;
}
}