@charset "UTF-8";

/* #############################################
 parallax.css
############################################# */
html{
 scroll-behavior:smooth;
}



/* #############################################
 共通設定
############################################# */
body{
/* background-color:#aaa;*/
}

.contents{
 display:block;
}



/* #############################################
 個別設定
############################################# */
/* +++++++++++++++++++++++++++++++++++++++++++++
 0-2-3(0/7) SECTION ナビゲーション
+++++++++++++++++++++++++++++++++++++++++++++ */
.nav{
 display:none;
 position:fixed;
 top:0;
 bottom:0;
 left:0;
 height:100%;
 list-style:none;
 margin-left:200px;
 z-index:997;
}

@media (min-width:500px) and (min-height:375px) {
.nav{
 display:block;
}
}

.nav:before{
 border-left:2px solid rgba(0, 0, 255, 0.3);
 content:"";
 position:absolute;
 top:0;
 bottom:0;
 height:100%;
 left:49px;
}

.dot-nav{
 list-style:none;
 position:relative;
 padding-left:40px;
 z-index:5;
}

.dot-nav a{
 display:inline-block;
 background:#aaf;
 width:20px;
 height:20px;
 border-radius:100%;
 vertical-align:middle;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 :hover 疑似クラス
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.dot-nav a:hover{
/* -webkit-transition:all 0.15s ease-in-out;*/
 transition:all 0.15s ease-in-out;
 background-color:#e53333;
/* -webkit-transform:scale(2);*/
/* -ms-transform:scale(2);*/
 transform:scale(2);
}

.dot-nav a.active{
 background-color:#e53333;
/* -webkit-transform:scale(2);*/
/* -ms-transform:scale(2);*/
 transform:scale(2);
}

.dot-nav li{
 margin:25px 0;
}

.dot-nav li span{
 position:fixed;
 vertical-align:middle;
 color:#fff;
 background:#000;
 font-size:14px;
 padding:2px 7px;
 margin-top:-4px;
 margin-left:25px;
 border-radius:4px;
/* -webkit-transition: opacity 0.3s ease-in-out;*/
 transition:opacity 0.3s ease-in-out;
 opacity:0;
}

.dot-nav li span b{
 display:block;
 font-size:18px;
 line-height:1;
 margin-bottom:5px;
}

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 :hover 疑似クラス
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.dot-nav li a:hover + span{
 opacity:1;
}



/* +++++++++++++++++++++++++++++++++++++++++++++
 0-2-3(7/7) SECTION 共通
+++++++++++++++++++++++++++++++++++++++++++++ */
.main{
 position:relative;
}

.page-block{
 padding:10vh 5vw;
}

.content{
 width:100%;
 min-height:100vh;
 color:#00f;
 background-color:rgba(255,255,255,0.7);
/* background-color:rgba(244,244,244,0.7);*/
 padding:3% 5%;
 border-radius:50px;
 margin:0 auto;
}

.main h2{
 color:#00f;
 font-family:'roboto', serif;
 font-size:4.5vw;
 line-height:1.125;
 letter-spacing:-3px;
 text-shadow:1px 1px 1px #000;
 margin-bottom:10px;
}

.main h3{
 color:#f00;
 font-family:helvetica, sans-serif;
 font-size:2.5vw;
 font-weight:400;
/* line-height:0.85;*/
 line-height:1.5;
 text-transform:uppercase;
 text-shadow:1px 1px 1px #000;
 padding-bottom:15px;
 border-bottom:2px solid rgba(0, 0, 255, 0.9);
 box-shadow: 0 1px 0 rgba(255,0,0,0.9);
 margin-bottom:35px;
}

.main .tel{
 width:50px;
 height:50px;
/* color:#000;*/
 text-align:center;
/* border:1px solid #00f;*/
/* background-color:#fff;*/
 float:left;
}

.main .tel i{
 display:block;
 line-height:50px;
 font-size:35px;
 color:#00f;
 animation:anime-tel 5s linear infinite;
 animation-duration:10s;
 transform:scale(1.0) rotate(0deg);
}

.main .tel2{
 font-size:2.5vw;
 line-height:50px;
 margin-bottom:20px;
}

.content .p{
 padding:2vw;
 margin-top:2vh;
}

.content .p p{
 color:#000;
 font-size:1.3vw;
 font-weight:bold;
 line-height:1.5;
 text-shadow:none;
 font-family:inherit;
}

.main .tel2 ul{
 display:flex;
}

.main .tel2 ul li{
/* display:block;*/
 color:#00f;
 font-size:1.0vw;
 line-height:50px;
 text-shadow:none;
 padding-bottom:0;
}

.main p{
/* clear:both;*/
 color:#000;
 font-family:georgia, times, serif;
 font-size:2vw;
 font-weight:normal;
 line-height:1.5;
 text-shadow:1px 1px 1px #00f;
}

.main a{
 font-size:1vw;
 line-height:3vh;
 text-shadow:1px 1px 1px #aaa;
}

.main p.content-a
,.main li
{
 color:#000;
 font-size:1.2vw;
 text-shadow:1px 1px 1px #330;
 padding-left:3vw;
 padding-bottom:1vh;
}

.main p.content-b
{
 color:#000;
 font-size:1.2vw;
 text-shadow:1px 1px 1px #330;
 padding-left:5vw;
 padding-bottom:1vh;
}


/* ADD 2021/12/26 START */
/* UPDATE 2022/12/18 */
.five{
  color: #000;
}
.five h3{
  font-size: 2.0vw;
  border: none;
  box-shadow: none;
}
.five table
,.five dl.ryoukin2{
  width: 100%;
  text-align: center;
  font-size: 1.5vw;
  margin: 0 10px 50px;
}
.five th
,.five td
{
  padding: 10px;
}

.five .sp_exp th
,.five .sp_exp td{
  padding: 5px 0;
}
/* .five .sp_exp td{
  text-align: right;
} */
.five .sp_exp tr:nth-of-type(2) td
,.five .sp_exp tr:nth-of-type(6) td
,.five .sp_exp tr:nth-of-type(8) td{
  text-align: right;
  padding-right: 5px;
}

.five .sp_ryoukin
,.five table.ryoukin2
,.five .sp_exp{
  display: none;
}

.five .ryoukin
,.five .sp_ryoukin{
  background-color: #000;
}
.five .ryoukin tr:nth-of-type(1)
,.five .sp_ryoukin tr:nth-of-type(1)
,.five .sp_ryoukin tr:nth-of-type(2){
  color: #0d750d;
  font-weight: bold;
  background-color: #ccc;
}
.five .ryoukin tr:nth-of-type(2) th
,.five .sp_ryoukin tr:nth-of-type(3) th{
  color: #00f;
}
.five .ryoukin tr:nth-of-type(n+2)
,.five .sp_ryoukin tr:nth-of-type(n+3){
  background-color: #fff;
}

.five .ryoukin2{
  font-size: 1.3vw;
}
.five .ryoukin2 th{
  width: 7.5em;
}
.five .ryoukin2 th
,.five div.ryoukin2 dl:nth-of-type(1) dt
{
  color: #00f;
}
.five .ryoukin2 tr:nth-of-type(1) th
,.five div.ryoukin2 dl:nth-of-type(2) dt
{
  color: #0d750d;
}
.five .ryoukin2 td{
  line-height: 1.5;
  text-indent: 1em;
  text-align: left;
}

.five div.ryoukin2 dl{
  /* display: flex; */
  /* flex-wrap: wrap; */
  display: table;
  width: 100%;
}

.five div.ryoukin2{
  margin: 0 10px 50px;
}
.five div.ryoukin2 dl{
  padding: 20px 0;
}
.five div.ryoukin2 dt{
  display: table-cell;
  width: 7.5em;
  text-align: center;
  vertical-align: middle;
  font-weight: bold;
  font-size: 1.5vw;
  margin: 0;
  /* padding: 10px; */
}
.five div.ryoukin2 dd{
  display: table-cell;
  /* width: 80%; */
  text-align: left;
  text-indent: 1em;
  font-size: 1.3vw;
  margin: 0;
  /* padding: 10px; */
}

.five p{
  color: #000;
  font-size: 1.3vw;
  text-shadow: none;
  padding: 0 0 50px 40px;
}

.five .exp
,.five .sp_exp{
  /* border: 10px double #fff; */
  /* border: 10px double #666; */
  border: 3px solid #666;
  /* background-color: #ccc; */
  background-color: #fff;
}
.five .exp caption
,.five .sp_exp caption{
  text-align: left;
  padding: 10px;
}
.five .exp tr
,.five .sp_exp tr{
  text-align: center;
}
.five .sp_exp tr:nth-of-type(even) th{
  text-align: left;
  padding-left: 5px;
}
.five .sp_exp tr:nth-of-type(1) td{
  padding: 10px 0 20px;
}
.five .sp_exp tr:nth-of-type(2){
  color: #0d750d;
}
.five .sp_exp tr:nth-of-type(4) th
,.five .sp_exp tr:nth-of-type(6) th{
  color: #00f;
}
.five .sp_exp tr:nth-of-type(8){
  color: #f00;
}

.five .exp tr:nth-of-type(2) th:nth-of-type(1)
,.five .exp tr:nth-of-type(3) td:nth-of-type(1)
,.five .exp tr:nth-of-type(4) td:nth-of-type(1){
  color: #0d750d;
}
.five .exp tr:nth-of-type(2) th:nth-of-type(3)
,.five .exp tr:nth-of-type(2) th:nth-of-type(5)
,.five .exp tr:nth-of-type(5) td:nth-of-type(3)
{
  color: #00f;
}
.five .exp tr:nth-of-type(2) th:nth-of-type(7)
,.five .exp tr:nth-of-type(3) td:nth-of-type(4)
,.five .exp tr:nth-of-type(4) td:nth-of-type(3)
,.five .exp tr:nth-of-type(5) td:nth-of-type(4)
{
  color: #f00;
}

.five dt{
  font-size: 1.5vw;
  font-size: 2vw;
  line-height: 2;
}
.five dt span{
  color: #f00;
}
.five dd{
  font-size: 1.3vw;
  line-height: 2;
  padding-left: 1em;
  margin-bottom: 50px;
}
/* ADD 2021/12/26   END */



/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 :hover 疑似クラス
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.main li:hover{
 color:#00f;
}

.main span.h1-span{
 display:inline-block;
 color:#f00;
 font-size:2.5vw;
 padding-top:5vh;
}

.main span.h2-span{
 display:inline-block;
 color:#fa0;
 font-size:2vw;
 padding-top:5vh;
}

.main span.red0{
 display:inline-block;
 color:#f00;
 font-size:1.5vw;
 padding:2vh 0;
}

.main .p-span{
 padding-left:1vw;
}

.img01{
 text-align:center;
 width:100%;
 height:auto;
}

.menu{
 overflow:hidden;
}

.menu li{
 padding:0;
}

.menu a{
 display:block;
 color:#00f;
 font-family:georgia, times, serif;
 font-size:2vw;
 font-weight:bold;
 line-height:1.5;
 text-shadow:1px 1px 1px #000;
 padding:2px;
}

.menu li:nth-child(1){
 animation:anime-menua01 3s linear;
/* animation-duration:5s;*/
}

.menu li:nth-child(2){
 animation:anime-menua02 3s linear;
/* animation-duration:5s;*/
}

.menu li:nth-child(3){
 animation:anime-menua03 3s linear;
/* animation-duration:5s;*/
}

.menu li:nth-child(4){
 animation:anime-menua04 3s linear;
/* animation-duration:5s;*/
}

.menu li:nth-child(5){
 animation:anime-menua05 3s linear;
/* animation-duration:5s;*/
}

.menu li:nth-child(6){
 animation:anime-menua06 3s linear;
/* animation-duration:5s;*/
}

@keyframes anime-menua01{
 0%{transform:translateX(100%);opacity:0;}
 100%{transform:translateX(0);opacity:1;}
}

@keyframes anime-menua02{
 0%{transform:translateX(100%);opacity:0;}
 5%{transform:translateX(100%);opacity:0;}
 100%{transform:translateX(0);opacity:1;}
}

@keyframes anime-menua03{
  0%{transform:translateX(100%);opacity:0;}
 10%{transform:translateX(100%);opacity:0;}
 100%{transform:translateX(0);opacity:1;}
}

@keyframes anime-menua04{
  0%{transform:translateX(100%);opacity:0;}
 15%{transform:translateX(100%);opacity:0;}
 100%{transform:translateX(0);opacity:1;}
}

@keyframes anime-menua05{
  0%{transform:translateX(100%);opacity:0;}
 20%{transform:translateX(100%);opacity:0;}
 100%{transform:translateX(0);opacity:1;}
}

@keyframes anime-menua06{
  0%{transform:translateX(100%);opacity:0;}
 25%{transform:translateX(100%);opacity:0;}
 100%{transform:translateX(0);opacity:1;}
}

.menu i{
 color:#f00;
 font-size:1.5vw;
 margin-left:1vw;
 margin-right:1vw;
}
/*
.menu-a{
 display:inline-block;
}
*/

/* ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 :hover 疑似クラス
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
.menu a:hover{
 color:#f00;
 background:url(../img/arrow.jpg) no-repeat center left/5%;
 padding-left:50px;
}


/* +++++++++++++++++++++++++++++++++++++++++++++
 0-2-3(7/7) SECTION 背景画像
+++++++++++++++++++++++++++++++++++++++++++++ */
#one{
 background:linear-gradient(to top, rgba(130,150,150, 0.5) 0%,rgba(100, 100, 100, 0.4) 100%), url(../img/parallax01.jpg) no-repeat center bottom/cover fixed;
/* background-image:url(../img/parallax01.jpg);*/
/* background-repeat:no-repeat;*/
/* background-position:center bottom;*/
/* background-size:cover;*/
/* background-attachment:fixed;*/
}

#two{
 background:linear-gradient(to top, rgba(130,150,150, 0.5) 0%,rgba(100, 100, 100, 0.4) 100%), url(../img/parallax02.jpg) no-repeat center bottom/cover fixed;
}

#three{
 background:linear-gradient(to top, rgba(130,150,150, 0.5) 0%,rgba(100, 100, 100, 0.4) 100%), url(../img/parallax03.jpg) no-repeat center bottom/cover fixed;
}

#four{
 background:linear-gradient(to top, rgba(130,150,150, 0.5) 0%,rgba(100, 100, 100, 0.4) 100%), url(../img/parallax04.jpg) no-repeat center bottom/cover fixed;
}

#five{
 background:linear-gradient(to top, rgba(130,150,150, 0.5) 0%,rgba(100, 100, 100, 0.4) 100%), url(../img/parallax05.jpg) no-repeat center center/cover fixed;
}

#six{
 background:linear-gradient(to top, rgba(130,150,150, 0.5) 0%,rgba(100, 100, 100, 0.4) 100%), url(../img/parallax06.jpg) no-repeat center center/cover fixed;
}

#seven{
 background:linear-gradient(to top, rgba(130,150,150, 0.5) 0%,rgba(100, 100, 100, 0.4) 100%), url(../img/parallax14.jpg) no-repeat center center/cover fixed;
}



/* #############################################
 レスポンシヴウェブデザイン（RWD）
############################################# */
/* =============================================
 ♦メディアクエリー設定（ブレイクポイント）
============================================= */
@media screen and (max-width:1100px){
/* #############################################
 レイアウト設定
############################################# */
.nav{
 margin-left:19vw;
}

.main .tel2 ul{
/* display:block;*/
}

.main h2{
 font-size:5vw;
}

.content{
 border-radius:25px;
}


.five .ryoukin2 th{
  padding: 0;
}

.five p{
  font-size: 1.5vw;
  padding: 0 15px 30px;
}

.five .exp th
,.five .exp td
{
  padding: 10px 3px;
}

}



@media screen and (max-width:767px){
/* #############################################
 レイアウト設定
############################################# */
.content .p p{
 font-size:3vw;
}

.main .menu a{
 font-size:4.0vw;
}

.main .menu i{
/* font-size:3.5vw;*/
 font-size:3.0vw;
 margin-right:2vw;
}

.main .tel2{
 font-size:5vw;
}

.main .tel2 ul li{
 font-size:2.2vw;
 line-height:1.8;
}

.nav{
 margin-left:0;
}

.nav:before{
 left:24px;
}
.dot-nav{
 padding-left:15px;
}

.main h3{
 font-size:3vw;
}

.page-block{
/* padding:5vh 2vw 5vh 9vw;*/
 padding:5vh 2vw;
}

.content{
 border-radius:5px;
}

.five table.ryoukin2{
  display: none;
}
.five div.ryoukin2{
  display: block;
}

.five table{
  font-size: 2.5vw;
  margin: 0 0 30px;
}

.five .ryoukin2 th
,.five .ryoukin2 td
{
  /* width: 10em; */
  font-size: 2.9vw;
  text-align: left;
  padding: 1px;
}

.five div.ryoukin2{
  margin: 0 0 30px;
}
.five div.ryoukin2 dl
,.five div.ryoukin2 dt
,.five div.ryoukin2 dd
{
  display: block;
  width: 100%;
  text-align: left;
  font-size: 3.0vw;
  /* padding: 15px 0 0; */
}
.five div.ryoukin2 dt{
  padding-left: 0.5em;
  border-left: 10px solid #000;
  border-bottom: 1px solid #000;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}
.five div.ryoukin2 dd{
  font-size: 2.5vw;
  padding: 5px 20px;
}

.five p{
  font-size: 2.3vw;
  padding: 0 10px 30px;
}

.five .exp th
,.five .exp td
{
  padding: 5px;
}

.five dt{
  font-size: 3vw;
}
.five dd{
  font-size: 2.5vw;
}

}



@media screen and (max-width:499px){
/* #############################################
 レイアウト設定
############################################# */
.content .p p{
 font-size:4vw;
}

.main .menu a{
 font-size:6.0vw;
}

.main .menu i{
/* font-size:3.5vw;*/
 font-size:5.0vw;
 margin-right:2vw;
}

.main .tel2{
 font-size:7vw;
}

.main .tel2 ul{
 display:block;
}

.main .tel2 ul li{
 font-size:4vw;
 line-height:1.8;
}

.main h2{
 font-size:8vw;
}

.main h3{
 font-size:4vw;
}

.main p{
 font-size:3.5vw;
}

.main a{
 font-size:2.5vw;
}

.main p.content-b{
 font-size:2.5vw;
 padding-left:7vw;
}

.main span.h1-span{
 font-size:6vw;
}

.main span.h2-span{
 font-size:4vw;
}

.main span.red0{
 font-size:3.0vw;
}

.page-block{
 padding:5vh 1vw;
}

.content{
 border-radius:5px;
}

#five .content{
  padding-right: 5px;
  padding-left: 10px;
}
.five table{
  /* font-size: 3vw; */
  margin: 0 0 30px;
}

.five .ryoukin2 th{
  /* width: 14em; */
  padding: 0;
}

.five p{
  font-size: 2.3vw;
  padding: 0 0 30px;
}

.five .exp{
  border: 1px solid #666;
}
.five .exp th
,.five .exp td
{
  padding: 5px 0;
}

.five .ryoukin
,.five .exp{
  display: none;
}

.five .sp_ryoukin
,.five .sp_exp{
  display: table;
  font-size: 4vw;
}

}