/*
Theme Name: 都城北ロータリークラブ
Description: ロータリークラブのサイト
Version: xxx
Author: xxx
*/


@charset "utf-8";



/*Font Awesome
---------------------------------------------------------------------------*/
@import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.2/css/all.min.css");

/*Google Fonts
---------------------------------------------------------------------------*/
@import url('https://fonts.googleapis.com/css2?family=Reddit+Sans:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');




/*CSSカスタムプロパティ
---------------------------------------------------------------------------*/
:root {
	--text-color: #333;				/*テキストカラー*/

	--primary-color: #379237;		/*テンプレートのメインとなる色*/
	--primary-text-color: #fff;		/*メインカラーの上で使うテキスト色*/
	
	--global-space: 5vw;			/*サイト内の左右へとる余白を一括管理しています。画面幅100%＝100vwです。*/
}





/*fadeInのキーフレーム設定（テキストのフェードインに使用）
---------------------------------------------------------------------------*/
@keyframes fadeIn {
	0% {opacity: 0;transform: scale(0.8);}
	100% {opacity: 1;transform: scale(1);}
}


/*全体の設定
---------------------------------------------------------------------------*/
body * {box-sizing: border-box;}
html,body {
	/*height: 100%;*/
	font-size: 13px;
	margin: 0;
  padding: 0;
  overflow-x: hidden;	/*基準となるフォントサイズ。*/

}

body{
	scroll-padding-top: 120px; /* ヘッダーの高さを入力 */
    scroll-behavior: smooth;
}

html {
  /* 下２つの数字は環境似合わせて変えてね */
  /* 95px：変数が取得できなかった場合の初期値 */
  /* 20px：スクロール時の上部のゆとり */
  scroll-padding-top: calc((var(--headerHeight, 100px)) + 10px); 
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

		html, body {
			font-size: 16px;	/*基準となるフォントサイズ。*/
		}

	}/*追加指定ここまで*/


body {
	margin: 0;padding:0;
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", Meiryo, "メイリオ", "Osaka", "MS PGothic", "ＭＳ Ｐゴシック", sans-serif;	
	font-optical-sizing: auto;
	/*font-weight: 300;*/
	-webkit-text-size-adjust: none;
	background: #fff;	/*背景色*/
	color: var(--text-color);	
	line-height: 2;		/*行間*/

}

/*リセット*/
figure {margin: 0;}
dd {margin: 0;}
nav,ul,li,ol {margin: 0;padding: 0;}
nav ul {list-style: none;}

/*table全般の設定*/
table {border-collapse:collapse;}

/*画像全般の設定*/
img {border: none;max-width: 100%;height: auto;vertical-align: middle;}

/*videoタグ*/
video {max-width: 100%;}

/*iframeタグ*/
iframe {width: 100%;}

/*他*/
input {font-size: 1rem;}
section + section {
	margin-top: 3rem;
}

section{
	margin-bottom: 8rem;
}

section.other{
	padding-top: 8rem;
	padding-bottom: 10rem;
	
}
* { 
    margin: 0px; 
    padding: 0px; 
}

#contents section:nth-child(3){
	background-color: #0060b0;
}

/*リンクテキスト全般の設定
---------------------------------------------------------------------------*/
a {
	color: var(--text-color);	
	transition: 0.3s;
	word-break: break-all;
	text-decoration: none;	
}

/*マウスオン時*/
a:hover {
	text-decoration: none;	
	color: #0060b0;	
}


/*コンテナー（サイト全体を囲むブロック）
---------------------------------------------------------------------------*/
body:not(.home) #container {
	height: 100%;
	display: flex;
	flex-direction: column;	/*子要素を縦並び*/
	justify-content: space-between;	
}


#container{
overflow: auto;
}


/*コンテンツ（フッター関連「以外」を囲むブロック）
---------------------------------------------------------------------------*/
#contents {
	flex: 1;
	/*padding: var(--global-space);	/*/
}



/*header
---------------------------------------------------------------------------*/
/*ヘッダーブロック*/
header {
	display: flex;					
	align-items: center;			
	justify-content: space-between;
	height: 120px;					
	padding: 1vw 2vw;				
	font-family: "Reddit Sans", "Noto Sans JP", sans-serif;
	font-optical-sizing: auto;
	font-weight: 700;
	font-style: normal;
    /*position: absolute;*/
    z-index: 100;
    width: 100%;
	background-color: #ffffff;
	transition: 0.5s;
}

.header.scroll {
  background-color: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {
	
	/*ヘッダーブロック*/
	header {
		position: fixed;	
	}
	
	}

/*ロゴ（※画像にする場合）*/
#logo img {
	display: block;
	width: 15rem;	
}

@media screen and (max-width: 768px) {
	.swiper-horizontal{
		margin-top: 5rem;
	}

	#main_catch .img01 img{
	position: absolute;
        top: 16%;   /* 親要素の高さに対して20%の位置 */
  left: 10%;  /* 親要素の幅に対して10%の位置 */
  width: 27%; /* レスポンシブにするため%で指定 */
        height: auto;
        z-index: 2;
}

#main_catch .img02 img{
	position: absolute;
        top: 29%;   /* 親要素の高さに対して20%の位置 */
  left: 10%;  /* 親要素の幅に対して10%の位置 */
  width: 45%; /* レスポンシブにするため%で指定 */
        height: auto;
        z-index: 2;
}

#main_catch .img03 img{
	position: absolute;
        top: 64%;   /* 親要素の高さに対して20%の位置 */
  left: 10%;  /* 親要素の幅に対して10%の位置 */
  width: 23%; /* レスポンシブにするため%で指定 */
        height: auto;
        z-index: 2;
    
}
}
@media screen and (max-width:650px) {
#logo img {
	width: 42%;	
}

}

/*ロゴ（テキストにする場合）*/
#logo a {
	display: block;text-decoration: none;
	font-size: 1.2rem;	
	font-weight: 800;	
}

/*TOPへ戻るボタン*/
/* ページトップボタン */

/* ページトップボタン */
#p-scroll {
  position: fixed;
  bottom: 50px;
  right: 50px;
}
#p-scroll a {
  text-align: center;
  text-decoration: none;
  background: #99FFFF;
  color: #fff;
  padding: 1rem;
    border-radius: 3rem;
}
#p-scroll a:hover {
  background: #33FFFF;
}



/*トップのエフェクト文字*/

.typing-container {
      padding: 1rem 0;
    text-align: left;
}

.typing-text {
  font-size: 2.5rem;
  font-weight: bold;
  color: #2c3e50;
  font-family: 'Helvetica Neue', Arial, sans-serif;
}

.typing-text span {
  opacity: 0;
  animation: typeIn 0.1s ease-in-out forwards;
}

/* 各文字に遅延時間を設定 */
.typing-text span:nth-child(1) { animation-delay: 0.1s; }
.typing-text span:nth-child(2) { animation-delay: 0.2s; }
.typing-text span:nth-child(3) { animation-delay: 0.3s; }
.typing-text span:nth-child(4) { animation-delay: 0.4s; }
.typing-text span:nth-child(5) { animation-delay: 0.5s; }
.typing-text span:nth-child(6) { animation-delay: 0.6s; }
.typing-text span:nth-child(7) { animation-delay: 0.7s; }
.typing-text span:nth-child(8) { animation-delay: 0.8s; } /* space */
.typing-text span:nth-child(9) { animation-delay: 0.9s; }
.typing-text span:nth-child(10) { animation-delay: 1.0s; }
.typing-text span:nth-child(11) { animation-delay: 1.1s; }
.typing-text span:nth-child(12) { animation-delay: 1.2s; }
.typing-text span:nth-child(13) { animation-delay: 1.3s; }
.typing-text span:nth-child(14) { animation-delay: 1.4s; }
.typing-text span:nth-child(15) { animation-delay: 1.5s; }
.typing-text span:nth-child(16) { animation-delay: 1.6s; }
.typing-text span:nth-child(17) { animation-delay: 1.7s; }
.typing-text span:nth-child(18) { animation-delay: 1.8s; }
.typing-text span:nth-child(19) { animation-delay: 1.9s; }
.typing-text span:nth-child(20) { animation-delay: 2.0s; }
.typing-text span:nth-child(21) { animation-delay: 2.1s; }
.typing-text span:nth-child(22) { animation-delay: 2.2s; }
.typing-text span:nth-child(23) { animation-delay: 2.3s; }
.typing-text span:nth-child(24) { animation-delay: 2.4s; }
@keyframes typeIn {
  to {
    opacity: 1;
  }
}

.space {
  width: 0.3em;
  display: inline-block;
}


/*トップのローダー*/
.loader{
  background:#333;
  background: -webkit-gradient(radial, center center, 120, center center, 900, from(#33495E), to(#2E2329));
  background:-moz-radial-gradient(circle, #33495E, #2E2329);
  width: 100%;
  height: 100vh;
  position: fixed;
  z-index: 555;
  justify-content: center;
  align-items: center;
  top:0;
  left: 0;
  
}

.loader img{
	width: 8rem;
	padding-top: 10rem;
}
.loader p{
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  color:#FFF;
  font-size:16px;
  letter-spacing:1px;
  font-weight:200;
  text-align:center;
      
}
.loader span{
  width:16px;
  height:16px;
  border-radius:50%;
  display:inline-block;
  position:absolute;
  left:50%;
  margin-left:-10px;
  -webkit-animation:3s infinite linear;
  -moz-animation:3s infinite linear;
  -o-animation:3s infinite linear;
  
}


.loader span:nth-child(3){
  background:#E84C3D;
  -webkit-animation:kiri 1.2s infinite linear;
  -moz-animation:kiri 1.2s infinite linear;
  -o-animation:kiri 1.2s infinite linear;
  
}
.loader span:nth-child(4){
  background:#F1C40F;
  z-index:100;
}
.loader span:nth-child(5){
  background:#2FCC71;
  -webkit-animation:kanan 1.2s infinite linear;
  -moz-animation:kanan 1.2s infinite linear;
  -o-animation:kanan 1.2s infinite linear;
}


@-webkit-keyframes kanan {
    0% {-webkit-transform:translateX(20px);
    }
   
  50%{-webkit-transform:translateX(-20px);
  }
  
  100%{-webkit-transform:translateX(20px);
  z-index:200;
  }
}
@-moz-keyframes kanan {
    0% {-moz-transform:translateX(20px);
    }
   
  50%{-moz-transform:translateX(-20px);
  }
  
  100%{-moz-transform:translateX(20px);
  z-index:200;
  }
}
@-o-keyframes kanan {
    0% {-o-transform:translateX(20px);
    }
   
  50%{-o-transform:translateX(-20px);
  }
  
  100%{-o-transform:translateX(20px);
  z-index:200;
  }
}




@-webkit-keyframes kiri {
     0% {-webkit-transform:translateX(-20px);
  z-index:200;
    }
  50%{-webkit-transform:translateX(20px);
  }
  100%{-webkit-transform:translateX(-20px);
  }
}

@-moz-keyframes kiri {
     0% {-moz-transform:translateX(-20px);
  z-index:200;
    }
  50%{-moz-transform:translateX(20px);
  }
  100%{-moz-transform:translateX(-20px);
  }
}
@-o-keyframes kiri {
     0% {-o-transform:translateX(-20px);
  z-index:200;
    }
  50%{-o-transform:translateX(20px);
  }
  100%{-o-transform:translateX(-20px);
  }
}

/*view moreボタンの装飾
.bg-throungh {
  padding: 20px;
  border: 2px solid #333;
  color: #333;
  overflow: hidden;
  position: relative;
  z-index: 1;
}

.bg-throungh::before {
  content: '';
  width: 100%;
  height: 100%;
  background-color: #e0e82e;
  position: absolute;
  left: -100%;
  top: 0;
  transition: .8s;
  z-index: -1;
}

.bg-throungh:hover::before {
  left: 100%;
}
*/
/*メニューブロック初期設定
---------------------------------------------------------------------------*/

#menubar {display: none;}
#menubar ul {list-style: none;margin: 0;padding: 0;}
#menubar a {display: block;text-decoration: none;}


.large-screen #menubar {display: block;}
.small-screen #menubar.display-block {display: block;}


#menubar_hdr.display-none {display: none;}

/*
.ddmenu_parent ul {display: none;}


a.ddmenu {cursor: default;}


a.ddmenu::before {
	font-family: "Font Awesome 6 Free";	
	content: "\f078";		
	font-weight: bold;		
	margin-right: 0.5em;	
}*/




/*メニュー*/
.large-screen #menubar > nav > ul {
	display: flex;		
	font-size: 1rem;	
	gap: 0.5rem;		
}


/*メニュー*/
.large-screen #menubar > nav:nth-of-type(2)  ul{
	justify-content: flex-end;		
}

.large-screen #menubar > nav:nth-of-type(2)  li{
	border:1px solid #555;
	border-radius: 0.5rem;	
}
.drop-menu {
	/* 初期は表示しない */
  display: none;
	/* 「menu__name」を基準に表示位置を指定 */
	position: absolute;
	/* 「menu__name」の高さ分下に下げて真下に表示 
	top: 100%;*/
}


/*メニュー*/
.large-screen #menubar li a {
	border-radius: 100px;	
	padding: 0.2rem 1rem;	
	font-weight: 500;
}

/*マウスオン時*/
.large-screen #menubar li a:hover {
	/*background: #fff;*/		/*背景色*/
}

/*スライドのテキスト画像*/
/* ここから時間差フェードインアニメーション */
/* 1秒間かけてフェードイン */
.fadeIn1s {
    animation-name: fadeIn1s;
    animation-delay: 1s;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateY(-50px);
    opacity: 0;
}
@keyframes fadeIn1s {
    0% {
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
/* 1.5秒間かけてフェードイン */
.fadeIn1500ms {
    animation-name: fadeIn1500ms;
    animation-delay: 1500ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateY(50px);
    opacity: 0;
}
@keyframes fadeIn1500ms {
    0% {
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}
/* 0.5秒間かけてフェードイン */
.fadeIn500ms {
    animation-name: fadeIn500ms;
    animation-delay: 500ms;
    animation-duration: 1.5s;
    animation-fill-mode: forwards;
    transform: translateX(50px);
    opacity: 0;
}
@keyframes fadeIn500ms {
    0% {
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/*ドロップダウン*/
.large-screen #menubar ul ul,
.small-screen #menubar ul ul {
	animation: opa1 0.5s 0.1s both;	
}

/*ページ遷移*/

.four-color .animation-bg .animation-bg-element {
  position: fixed;
  top: 0;
  left: 0;
  height: calc(100% / 2);
  width: calc(100% / 2);
  z-index: 999;
  animation-name: PageAnime-four-color-ttb;
  animation-duration: 0.6s;
  animation-delay: 1s;
  animation-timing-function: ease-in-out;
  animation-fill-mode: forwards;
}
.four-color .animation-bg .animation-bg-element:nth-child(2) {
  left: inherit;
  right: 0;
  animation-name: PageAnime-four-color-rtl;
}
.four-color .animation-bg .animation-bg-element:nth-child(3) {
  top: inherit;
  bottom: 0;
  animation-name: PageAnime-four-color-ltr;
}
.four-color .animation-bg .animation-bg-element:nth-child(4) {
  top: inherit;
  left: inherit;
  right: 0;
  bottom: 0;
  animation-name: PageAnime-four-color-btt
}
.four-color .animation-bg .animation-bg-element::before {
  background: #eca200;
  box-shadow: 0 0 0 1px #eca200;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
 
/* 四隅から色を表示する-上から下 キーフレーム */
@keyframes PageAnime-four-color-ttb {
  0% {
    transform-origin: bottom;
    transform: scaleY(1);
  }
  100% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
}
/* 四隅から色を表示する-左から右 キーフレーム */
@keyframes PageAnime-four-color-ltr {
  0% {
    transform-origin: right;
    transform: scaleX(1);
  }
  100% {
    transform-origin: right;
    transform: scaleX(0);
  }
}
/* 四隅から色を表示する-下から上 キーフレーム */
@keyframes PageAnime-four-color-btt {
  0% {
    transform-origin: top;
    transform: scaleY(1);
  }
  100% {
    transform-origin: top;
    transform: scaleY(0);
  }
}
/* 四隅から色を表示する-右から左 キーフレーム */
@keyframes PageAnime-four-color-rtl {
  0% {
    transform-origin: left;
    transform: scaleX(1);
  }
  100% {
    transform-origin: left;
    transform: scaleX(0);
  }
}


/*ドロップダウン*/
.large-screen #menubar ul ul {
	/*position: relative;*/z-index: 100;display: flex;background-color: #0060b0; border-radius: 0.5rem;
    margin-top: 0.5rem;
    margin-left: -4rem;
}

.large-screen #menubar ul ul:after {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  border-style: solid;
  border-width: 0 10px 10px 10px;
  border-color: transparent transparent #0060b0;
  translate: -50% -100%;
}

/*メニュー*/
.large-screen #menubar ul ul a {
	margin-top: 0.4rem;	/*上に空けるスペース。メニュー同士の隙間です。*/
	color: #ffffff;
}



/*メニュー*/
.small-screen #menubar.display-block {
	position: fixed;overflow: auto;z-index: 101;
	left: 0px;top: 0px;
	width: 100%;
	height: 100%;
	padding-top: 90px;
	background: rgba(0, 96, 176, 0.8);		
	animation: animation1 0.2s both;	
}

/*メニュー*/
.small-screen #menubar nav ul li {
	border: 1px solid #ccc;	
	margin: 1rem;			
	border-radius: 5px;		
	padding: 0 2rem;		
}
.small-screen #menubar a {
	padding: 1rem;	
}

/*文字色*/
.small-screen #menubar, .small-screen #menubar a {
	color: #fff;
}


#menubar .sh {
	font-weight: normal;		
	padding: 1rem 2rem 2rem;	
	text-align: center;
}




#menubar_hdr {
	animation: opa1 0s 0.2s both;
	position: fixed;z-index: 101;
	cursor: pointer;
	right: 3vw;			
	top: 1vw;				
	padding: 16px 14px;		
	width: 46px;			
	height: 46px;			
	display: flex;					
	flex-direction: column;			
	justify-content: space-between;	
}


#menubar_hdr span {
	display: block;
	transition: 0.3s;	
	border-top: 1.5px solid #333;	
}


#menubar_hdr.ham {
	background: #D2111A;
}


#menubar_hdr.ham span:nth-of-type(1),
#menubar_hdr.ham span:nth-of-type(3) {
	transform-origin: center center;	
	width: 20px;						
	border-color: #fff;					
}


#menubar_hdr.ham span:nth-of-type(1){
	transform: rotate(45deg) translate(3.8px, 5px);	
}


#menubar_hdr.ham span:nth-of-type(3){
	transform: rotate(-45deg) translate(3.8px, -5px);	
}


#menubar_hdr.ham span:nth-of-type(2){
	display: none;	
}



.bg1 h2 {
	color: var(--primary-text-color);	
}

main{

}

main h2 .pre {
	display: block;
	font-size: 0.8em;	
		font-weight: 400;
		letter-spacing: inherit;


	  
}

#policy{
	background-image: url(images/bg_l.png),url(images/bg_r.png);
	background-repeat: no-repeat, no-repeat;
    margin-bottom: 0;
    background-position: left, right;
    background-size: 10%;
}



#schedule{
		background-image: url(images/bg_l.png),url(images/bg_r.png);
	background-repeat:  no-repeat, no-repeat;
    margin-bottom: 0;
    background-position: left, right;
    background-size: 10%;
}



main #policy p{
	text-align: left;
}

main #policy h4{
	font-size: 1.5rem;
}

main h2 .pre img{
	width: 12%;
}
@media screen and (max-width:650px) {

main h2 .pre img{
	width: 25%;
}
.drop-menu{
	display: none;
}
}


main h3 {
	/*display: inline-block;
	border-bottom: 3px solid var(--text-color);	*/
}



.main-contents {
	margin-bottom: 5rem;	
}

#schedule div{
	width: 70%;
	margin: 0 auto;
}

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

	
	main.column {
		display: flex;					
		justify-content: space-between;	
		gap: 2rem;						
	}
	
	
	.main-contents {
		margin-bottom: 0;
		order: 2;		
		flex: 1;
	}
	
	
	.sub-contents {
		width: 230px;	
	}
	
	
	.sub-contents:nth-child(2) {
		order: 1;	
	}
	

	.sub-contents:nth-child(3) {
		order: 3;	
	}
	
	}




.sub-contents h3 {
	display: block;
	margin: 0;
	text-align: center;
	border-radius: 5px 5px 0px 0px;	
	border: 1px solid #ccc;			
	background: linear-gradient(transparent, rgba(0,0,0,0.03));
	padding: 0.5rem 0;	
}



.submenu {
	padding: 0;
	margin: 0 0 1rem;	
}


.submenu a {
	display: block;text-decoration: none;
	padding: 0.2rem 1rem;	
}


.submenu > li {
	border: 1px solid #ccc;	
	border-top: none;		
}


.submenu li li a {
	padding-left: 2rem;	
}


.sub-contents h3 + nav .submenu {
	border-top: none;
}



footer h3{
	font-size: 1.5rem;
}


footer .button-1 a {
    font-size: 1rem;
}

#footermenu {
	margin: 0 !important;
	padding: 40px;		
	text-align: center;	
	font-size: 1rem;
}



#footermenu li {
	display: inline-block;	
	padding: 0 10px;		
}

#footermenu li a{
	text-decoration: none;
	font-weight: 500;
}

@media screen and (max-width:650px) {
	#footermenu {
		padding: 20px;		
	}
	#footermenu li {
		padding: 0 8px;		
	}
.ndisplay{
  display: none!important;
}
	}
/*フッター
---------------------------------------------------------------------------*/
footer small {font-size: 100%;display: block;margin: 1rem 0;}
footer {
	font-size: 0.9rem;		
	/*text-align: center;	
	padding: 20px;	*/			
}


footer a {color: inherit;text-decoration: none;}


footer .pr {display: block;}

footer img{
	width: 15%;
}

footer {
	display: flex;
	position: absolute;
    width: 100%;
}

footer div{
	padding: 7rem;
  font-size: 1.3rem;
}

footer div:first-child{
	background-color: #eeeeef;
	width: 65%;
}

footer div:nth-child(2){
	background-color: #0060b0;
	color: #ffffff;
	width: 35%;
	font-size: 1.3rem;
}

footer div:nth-child(2) img{
	width: 6rem;
}

@media screen and (max-width:650px) {
footer img{
	/*width: 50%;*/
}
}


.fade-in-text {
    visibility: hidden;
}





.list-grid1 {
	display: grid;
	color: var(--text-color);	
}

.list-grid1 .txt{
	width: 90%;
	margin: 0 auto;
}

.list-grid1 .list {
	display: flex;
    flex-direction: column;

}




.list-grid1 .list p {
	font-size: 0.85rem;	
}

	/*画面幅500px以上の追加指定*/
	@media screen and (min-width:500px) {

	.list-grid1 {
		grid-template-columns: repeat(2, 1fr);	/
		gap: 1rem;	
	}

	}/*ここまで*/


	/*画面幅800px以上の追加指定*/
	@media screen and (min-width:800px) {
	.list-grid1 {
		grid-template-columns: repeat(4, 1fr);	
		gap: 1rem;	
	}

	}/*ここまで*/


.list-grid1 .list {
	padding: 1rem;			
	background: #fff;		
    grid-template-rows: auto 1fr;	
	text-align: center;;
}

.list-grid1 .list figure img {
	margin-bottom: 0.5rem;	
}


#intro .list .text{
	display: flex;
  flex-direction: column;
  align-items: stretch; 
  height: 100%; 
	width: 90%;
	margin: 0 auto;
}

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

	#intro .list .text{
		width: 80%;
	}
	#intro .button_line007 a{
		width: 80%;
	}
}


.btn a,
.btn-border-radius a {
	display: block;text-decoration: none;
	font-size: 1rem;
	text-align: center;		
	background: var(--primary-color) !important;	
	color: var(--primary-text-color) !important;	
	padding: 0.5rem !important;		
	margin-top: 1rem !important;
}

.btn a:hover,
.btn-border-radius a:hover {
	filter: brightness(1.2);
}

/*btn-border-radiusの上書き*/
.btn-border-radius a {
	display: inline-block;
	padding: 0.5rem 2rem !important;	
	border-radius: 100px;	
}









/*PAGE TOP
---------------------------------------------------------------------------*/
/*.pagetop-show {display: block;}*/

/*ボタンの設定*/
/*.pagetop a {
	display: block;text-decoration: none;text-align: center;z-index: 99;
	position: fixed;	
	right: 20px;		
	bottom: 20px;		
	color: #fff;		
	font-size: 1.5rem;	
	background: rgba(0,0,0,0.2);	
	width: 60px;		
	line-height: 60px;	
	border-radius: 50%;	
}*/

.pagetop {
  height: 50px;
  width: 50px;
  position: fixed;
  right: 30px;
  bottom: 30px;
  background: #fff;
  border: solid 2px #000;
  border-radius: 50%;
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
  cursor: pointer;
  box-shadow: 0px 0px 10px 2px rgba(255, 255, 255, 0.5); /* 白のぼかし影 */
}
.pagetop__arrow {
  display: block;
  height: 10px;
  width: 10px;
  border-top: 3px solid #000;
  border-right: 3px solid #000;
  transform: translateY(20%) rotate(-45deg);
}


/*その他いろいろ
---------------------------------------------------------------------------*/
.clearfix::after {content: "";display: block;clear: both;}
.color-check, .color-check a {color: #ff0000 !important;}
.l {text-align: left !important;}
.c {text-align: center !important;}
.r {text-align: right !important;}
.ws {width: 95%;display: block;}
.wl {width: 95%;display: block;}
.mb0 {margin-bottom: 0px !important;}
.mb30 {margin-bottom: 30px !important;}
.look {display: inline-block;padding: 0px 10px;background: #eee;color: #333;border: 1px solid #ccc; border-radius: 3px;margin: 5px 0; word-break: break-all;}
.small {font-size: 1.2em;}
.large {font-size: 2em; letter-spacing: 0.1em;}
.pc {display: none;}
.dn {display: none !important;}
.block {display: block !important;}


	/*画面幅900px以上の追加指定*/
	@media screen and (min-width:900px) {

	.ws {width: 48%;display: inline;}
	.sh {display: none;}
	.pc {display: block;}

	}/*追加指定ここまで*/



	/*いろいろ追加
---------------------------------------------------------------------------*/

h4{
	line-height: 1.5rem;
}


/* 詳しくボタン */

.button_line007 a.link {
	text-decoration: none;
  }

.button_line007{
	font-size: 1rem;
} 

.button_line007 a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    /*max-width: 220px;
    padding: 5px 15px;*/
    color: #fff;
    transition: 0.3s ease-in-out;
    font-weight: bold;
    background: #D2111A;
	text-decoration: none;
	border-radius: 2rem;
	

}
.button_line007 a:hover {
    background: #eee;
    color: #D2111A;
	border-radius: 2rem;
}
.button_line007 a:before, .button_line007 a:after {
  box-sizing: inherit;
  content: "";
  position: absolute;
  border: 2px solid transparent;
  width: 0;
  height: 0;
}
.button_line007 a:before {
  top: 0;
  left: 0;
}
.button_line007 a:after {
  bottom: 0;
  right: 0;
}
.button_line007 a:hover:before, .button_line007 a:hover:after {
  width: 100%;
  height: 100%;
}


.list-grid1 .list .button_line007 {
margin: 0 auto;
width: 90%; 
}
@media (max-width: 650px) {
.list-grid1 .list .button_line007 {
	width: 100%; 
	}
}



.awe::before{
	font-family: "Font Awesome 5 Free";
	/*content: '\f521';*/
	font-size: 15px;
	font-weight: 400;
	margin-right: 4px;
	color:#000;
  }

  ul {
	list-style-type: none;
} 

#map{
	justify-content: center;
	display: flex;
	padding: 5rem 0;
}

#map div:first-child{
	width: 45%;
}

#map div:nth-child(2){
	width: 30%;
}

#map .art{
	width: 11%;
    margin: 0.2rem;
}
#map img{
	width: 90%;
	margin: 1rem;
}




table{
	box-sizing: border-box;
	border-collapse:separate;
	margin: 6rem auto 3rem auto;
	text-align: center;
	width: 70%;
	overflow: hidden;
	border-radius: 2rem;
	border-spacing: 0;
  }
  @media (max-width: 650px) {

  table{
	width: 100%;
  }

  #map div:first-child{
	width: 90%;
	margin: 0 auto;
}

#map div:nth-child(2){
	width: 90%;
	margin-top: 1rem auto 0 auto;
}
}


  table th,
  table td{
	border-bottom: 2px solid #fff;
	padding: 1em;

  }

  table tr:first-child{
	border-top: 1px solid #ccc;
  }
  table th{
	background: #DCDDDD;
	color: #000;
	width: 20%;
	border-right: 2px solid #fff;
  }
  table td{
	background: #EFEFEF;
	text-align: left;

  }
  
  @media (max-width: 650px) {
    table th,
    table td{
      display: block;
	  width: 100%;
	  border-right: none;
    }
    table td:last-child{
      /*border-bottom: none;*/
    }

	.radius-table tr:first-child>*:last-child {
     border-radius: 0 0 0 0; 
}

.radius-table tr:last-child>*:first-child {
    border-radius: 0 0 0 0;
}

	table{
		margin: 6rem auto 3rem auto;
	  }
}


main{
	/*width: 85%;*/
	margin: 0 auto;
}

.chara{
	padding:1rem;
}


span.small{
	font-weight: normal;
	text-decoration: none;
	font-size: 1rem;
color: #000!important;
border: none!important;
border-left: none!important;
/*background-color: #EFEFEF!important;*/
display: inline!important;
}

#intro h4{
	text-align: left;
}

.awe{
	text-align: left;
}

.links{
  display: flex;
    width: 70%;
    margin: 0 auto;
}
  
/*リンクの矢印*/
.link a {
	display: inline-block;
	max-width: 360px;
	width: 100%;
	padding: 10px 20px;
	font-size: 16px;
	border-radius: 10px;
	text-align: center;
	color: blue;
	position: relative;
	font-weight: bold;
	text-decoration: none;
  }
  .link a::before {
	background-color: blue;
	position: absolute;
	top: 50%;
	right: /*13px*/6rem;
	width: 15px;
	height: 2px;
	margin-top: 0px;
	content: "";
  }
  .link a::after {
	position: absolute;
	top: 50%;
	right: /*13px*/6rem;
	width: 12px;
	height: 12px;
	margin-top: -6px;
	-webkit-transform: rotate(45deg);
			transform: rotate(45deg);
	border-top: 2px solid blue;
	border-right: 2px solid blue;
	content: "";
	display: inline-block;
	vertical-align: middle;
  }


  /*見出し*/

  h1{/*margin-block-start: 0.8em;
    margin-block-end: -0.2em;
	margin-right: 2.5rem;*/
}

  h2 {
	position: relative;
	padding: .75em 1em 0;
	text-align: center;
	font-family: "Noto Sans JP", sans-serif;
	font-size: 3rem;		
	letter-spacing: 0.05em;	
	margin: 0 0 3rem;
	color: #0060b0;
  line-height: 3rem;
  }

  h2:nth-of-type(2){
	color: #ffffff;
  }

  h2 span{
	font-size: 1.2rem;
	display: block;
	color: #333!important;
font-family: "Lexend Deca", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  }

  .t_logo{
  margin-top: 1rem;
	margin-bottom: 2rem;
  }

  @media (max-width: 650px) {
	h1{
		margin-right: 0;
		margin-block-start: 0;
        margin-block-end: 0;
        margin-inline-start: 0px;
        margin-inline-end: -35px;
	}
    h2{
      font-size: 2rem;
    }
}
  
  /*h2:before {
	position: absolute;
	bottom: 0;
	left: calc(50% - 30px);
	width: 60px;
	height: 5px;
	content: '';
	border-radius: 3px;
	background: #D2111A;
  }*/

  .s_box{
	display: flex;
	justify-content: space-between;
  }

  .s_box ul{
margin: 1rem;
  }
  
  .s_box li{
	text-align: center;
	  } 

  #access_box{
	background-color: #f8f8f8;
  }

  #access_box .box{
  width: 47%;
    margin: 0 auto;
    padding: 3rem 0;
  }

  #access h3{
	border-bottom:none;
	line-height: 1.2rem;
  }
  #access h4{
	line-height: 2rem;
  }



  @media (max-width: 650px) {

	#access_box .box{
		width: 90%;
	}
	.s_box{
		display: block;
	  }
	  #map{
		display: block;
	}  
}




	@media (max-width: 650px) {
		h1{
			font-size: 2rem;
		  }

		}
		
		
/*PCでは無効（改行しない）*/
.sp{
    display: none;
}




/*メイン画像に光*/


  #mainvisual{
	position: relative;
}

#mainvisual p img{
	position:absolute;
	z-index: 50;
	top: 5rem;
  /*right: 0;*/
  bottom: 0;
  left: 10rem;
  margin: auto;
  width: 50%;
}


	.img-box{
  width: 100%;
  height: /*46*/55vw;
  overflow: hidden;
  position: relative;
}


.img-box>div{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: /*46*/55vw;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
    /* 追記 */
	opacity: 0;
  animation-name: fade;
  animation-duration: 36s;
  animation-iteration-count: infinite;
}
@keyframes fade {
  0%{
    opacity: 0;
  }
  20%{
    opacity: 1;
  }
  40%{
    opacity: 1;
	transform: scale(4.0);
  }
  80%{
    opacity: 0;
 }
  100%{
    opacity: 0;
    z-index: 0;
  }
}
/* 1枚目 */
.img-box>div:first-of-type{
  background-image: url(../images/main/m_011.jpg);
}

/* 2枚目 */
.img-box>div:nth-of-type(2){
  background-image: url(../images/main/m_022.jpg);
    /* 追記 */
	animation-delay: 6s;
}

/* 3枚目 */
.img-box>div:nth-of-type(3){
	background-image: url(../images/main/m_033.jpg);
	  /* 追記 */
	  animation-delay: 12s;
  }

/* 4枚目 */
.img-box>div:nth-of-type(4){
	background-image: url(../images/main/m_046.jpg);
	  /* 追記 */
	  animation-delay: 18s;
  }
/* 5枚目 */
.img-box>div:nth-of-type(5){
	background-image: url(../images/main/m_055.jpg);
	  /* 追記 */
	  animation-delay: 24s;
  }
/* 6枚目 */
.img-box>div:last-of-type{
	background-image: url(../images/main/m_066.jpg);
	  /* 追記 */
	  animation-delay: 30s;
  }      

#policy article{
	display: flex;
	width:70%;
	margin:0 auto;
}
  #policy article div:first-child{
	margin-right: 3rem;
}

#policy article img{
	width: 95rem;
}

#policy p{
	text-align: center;
	font-size: 1.2rem;


}

#policy article h3{
	font-size: 2.5rem;
	color: #0060b0;
	line-height: 4rem;
	margin-bottom: 1rem;
	margin-top: 1rem;
}

#policy article h3 span{
	/*display: block;*/
}



#p_policy{
	background-image: url(images/bg_l.png),url(images/bg_r.png);
	background-repeat: repeat-y, repeat-y;
    margin-bottom: 0;
    background-position: left 1%, right 13rem;
    background-size: 22% 22%;


}



#p_policy article{
	display: flex;
	width:70%;
	margin:0 auto;
}

#p_policy article div:first-child{
	margin-right: 3rem;
}

#p_policy article img{
	width: 95rem;
}

#p_policy p{
	text-align: center;
	font-size: 1.2rem;
}

#p_policy article h3{
	font-size: 2.5rem;
	color: #0060b0;
	line-height: 3rem;
	margin-bottom: 1rem;
	margin-top: 1rem;
}

#p_policy article h3 span{
	display: block;
}

#p_policy .box {
    margin: 2em 0;
    background: #ffffff;
	border: #969696 solid 1px;
}
#p_policy .box .box-title {
    font-size: 1.2em;
    background: #f0f0f0;
    padding: 4px;
    font-weight: bold;
    letter-spacing: 0.05em;
	border-bottom: #969696 solid 1px;
	text-indent: 1rem;

}


#p_policy .box li {
    padding: 0.5rem;
    margin: 0;
	text-indent: 2rem;
}

#p_policy .box ul{
	padding:2rem 0;
}

#p_policy .p_top{
	display: flex;
	    width: 70%;
    margin: 0 auto;
	text-align: left;
}

#p_policy .p_top div p{
	text-align: left;
}

#p_policy .p_top div:first-child{
	margin-right: 5rem;
}

#p_policy .p_top img{
	width: 150rem;
}

.p_top h3{
	font-size: 1.8rem;
	margin-top: 1rem;
}

.p_top h3 span{
	display: block;
	font-size: 1rem;
}

.m_ttl{
	color: #0060b0;
	font-size: 1.2rem;
	font-weight: bold;
}

.goal{
	width: 70%;
	margin: 5rem auto;
}

.goal table{
	width: 100%;
	margin: 1rem auto 2rem auto;
	/*border: 1px solid #969696;*/
}

/*一時的に消す.anchor{
	margin-top:-100px;
   padding-top:100px;
   display: block;

}*/

.goal .style1{
	border-radius: 0;
	border: 1px solid #969696;
	border-bottom: none;
}

.goal .style1 td{
	background-color: #ffffff;
	border-bottom: 1px solid #969696;
}
.goal .style1 th{
	border-bottom: 1px solid #969696;
	border-right: 1px solid #969696;
}

.goal .style1 th.none{
	border-right: none;
}

.goal .style1 th:first-child{
	background-color: #f0f0f0;
	text-align: left;
	font-size: 1.2rem;
	padding: 5px;
}
#f_list{
	padding: 5rem 0;
}

#f_list h3{
	text-align: center;
	font-size: 1.3rem;
	line-height: 4rem;
}

.club{
	display: flex;
	width: 70%;
	margin: 0 auto;
}

/* 左右に三角形の装飾ボックス */
.cstm-box-corner-tri {
   margin: 0 auto 2em;
    padding: 1em;
    position: relative;
    border: solid 1px #888888;
    border-radius: 0.2rem;
    width: 17rem;
	box-shadow: 0px 2px 7px 0px #ccc;   /* 影指定 */
}



/* 右下の三角形 */
.cstm-box-corner-tri:after {
   content: '';
   position: absolute;
   bottom: 0;
   right: 0;
   display: block;
   border-left: 20px solid transparent;   /* 左方向は透明 */
   border-bottom: 20px solid #0060b0;        /* 下側に色付き三角形 */
}

/* 内側の段落余白をリセット */
.cstm-box-corner-tri p {
   margin: 0;
}


/*ループ*/
.loop_wrap {
    position: relative;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    width: 100vw;
    overflow: hidden;
	margin-top: 0.5rem;
  }

  .loop_wrap ul {
    display: -webkit-flex;
    display: flex;
    -webkit-flex-flow: row nowrap;
    flex-flow: row nowrap;
    width: 100%;
    margin: 0;
    padding: 0;
  }

  .loop_wrap li {
    display: inline-block;
    width: calc(100vw / 8);
    min-width: 150px;
    margin: 0 /*2*/0px 0 0;
    list-style: none;
    text-align: center;
  }

  .loop_wrap li a {
    display: block;
  }

  .loop_wrap li img {
    display: block;
    width: 100%;
    height: auto;
  }

  .loop_wrap li a:hover {
    opacity: .7;
  }

  .loop_wrap ul:first-child {
    -webkit-animation: loop 80s -40s linear infinite;
    animation: loop 80s -40s linear infinite;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    will-change: transform;
  }

  .loop_wrap ul + ul {
    -webkit-animation: loop2 80s  linear infinite;
    animation: loop2 80s linear infinite;
  }

  .loop_wrap:hover ul {
    animation-play-state: paused;
  }
  @-webkit-keyframes loop {
    0% {
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
    }
    to {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%);
    }
  }

  @keyframes loop {
    0% {
      -webkit-transform: translateX(100%);
      -ms-transform: translateX(100%);
      transform: translateX(100%);
    }
    to {
      -webkit-transform: translateX(-100%);
      -ms-transform: translateX(-100%);
      transform: translateX(-100%);
    }
  }

  @-webkit-keyframes loop2 {
    0% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(-200%);
      -ms-transform: translateX(-200%);
      transform: translateX(-200%);
    }
  }

  @keyframes loop2 {
    0% {
      -webkit-transform: translateX(0);
      -ms-transform: translateX(0);
      transform: translateX(0);
    }
    to {
      -webkit-transform: translateX(-200%);
      -ms-transform: translateX(-200%);
      transform: translateX(-200%);
    }
  }

  .loop_js {
    display: -webkit-flex;
    display: flex;
    height: auto;
    overflow: hidden;
  }

  .loop_js > * {
    width: 33.333333%;
    height: auto;
  }


  @media screen and (max-width:650px) {
  .loop_wrap li {

    width: calc(100vw / 6);
    min-width: 56px;
  }
  main {
    width: /*90*/100%;
}
header {
    height: 45px;
}
#logo a {
    font-size: 0.8rem;
}

}

/*ふわっと*/
.fadeIn {
	opacity: 0;
	transition: 2s;
  }
  .fadeIn.is-show {
	opacity: 1;
  }

#tool{
	display: flex;
	justify-content: space-between;
	padding: 2rem 1rem;
}

@media screen and (max-width:650px) {
	#tool{
		display: block;
		padding: 1rem;
	}
}





/*テーブル*/
.etable dl,.etable dt,.etable dd {
	margin: 0;
	}
	 
	.etable dl {
	display:table;
	background: #EFEFEF;
	width:100%;
	}
	.etable dl:nth-child(even){
		display:table;
		background: #fff;
		width:100%;
		} 
	 
	.etable dt {
		line-height: 2.5rem;
	font-weight:bold;
	vertical-align:middle;
	display:table-cell;
	padding:3rem;
	min-height:1.5em;
	text-align: left;
	width: 40%;
	font-size: 1.5rem;
	}

	 
	.etable dd {
	display:table-cell;
	min-height:1.5em;
	/*background: #f2f2f2;*/
	padding:3rem;
	}

	.etable dd span{
		font-weight: bold;
		color: #D2111A;
	}

	@media screen and (max-width:650px) {
		.etable dl {
			display:grid;
			}

			.etable dt {
				width: 100%;
				padding: 1rem;
				display: table-caption;
				}
				.etable dd{
					padding: 1rem;
				}		

	}

	/*テーブル内*/
.list dt span {
	display: inline-block;
	text-align: center;
	line-height: 1.8;		
	border-radius: 3px;		
	width: auto;			
	transform: scale(0.8);	
	background: #fff;		
	color:#777;				
	border: 1px solid #333;
}
.etable dt span.cate{
		display: inline-block;
		margin: 0 .6em .6em 0;
		padding: .6em;
		line-height: 1;
		text-decoration: none;
		font-size: 1rem;
		border-radius: 2rem;
		color: #fff;
		background-color: #8B8B8B;
		/*border: 1px solid #0000ee;
		border-left: 5px solid #0000ee;*/
		font-weight: 500;
		border: none;
}

.online{
	display: flex;
	justify-content: space-between;
}

.online ul{
	width: 28%;
	margin: 0 auto;
}

.online li{
	text-align: center;
	line-height: 1.5rem;
	height: 5rem;
}


.online li　a:hover img{
    opacity: 0.7;
}


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

.online li{
	line-height: 1.2rem;
	height: auto;
	font-size: 0.9rem;
}


}

.outline .button_line007 a{
	text-align: center;
justify-content: center!important;
padding: 1rem!important;
}

#ti_b{
	display: flex;
	justify-content: space-between;
}
@media screen and (max-width:650px) {
#ti_b{
	display: block;
}

#ti_b .online .button_line007 a{
	font-size: 0.6rem;
}
li.tt{
	height: 4rem;
	font-size: 0.8rem;
	line-height: 1rem;
}
}

#ti_b table{
margin: 0;
width: 100%;
}

#ti_b table td:first-child{
	border-right: 2px solid #ffffff;
	}

#ti_b table th.bla{
	background-color:#000;
	color: #fff;
}

#ti_b table th:last-child{
	border-right: none;
}

#ti_b table td{
	font-size: 1.2rem;
	border-right: 2px solid #ffffff;
}

#ti_b table td:last-child{
	border-right: none;
}

@media screen and (min-width:651px) and (max-width:1024px) {

	
	#ti_b .online .button_line007 a{
		font-size: 0.6rem;
	}

	.online li{
		line-height: 1.2rem;
	}
}

#sns{
	display: flex;
	align-items: stretch;
}

#sns .art{
	width: 90%;
}

@media screen and (max-width:650px) {
	#sns{
		justify-content: center;
	}

    #ti_b table th, #ti_b table td {
        display: table-cell; 
        width: 33%;
        border-right: 2px solid #fff; 
    }

	#ti_b table th{
		font-size: 0.9rem;
		line-height: 1.3rem;
	}
	#ti_b table td {
		border-bottom: 2px solid #fff;


	}

	#sns .art{
		width: 45%;
	}
	


}

#sns li{
	margin: 1rem;
	align-items: center;
    display: flex;
}

#sns li:first-child{
	margin-left: 0;
}

#coupon{
	margin-top: 10rem;
}


#coupon .box{
	width: 70%;
	margin: 0 auto;
}

#coupon .img{
	text-align: center;
	margin: 0 auto;
}

#coupon img{
	width: 90%;
	margin-bottom: 1rem;
}

#coupon h3{
	text-align: center;
	display: block;
	margin-bottom: 1rem;
	font-size: 1.8rem;
}


.fas_link_buttonborderround{
	text-decoration: none;
	display: inline-block;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	padding: 0 20px;
	height: 40px;
	line-height: 36px;
	background: #fff;
	color: #333;
	border: 2px solid #333;
	border-radius: 2rem;
	font-weight: bold;
	font-size: 1.3rem;
}
.fas_link_buttonborderround:before{
	font-style: normal;
	font-variant: normal;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	font-family: "Font Awesome 5 Free"; 
	font-weight: 900;
	content: '\f56e';
	margin-right: 5px;
}

.fas_link_buttonborderround:hover{
	background: #D2111A;
	color: #ffffff;
	border: 2px solid #D2111A;
}

@media (max-width: 650px) {
	.fas_link_buttonborderround{
		font-size: 0.9rem;
	}

	#footermenu li a{
		font-size: 0.8rem;
	}

	#coupon .box {
		width: 90%;
	}

	#coupon h3 {
		font-size: 1rem;
	}	
}
.table_design09 {
	border-collapse: collapse;
	table-layout: fixed;
	width: 100%;
	max-width: 700px;
	border-radius: 20px;
	overflow: hidden;
	text-align: center;
	margin: 0;
  }
  .table_design09 tr {
	background-color: #e6f1f6;
  }
  .table_design09 tr:nth-child(even) {
	background-color: #fff;
  }
  .table_design09 th, .table_design09 td {
	padding: 1em;
  }
  .table_design09 thead th {
	background-color: #0f1010;
	color: #fff;
	font-weight: bold;
	text-align: center;
  }
  .table_design09 tbody th {
	color: #0f1010;
  }
  @media screen and (max-width: 787px) {
	.table_design09 {
	  border-radius: 0;
	  text-align: left;
	}
	.table_design09 thead {
	  display:none;
	}
	.table_design09 tr {
	  background-color: unset;
	}
	.table_design09 th, .table_design09 td {
	  display: block;
	  border: 0;
	  border-bottom: 1px solid #0f1010;
	}
	.table_design09 tbody th{
	  background: #0f1010;
	  color:#fff;
	  text-align: center;
	}
	.table_design09 td::before{
	  content: attr(data-label);
	  background-color: #e6f1f6;
	  font-weight: bold;
	  display: inline-block;
	  width: 20%;
	  min-width: 4em;
	  text-align: center;
	  margin-right: 0.5em;
	  padding: 4px;
	  border-radius: 100vh;
	}
  }

  @media print{
    .sh{
        display: none;
    }
} 

.fa-instagram{
		font-size: 2rem;
}

.fa-x-twitter{
	font-size: 2rem;

}

.fa-facebook{
	font-size: 2rem;

}

@media (max-width: 650px) {

	.fa-instagram{
		font-size: 2rem;
}

.fa-x-twitter{
	font-size: 1rem;

}

.fa-facebook{
	font-size: 2rem;

}

    .swiper-horizontal {
         margin-top: 0; 
    }

#sns li{
	margin: 0.2rem;
}

#mainvisual p img{
    width: 60%;
    top: 3rem;
}


.img-box>div{
	height: 100vw;
}

.img-box {
	height: 100vw;
}

#mainvisual{
	height: 100vw;
}
}

/*contact*/

.c_contact{
	width: 70%;
	margin: 0 auto;
}


#contact{
	background-image: url(images/bg_l.png),url(images/bg_r.png);
	background-repeat: repeat-y, repeat-y;
    margin-bottom: 0;
    background-position: left 10%, right 13rem;
    /*background-size: 22% 22%;*/
}



/* フォーム全体のスタイル */
form {
    background-color: white;
    padding: 20px;
    width: 90%;
    max-width: 500px;
    margin: auto;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    text-align: left;
}

/* ラベルのスタイル */
label {
    display: block;
    margin-top: 10px;
    font-weight: bold;
    color: #555;
}

/* 入力欄のスタイル */
input, textarea {
    width: 100%; /* box-sizingが適用されるので、paddingやborder込みで100%に収まる */
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    font-size: 16px;
}

/* テキストエリアの高さを調整 */
textarea {
    resize: vertical;
    height: 120px;
}

/* 送信ボタンのスタイル */
button {
    background-color: #28a745;
    color: white;
    border: none;
    padding: 10px;
    width: 100%;
    margin-top: 10px;
    border-radius: 5px;
    font-size: 16px;
    cursor: pointer;
}

/* ホバー時のボタンスタイル */
.pagetop:hover {
    background-color: #0060b0;
}

@media screen and (min-width:651px) and (max-width:1300px)  {
footer div {
    padding: 5rem;
}
}

@media screen and (max-width: 600px) {
    form {
        padding: 15px;
        width: 95%;
    }
    button {
        font-size: 14px;
        padding: 8px;
    }
}
.wpcf7 input[type=”text”]:focus
{
background: #FFC0CB;
border: 2px solid #FF1493;
outline: 0;
}

.required {
    font-size: 0.6em;
    padding: 3px;
    background: #cc0000;
    color: #ffffff;
    border-radius: 2px;
    margin-right: 10px;
    margin-bottom: 2px;
    display: inline-block;
    font-weight: normal;
    margin-left: 0.3rem;
}




/*profile*/

.flex{
	display: flex!important;
}


#profile{
	background-image: url(images/bg_l.png),url(images/bg_r.png);
	background-repeat: no-repeat, no-repeat;
    margin-bottom: 0;
    background-position: left 13rem, right bottom;
    background-size: 15%;
}

.table_p .button-1{
	margin-left: 5rem;
}

.table_p .button-1 a{
    font-size: 1rem!important;
  }


.table_p {
    border-collapse: collapse;
    /*table-layout: fixed;*/
    width: 70%; /* table幅を100%に指定 */
    background: #fff;
    border-radius: 0;
}
.table_p th,
.table_p td {
    display: block; /* セルをブロック要素に指定 */
    width: 100%; /* セルを親要素いっぱいの幅に指定 */
    border: none; 
    padding: 20px;
    vertical-align: top;
    text-align: left;
    box-sizing: border-box;
}
.table_p th {
    font-weight: 700;
    color: #fff;
    background: #14116e; /* thの背景色 */
	white-space: nowrap;
}

@media screen and (min-width: 768px) {
    .table_p th,
    .table_p td {
        display: table-cell; /* デフォルト値に指定 */
        border-bottom: 1px solid #ccc;
        color: #000;
        background: #fff;
    }
    .table_p th {
        color: #000;
        background: #fff; /* thの背景色 */
    }
    .table_p tr th:first-child {
        width: 30%;

    }
}



section#contents{

	background-color: #f0f0f0!important;
	width: 70%;
	margin: 0 auto 5rem auto;
}


#contents_box{
	display: flex;
margin: 0 auto;
justify-content: space-evenly;

}

#contents_box .button-1 a{
	font-size: 1rem;
}

#contents_box h3{
	margin: 2rem 0 1rem 0;
}

#contents_box div{
	text-align: center;
}

#contents_box .button-1{
	margin: 2rem 0 5rem 0;
}




.radius-table{
    border-radius: 10px;
    border-spacing: 0;
    border: none;
    border-left: 1px solid #999;
    border-top: 1px solid #999;
	margin-bottom: 5rem!important;

}

.radius-table tr>*{
    /*padding: 5px 10px;*/
    border: none;
    border-right: 1px solid #999;
    border-bottom: 1px solid #999;
	text-align: center;
	background-color: #ffffff;
	position: relative;

}

.radius-table tr>*:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-bottom: solid 2px #c8c8c8;
  border-right: solid 2px #c8c8c8;
  transform: rotate(45deg);
  position: absolute;
  top: 3rem!important;
  left: 1rem;
  bottom: 0;
  margin: auto;
  inset: 0;
  pointer-events: none; /* ← 擬似要素はクリック無効に */
}



.radius-table tr:last-child td:last-child::before{
  border-bottom: none;
  border-right: none;
}

/*.radius-table tr::before{

content: url('../images/arrow.svg');

}*/

.radius-table tr:first-child>*:first-child{
    border-radius: 10px 0 0 0;
	position: relative;
}

.radius-table tr:first-child>*:first-child:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-bottom: solid 2px #c8c8c8;
  border-right: solid 2px #c8c8c8;
  transform: rotate(45deg);
  position: absolute;
  top: 3rem;
  left: 0;
  bottom: 0;
  margin: auto;
}
.radius-table tr:first-child>*:last-child{
    border-radius: 0 10px 0 0;
}
.radius-table tr:last-child>*:first-child{
    border-radius: 0 0 0 10px;
}
.radius-table tr:last-child>*:last-child{
    border-radius: 0 0 10px 0;
}


  @media (max-width: 650px) {
    .goal table {
    border: 1px solid #969696;
}
    .radius-table{
    border-radius: 0;
    border-spacing: 0;
    border: none;

}
.radius-table {
        border-radius: 1rem;
}
table tr:first-child {
    border-top: none;
}

.radius-table tr>* {
    /* padding: 5px 10px; */
    border: none;
    border-right: none;
    border-bottom: none;
  }
}

.mkj, ul, ol {
border-radius: 3px;
}

.mkj h2 {
padding: 8px 12px;
margin: -1px;
background: #f89174;
border: none;
font-size: 18px;
text-align: center;
color: #fff;
border-left: solid #f89174 5px;
border-bottom: solid 3px #dadada;
clear: both;
}

.mkj ol {
list-style: decimal;
}

.mkj>ol {
font-weight: 700;
color: #545454;
margin: 4px 5%;
}

/*会員企業リンク*/




#links table{
	box-sizing: border-box;
	border-collapse:separate;
	margin: 6rem auto 3rem auto;
	text-align: center;
	width: 35%;
	overflow: hidden;
	border-radius: 0;
	border-spacing: 0;
	border-top: 1px solid #969696;
	border-right: 1px solid #969696;
	border-left: 1px solid #969696;
  }
  @media (max-width: 650px) {

#links table{
	width: 100%;
  }

}


#links table th,
#links table td{
	border-bottom: 1px solid #969696;
	padding: 1em;

  }

  .arrow_r {
  position: relative;
  display: inline-block;
  padding-left: 2rem;
}
.arrow_r:before {
  content: '';
  width: 6px;
  height: 6px;
  border: 0;
  border-top: solid 2px #c8c8c8;
  border-right: solid 2px #c8c8c8;
  transform: rotate(45deg);
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  margin: auto;
}

/*#links table tr:first-child{
	border-top: 1px solid #fff;
  }*/


  #links table tr{
	border: 1px solid #969696;
  }
  


#links table th{
	background: #f0f0f0;
	color: #000;
	width: 20%;
	border-right: 1px solid #969696;
	text-align: left;
  display: none;
  }



#links table td{
	background: #ffffff;
	text-align: left;

  }


#links table td::before:nth-child(-n+4) {
    content: "『";
    color: #23cb99;
}


  
  @media (max-width: 650px) {
    #links table th{

    display: none;
    }

#links table td{
      display: block;
	  width: 100%;
	  border-right: none;
    }
#links table td:last-child{
      border-bottom: none;
    }

#links table{
		margin: 6rem auto 3rem auto;
	  }
}


#mreport{
	text-align: center;
}

#mreport h2{
	color: #ffffff;
}

 #report .button-1 a{
    font-size: 1rem!important;
  }

#mreport h2 span{
	color: #ffffff!important;
}

#mreport li{
	line-height: 4rem;
    background-color: #ffffff;
    margin-bottom: 1rem;
	border-radius: 0.3rem;
	text-align: left;
}

#mreport li span{
	color: #0060b0;
	margin:3rem;
}

#mreport ul{
	width: 70%;
    margin: 0 auto;
	font-weight: bold;
}

#mreport .button-1{
	margin-bottom: 5rem;
}

/*クラブ週報*/

#report{
	background-image: url(images/bg_l.png),url(images/bg_r.png);
	background-repeat: repeat-y, repeat-y;
    margin-bottom: 0;
    background-position: left 10%, right 13rem;
	/*animation: moveLayer1 40s linear infinite,
             moveLayer2 60s linear infinite;
    background-size: 22% 22%;*/
}

@keyframes moveLayer1 {
  from { background-position: 0 0; }
  to   { background-position: 1000px 0; }
}
@keyframes moveLayer2 {
  from { background-position: 0 0; }
  to   { background-position: 0 1000px; }
}

#report ul{
	/*display: flex;*/
	margin-bottom: 3rem;
}

#report ul span{
	display: block;
}


#report .contents{
	display: flex
;
    width: 80%;
    margin: 0 auto;
}
/*ページネーション*/
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}

.pagination span:not(.dots) {
  margin: 0 12px;
  padding: 3px 12px;
  background-color: #FFF;
  border: 2px solid #333;
  border-radius: 2px;
  opacity: .5;
  display: block;
}

.pagination a {
  margin: 0 12px;
  padding: 3px 12px;
  border: 2px solid #0060b0;
  border-radius: 2px;
  display: block;
  transition: all .3s linear;
}

.pagination a:hover {
  background-color: #0060b0;
  color: #FFF;
}


.archive_list span{
	display: inline!important;
}

.archive_list li{
	line-height: 4rem;
}
.main{
	display: flex;
	width: 70%;
    margin: 0 auto;
}

.contents-body{
	width: 65%;
}

.entry__ttl{
	font-size: 1.5rem;
    margin: 0;
    letter-spacing: 0;
	padding: 0;
	text-align: left;
  line-height: 2.2rem;
}

.entry__inner{
	display: flex;
}

.entry__inner div:first-child{
	width: 70%;
	margin-right: 1rem;
}

.entry__time{
	color: #0060b0;
	font-size: 1.2rem;
}

.entry img{
	width: 35rem;
}

.entry{
	margin-bottom: 3rem;
}

.entry .button-1{
	display: block;
}

/*
.button-1 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 17rem;
    margin:0 auto;
    padding: .9em 2em;
    border: 1px solid #888888;
    border-radius: 5px;
    background-color: #fff;
    color: #231815;
	font-weight: bold;
    font-size: 1em;
	box-shadow: 0 2px 3px rgb(0 0 0 / 25%), 0 2px 3px -2px rgb(0 0 0 / 15%);
}

.button-1::after {
    transform: rotate(45deg);
    width: 5px;
    height: 5px;
    margin-left: 10px;
    border-top: 2px solid #888888;
    border-right: 2px solid #888888;
    content: '';
}*/


.button-1 {
  display: inline-block;
  width: 17rem;
  line-height: 60px;
  text-align: center;
  text-decoration: none;
  color: #231815;
  font-weight: bold;
  background-color: #fff;
  box-shadow: 0 2px 3px rgb(0 0 0 / 25%), 0 2px 3px -2px rgb(0 0 0 / 15%);
  border-radius: 5px;
  margin: 1rem 0;
  font-family: "Roboto", sans-serif;
  font-optical-sizing: auto;
  font-weight: 600;
  font-style: normal;
  font-variation-settings:
    "wdth" 100;
  font-size: 1rem;
}




.button-1 a {
  display: inline-block;
  width: 17rem;
  line-height: 60px;
  text-align: center;
  text-decoration: none;
  /*color: #fff;f
  background-color: #888888;*/
  position: relative;
  font-size: 1.3rem;
}
.button-1 a::before {
  border-right: 2px solid #888888;
  border-top: 2px solid #888888;
  bottom: 0;
  content: "";
  height: 7px;
  width: 7px;
  margin: auto;
  position: absolute;
  right: 30px;
  top: 0;
  transform: rotate(45deg);
  transition: right .3s;
}
.button-1a:hover::before {
  right: 25px;
}


/*パンくず*/


.breadcrumb {
      list-style: none;
   /*width: 94%;*/
    margin: 0 auto;
    border-top: solid 1px #231815;
    border-bottom: solid 1px #231815;
    padding: 1rem 5rem;
	border-radius: 0;
	background-color: #ffffff;
}

.breadcrumb li {
  display: inline;/*横に並ぶように*/
  list-style: none;
  font-weight: bold;/*太字*/
}

.breadcrumb li:after {/* ▶を表示*/
  font-family: FontAwesome;
  content: '\f0da';
  padding: 0 0.2em;
  color: silver;
}

.breadcrumb li:last-child:after {
  content: '';
}

.breadcrumb li a {
  text-decoration: none;
  color: #888;
}
/*
.breadcrumb li:first-child a:before {
  /*家アイコン*/
  /*font-family: FontAwesome;
  content: '\f015';
  font-weight: normal;
  font-size: 1.1em;
  color: #f3948f;
}*/

.breadcrumb li .name {
  text-decoration: none;
  color: #0060b0;
}

.breadcrumb li a:hover {
  text-decoration: underline;
}

.side{
	background-color: #f0f0f0;
	border: 1px solid #969696;
	margin-left: 3rem;
    width: 20%;
	padding: 2rem;
	font-size: 1.2rem;
}


.side h3{
	border-bottom: 1px solid #969696;
}


/*メイン画像のスライド*/

.swiper {
  /*max-width: 1200px; /* スライドの最大幅 */
}
.swiper-wrapper {
  height: auto;
}
.swiper-slide img {
  width: 100%;
  height: auto;
}





.swiper-wrapper{
	background-image: url(../images/main/flame.png)!important;
}

.swiper-button-next, .swiper-rtl .swiper-button-prev{
	display: none!important;
}

.swiper-button-prev{
	display: none!important;
}
/*スマートフォンでは有効（改行する）*/
@media screen and (max-width:650px) {
    .sp{
        display: block;
    }

.breadcrumb{
	padding: 1rem;
	background-color: #ffffff;
}

footer{
	display: block;
}

footer div:first-child {
    width: 100%;
}
footer div:nth-child(2) {
    width: 100%;
}
footer div {
    padding: 1rem;
}
footer h3 {
    font-size: 1.2rem;
}
}


	/*スマボレスポンシブ 画面幅600px以下の追加指定*/
	@media screen and (max-width:600px) {
		.radius-table tr:last-child>*:last-child {
    border-radius: 0 0 0 0;
    border: none;
	display: none;
		}
		.goal .style1 th {
    border-right: none;
		}
.goal .style1 tr:last-child th{
	display: none;
}
		    .radius-table tr:first-child>*:last-child {
        border-radius: 0 0 0 0;
    }
	    .radius-table tr:last-child>*:first-child {
        border-radius: 0 0 0 0;
    }
		.entry img {
    margin-top: 3rem;
}
		    h1 {

        margin-top: 3rem;
    }

	#report .button-1 {
    line-height: 35px;
	}

 

	.goal {
    width: 75%;
	}
		#p_policy .p_top {
			display: block;
			width: 75%;
		}
		#p_policy .p_top div:first-child {
    /* margin-right: 5rem; */
    margin: 0 auto;
}
#p_policy .box li {
     text-indent: 0;
}

#report .contents {
    display: block;
	width: 90%;
}

.contents-body {
    width: 95%;
}

.entry__ttl {
    font-size: 1.2rem;
        line-height: 2rem;
}

.archive_list li {
    line-height: 3rem;
}

#report {
    background-size: 40%;
}

footer .button-1 {

    line-height: 35px;
}

.side {

    width: 80%;
}

section.other {
     padding-top: 0;
}

.pagination {
    margin-top: 2rem;
}

.button-1 a {
    line-height: 35px;
}

.c_contact {
    width: 85%;
}

.button-1{
font-size: 1.2rem;
}

    #links table {
        width: 90%;
    }

	    #links table td:last-child {
        border-bottom: 1px solid #969696;
    }

header {

    padding: 5vw 2vw 10vw 3vw;
}
#contents_box {
     display: block; 
}

.table_p {
    width: 85%;
}

section#contents {
    width: 85%;
}

#policy article {
 display: block; 
    width: 85%;
}

#policy article h3 {
    font-size: 2rem;
    line-height: 3rem;
}

#mreport li {
    line-height: 2rem;
}
#mreport ul {
    width: 85%;
}

#mreport li span {
    margin: 1rem;
}

#schedule div {
    width: 80%;
}

.club {
     display: block
; 
    width: 80%;
}

footer div:nth-child(2) {
    font-size: 1rem;
}
#policy article div:first-child {
     margin-right: 0; 
}

.links {
    display: block;
    width: 85%;
}

#links table:first-of-type{
  margin-bottom: 0;
}

#links table:nth-child(2){
  margin-top: 0;
}

	}/*追加指定ここまで*/





	#main_catch{
	/*position: relative;*/
	max-width: 1200px;
    width: 100%;
    /* max-width: 800px; */
    margin: auto;
}

	#main_catch .img01 img{
	position: absolute;
        top: 25%;   /* 親要素の高さに対して20%の位置 */
  left: 10%;  /* 親要素の幅に対して10%の位置 */
  width: 27%; /* レスポンシブにするため%で指定 */
        height: auto;
        z-index: 2;
}

#main_catch .img02 img{
	position: absolute;
        top: 39%;   /* 親要素の高さに対して20%の位置 */
  left: 10%;  /* 親要素の幅に対して10%の位置 */
  width: 45%; /* レスポンシブにするため%で指定 */
        height: auto;
        z-index: 2;
}

#main_catch .img03 img{
	position: absolute;
        top: 74%;   /* 親要素の高さに対して20%の位置 */
  left: 10%;  /* 親要素の幅に対して10%の位置 */
  width: 23%; /* レスポンシブにするため%で指定 */
        height: auto;
        z-index: 2;
    
}