@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;400;500;700&family=Noto+Serif+JP:wght@300;400;500;600;700&family=Zen+Kaku+Gothic+Antique:wght@400;500;700&family=Zen+Kurenaido&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200&display=swap');
/*===============================================
●PCレイアウト設定 
===============================================*/
@media screen and  (min-width: 651px){
/* スクロールで出現 */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:2.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateY(40px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


.fadeRight{
animation-name:fadeRightAnime;
animation-duration:2.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateY(-40px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}
.main{
width: 100%;
height: 100vh;
background-image: url("../images/main.png");
background-size: cover
}
.main .logo{
width: 400px;
max-width: 60%;
padding-top: 20vh;
padding-left: 5vw
}
.main .logo img{
width: 100%
}
.main .bt{
padding-left: 5vw;
width: 400px;
max-width: 60%;
display: flex;
flex-wrap: wrap;
justify-content: space-between
}
.main .bt a{
display: block;
background-color: rgba(120,215,200,0.8);
color: #333;
width: 48%;
padding: 10px 0;
font-size: clamp(0.8rem, 1.2vw, 1.6rem); 
text-align: center;
font-family: "Times New Roman", Times, "serif";
border-radius: 20px
}
.about{
font-family: 'Noto Sans JP';
}

/*モーダルウィンドウ*/
.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
	left: 0;
    width: 100%;
	z-index: 9999
}
.modal__bg{

    height: 100vh;
	left: 0;
    position: absolute;
    width: 100%;
}
.modal__content{
	color: #333;
    left: 50%;
    padding: 5%;
    position: absolute;
    top: 10%;
    transform: translateX(-50%);
    width:750px;
	height: 50vh;
	overflow-y: hidden;
	overflow-x: hidden;
	background-color: rgba(255,255,255,0.8);
}
.about .box_flex2{
border-bottom: #666 1px dotted;
padding-bottom: 5px;
margin-bottom: 20px;
}
.about .modal__content .right{
width: 75%;
}
.about .modal__content .left{
width: 20%;
}
.news{
font-family: 'Noto Sans JP';
width: 1000px;
max-width: 90%;
margin: 100px auto
}
.news .inner{
border-bottom: #6666 1px dotted;
margin-bottom: 15px;
}
.news .inner .date{
font-size: 1.2rem
}
.contact{
font-family: 'Noto Sans JP';
width: 1000px;
max-width: 90%;
margin: 100px auto
}
/*お問い合わせ-----------------------------------------*/
.subtitle {
font-family: "Times New Roman", Times, "serif";
font-size: 4.0rem;
font-weight: 400;
color: #CCC;
padding-bottom: 50px
}
.contact .box1{
font-size: 1.7rem;
line-height: 180%;
padding: 0 0 50px 0;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.contact .box_form{
padding-top: 10px;
border-top:#78d5c8 1px solid;
margin: 0 auto
}
.contact table{
	width:100%;
	border-collapse:collapse;
	margin:0;
}
.contact table td{
	border-bottom:#78d5c8 1px solid;
	padding:1%;
	margin-bottom: 0
}
.contact table td:nth-child(1){
width: 35%;
vertical-align: top
}
.contact table textarea {
width: 80%;
height: 10em;
	border:none;
	background-color: #f4f4f4;
}
.contact table label{
	display:block;
}
.contact table input[type="text"]{
	width:60%;
	background-color: #f4f4f4;
	height: 30px;
	border: none;
	margin-bottom: 20px
}
.contact table .num{
	padding-bottom: 20px
}
.contact table input[type="email"]{
	width:50%;
	border:#CCC 1px solid;
}
.contact .check{
padding-top: 20px;
text-align: center
}
.contact .check a{
color: #97215e;
text-decoration: underline
}
.contact input[type="submit"]{
	width:400px;
	text-align:center;
	font-size:1.8rem;
	margin-top:30px;
	margin-bottom:30px;
	display:block;
	cursor:pointer;
	margin-left:auto;
	margin-right:auto;
display: block;
background-color:#5C818C;
color: #FFF;
text-align: center;
font-weight: 600;
padding: 15px 0;
transition: 0.8s;
border: none
}
.contact input[type="submit"]:hover{
background-color: #069
}
.contact .box2{
padding: 30px 0;
text-align: center;
}

/*個人情報-----------------------------------------*/
.privacy{
font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", "メイリオ", sans-serif;
font-weight: 400;
padding: 2%;
width: 1000px;
max-width: 85%;
margin: 100px  auto;
border: #666 1px solid;
}
.privacy .box1{
padding-bottom: 50px
}
.privacy ul{
 padding: 20px 0;
 margin-bottom: 40px;
}
.privacy li{
  border-bottom: #666 1px dotted;
  display: block;
  margin-bottom: 25px;
}
.privacy ol {
background-color: #f4f4f4;
padding: 2%;
font-weight: 600;
margin-top: -20px
}
.pager {
 font-size: 14px
 }
.pager a{
 background-color: #EEE;
 color: #666;
 padding: 3px 15px;
 font-size: 14px
}

.pager{
width: 650px;
padding: 40px 0;
font-size: 1.5rem;
color: #333;
margin: 0 auto
}
.pager a{
display: inline-block;
background-color: transparent ;
color: #333;
font-size: 1.6rem!important;
padding: 4px 10px!important;
border: #036 1px solid
}
.pager .prev{
padding: 4px 30px!important;
background-color: #333;
color: #FFF
}
.pager .next{
padding: 4px 30px!important;
background-color: #333;
color: #FFF
}
.case .pager .dots{
display: inline-block;
padding-right: 6px
}
.pager .current{
display: inline-block;
padding-right: 6px;
font-size: 1.5rem;
font-weight: 600
}
.pager table{
width: 600px;
margin: 0 auto
}
.pager td a{
border: none;
font-size: 2.0rem;
font-weight: 600;
text-decoration: underline;
display: inline-block;
background-color: #F4F4F4;
padding: 4px 15px;
text-align: center
}
.pager td:nth-child(2){
text-align: right;
width: 50%
}
}
/*===============================================
●スマホれいあうと設定 画面の横幅が650px以下
===============================================*/
@media screen and  (max-width: 650px){
/* スクロールで出現 */

.fadeLeft{
animation-name:fadeLeftAnime;
animation-duration:2.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeLeftAnime{
  from {
    opacity: 0;
  transform: translateY(40px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}


.fadeRight{
animation-name:fadeRightAnime;
animation-duration:2.5s;
animation-fill-mode:forwards;
opacity:0;
}
@keyframes fadeRightAnime{
  from {
    opacity: 0;
  transform: translateY(-40px);
  }

  to {
    opacity: 1;
  transform: translateY(0);
  }
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/
 
.fadeLeftTrigger,
.fadeRightTrigger{
    opacity: 0;
}
.main{
width: 100%;
height: 100vh;
background-image: url("../images/main.png");
background-size: cover
}
.main .logo{
width: 400px;
max-width: 60%;
padding-top: 30vw;
padding-left: 5vw
}
.main .logo img{
width: 100%
}
.main .bt{
padding-left: 5vw;
width: 70%;
display: flex;
flex-wrap: wrap;
justify-content: space-between
}
.main .bt a{
display: block;
background-color: rgba(120,215,200,0.8);
color: #333;
width: 48%;
padding: 10px 0;
font-size: 1.8rem;
text-align: center;
font-family: "Times New Roman", Times, "serif";
border-radius: 20px
}
.about{
font-family: 'Noto Sans JP';
}

/*モーダルウィンドウ*/
.modal{
    display: none;
    height: 100vh;
    position: fixed;
    top: 0;
	left: 0;
    width: 100%;
	z-index: 9999
}
.modal__bg{

    height: 100vh;
	left: 0;
    position: absolute;
    width: 100%;
}
.modal__content{
	color: #333;
    left: 50%;
    padding: 5%;
    position: absolute;
    top: 10%;
    transform: translateX(-50%);
    width:70%;
	height: 80vh;
	overflow-y: hidden;
	overflow-x: hidden;
	background-color: rgba(255,255,255,0.9);
}
.about .box_flex2{
border-bottom: #666 1px dotted;
padding-bottom: 5px;
margin-bottom: 20px;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
font-size: 1.3rem
}
.about .modal__content .right{
width: 75%;
}
.about .modal__content .left{
width: 20%;
}
.news .inner{
border-bottom: #6666 1px dotted;
margin-bottom: 15px;
}
.news{
font-family: 'Noto Sans JP';
padding-top: 100px;
width: 90%;
margin: 0 auto;
}
.news .subtitle{
width: 100%		
	}
.news .inner .date{
font-size: 1.2rem
}
/*お問い合わせ-----------------------------------------*/
.contact{
font-family: 'Noto Sans JP';
padding-top: 100px;
}
.subtitle {
font-family: "Times New Roman", Times, "serif";
font-size: 3.5rem;
font-weight: 400;
color: #999;
padding-bottom: 50px;
width: 90%; 
margin: 0 auto
}
.contact .box1{
width: 85%;
margin: 0 auto;
font-size: 1.5rem;
line-height: 220%;
padding: 0 0 50px 0;
}

.contact .box_form{
width: 90%;
padding-top: 20px;
padding-bottom: 100px;
margin: 0 auto
}
.contact table{
	width:100%;
	border-collapse:collapse;
	margin:0;
}
.contact table td{
	padding:1%;
	display: block;
}
.contact table td:nth-child(1){
vertical-align: top
}
.contact table td:nth-child(2){
	border-bottom:#78d5c8 1px solid;
	padding-bottom: 20px;
	padding-top: 20px;
}
.contact table td .flex_komoku{

}
.contact table td .flex_komoku .left{
display: inline-block;
margin-right: 5px
}
.contact table td .flex_komoku .right{
display: inline-block;

text-align: center;
color: #C00;
border-radius: 3px
}
.contact table textarea {
width: 90%;
height: 10em;
	border:none;
	background-color: #f4f4f4;
}
.contact table label{
	display:block;
}
.contact table input[type="text"]{
	width:90%;
	background-color: #f4f4f4;
	height: 30px;
	border: none;
	margin-bottom: 20px;
	display: block
}
.contact table .num{
	padding-bottom: 20px
}
.contact table input[type="email"]{
	width:50%;
	border:#CCC 1px solid;
}
.contact .check{
padding-top: 20px;
text-align: center
}
.contact .check a{
color: #97215e;
text-decoration: underline
}
.contact input[type="submit"]{
	width:80%;
	text-align:center;
	font-size:1.8rem;
	margin-top:30px;
	margin-bottom:30px;
	display:block;
	cursor:pointer;
	margin-left:auto;
	margin-right:auto;
background-color:#5C818C;
color: #FFF;
font-weight: 600;
padding: 15px 0;
transition: 0.8s;
border: none
}
.contact .box2{
padding: 30px 0;
text-align: center;
}
/*個人情報-----------------------------------------*/
.privacy{
font-weight: 400;
padding: 2%;
width: 90%;
margin: 100px  auto;
border: #666 1px solid;
}
.privacy .box1{
padding-bottom: 50px
}
.privacy ul{
 padding: 20px 0;
 margin-bottom: 40px;
}
.privacy li{
  border-bottom: #666 1px dotted;
  display: block;
  margin-bottom: 25px;
}
.privacy ol {
background-color: #f4f4f4;
padding: 2%;
font-weight: 600;
margin-top: -20px
}

.pager{
width: 80%;
padding-top: 40px;
font-size: 1.5rem;
color: #333;
margin: 0 auto
}
.pager a{
display: inline-block;
background-color: transparent ;
color: #333;
font-size: 1.6rem!important;
padding: 4px 10px!important;
border: #036 1px solid;
margin-bottom: 20px
}
.pager .prev{
padding: 4px 30px!important;
background-color: #333;
color: #FFF
}
.pager .next{
padding: 4px 30px!important;
background-color: #333;
color: #FFF
}
.pager .dots{
display: inline-block;
padding-right: 6px
}
.pager .current{
display: inline-block;
padding-right: 6px;
font-size: 1.5rem;
font-weight: 600
}
}