@charset "UTF-8";

/*================================================
 *  reset
html,body,div,span,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,
abbr,address,cite,code,del,dfn,
em,img,ins,kbd,q,samp,small,strong,
sub,sup,var,b,i,dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,main,menu,nav,section,summary,
time,mark,audio,video{
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	font-weight:normal;
}
body{
	line-height:1;
}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section{
	display:block;
}
ul{
	list-style:none;
}
blockquote,q{
	quotes:none;
}
blockquote:before,blockquote:after,
q:before,q:after{
	content:none;
}
a{
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	color:RGBa(0,112,192,1);
}

del{
	text-decoration:line-through;
}
abbr[title],dfn[title]{
	border-bottom:1px dotted;
	cursor:help;
}
table{
	border-collapse:collapse;
	border-spacing:0;
}
hr{
	display:block;
	height:1px;
	border:0;
	border-top:1px solid RGBa(204,204,204,1);
	margin:1em 0;
	padding:0;
}
input,select{
	vertical-align:middle;
}

 ================================================*/

/*================================================
 *  一般・共通設定
 ================================================*/
.cf:after {  
  content: ".";   
  display: block;   
  height: 0;  
  clear: both;   
  visibility: hidden;  
}  
.cf{
 display: block; 
}

img{
	max-width: 100%;
	height: auto;
	vertical-align:baseline;
}
a:hover img {
  opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: "alpha(opacity=50)";
  transition: opacity 0.5s ease-out;
}

em {
	font-weight:bold;
}

strong {
	font-weight:bold;
	color:RGBa(255,0,0,1);
}

pre {
	margin:1em 0;
	padding:1em;
}

blockquote {
	margin-bottom:1em;
	padding:1em;
	border:1px dotted RGBa(221,221,221,1);
	border-left:5px solid RGBa(221,221,221,1);
}

/*------baseスタイル----------*/
body{
	font-family:"Noto Sans JP", "Helvetica Neue", "Helvetica", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
	font-size: 16px;
	line-height:1.5;
	color:#333;	
	margin:0;
	padding:0;
	}



/*------ヘッダー--------------*/

header#header{
	top: 0;
	height:80px;
	width:100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	text-align: center;
	padding:10px 20px;
}
ul#g_nav{
  list-style: none;
  display: flex;
  justify-content: center;
}
ul#g_nav li{
}

ul#g_nav li a{
  display: block;
  padding:10px;
  transition:all 0.3s;
	color:#333;
	text-decoration:none;
	margin-left:10px;

}

nav ul#g_nav li a:hover{
  color:#dc143c ; 
}

/*jsを使いfixedクラスが付与された際の設定*/
#g_nav.fixed{
	position: fixed;
  z-index: 999;
  top:0;
  right:0;
	width:100%;
	margin-top:0;
}
#g_nav.fixed li{
	background:rgba(255,160,122,0.7);
}
#g_nav.fixed li a:hover{
	color:#fff;
}








/*------main--------------*/

main{
	width:100%;
}
/*トップ画像*/


/*------ボタン設定--------------*/

/*ボタン小*/
.moreBtn_s a{
	width:200px;
	color:darkblue;
	outline:solid 1px darkblue;
	vertical-align:middle;
	text-align:center;
	padding:10px 0;
	border-radius:10px;
	margin:30px auto;
	display:block;
	text-decoration:none;
	color:darkblue;
}
.moreBtn_s a:hover{
	background:rgba(255, 160, 122,0.7);
	color:red;
}

/*ボタン中*/

.moreBtn_m a{
	width:300px;
	vertical-align:middle;
	text-align:center;
	padding:10px 0;
	border-radius:10px;
	margin:30px auto 50px;
	display:block;
	text-decoration:none;
	color:darkblue;
	outline:solid 1px darkblue;
}
.moreBtn_m a:hover{
	background:rgba(255, 160, 122,0.7);
	color:red;
}

 /* トップへ戻る*/
.totop {
	position:fixed;
	bottom:30px;
	right:20px;
	text-align:center;
	vertical-align:middle;
}
.totop a{
	display:block;
	text-decoration:none;
	color:#fff;
	width:50px;
	height:50px;
	line-height:50px;
	background:#333;
	text-align:center;
	vertical-align:middle;
	font-size:40px;
}
.totop a:hover{
	background:rgba(255, 160, 122,0.7);
	color:#1c2b45;

}
.totop img {
	max-width:90%;
}

 /* ページ内スクロール*/
html{scroll-behavior: smooth;
}


/*----section-------------------------*/
section.section{
	padding:30px 15px;
	width:100%;
	margin-bottom:30px;
}
section.section_bg{
	padding:30px 15px;
	background:url(../img/bg_ichigo.png) no-repeat;
	background-size:cover;
	width:100%;
	margin-bottom:30px;
}
section.section_bg_pink{
	padding:30px 15px;
	background:#ffe6ff;
	width:100%;
	margin-bottom:30px;
}

section.section_bg_pink_maru{
	background:#ffe6ff;
	border-top-left-radius: 50%;
  border-top-right-radius: 50%;
  margin-left: -100px;
  margin-right: -100px;
  padding-left: 100px;
  padding-right: 100px;
margin-top:30px;
}
h1.headline{
	text-align:center;
	font-size:40px;
	font-weight:bold;
	margin:0 0 40px;
	font-family: '游明朝 Medium', serif;

}
figure.about{
	display:flex;
}
.about_caption{
	padding:10px 0 0 30px;
}
h2.about_headline{
	font-size:30px;
	font-family: '游明朝 Medium', serif;
	margin:0 0 15px;
}
.about_image{
	width:50%;
	height:auto;
	display:block;
}	
.about_image img{
	border-radius:50px;
}

.about_caption{
	width:50%;
}

ul.experience{
	margin-top:50px;
	padding:0 30px;
	display:flex;
 justify-content: space-between;
	width:100%;
}

ul.experience li{
	position:relative;
	width:30%;
	list-style:none;
	text-align:center;

}
ul.experience dt{
position:relative;
}
ul.experience dt img{
		border-radius:50px;
	width:100%;
}


ul.experience dd{
	font-size:1.1em;
	padding:20px;0;
	margin:0;
position:absolute;
top: 80%;
  left: 50%;
  -ms-transform: translate(-50%,-50%);
  -webkit-transform: translate(-50%,-50%);
  transform: translate(-50%,-80%);
width:100%;
background:rgba(255,255,255,0.6);
}
ul.experience a{
	text-decoration:none;
	color:#333;	

}
ul.experience dd:hover{
	color:red;
}
ul.experience a:hover{
	font-size:1.1em;
}


iframe{
	width:100%;
	height:400px;
}

div.access_txt{
	padding:30px;
		text-align:center;

}

/* 共通のアイコンエフェクト */
ul.socialEffect__box{
	margin:0 auto;
	padding-bottom:30px;
	width:30%;
	display:flex;
	justify-content: space-between;

}

.socialEffect__link {
  margin: .3em;
  display: block;
  width: 60px;
  height: 60px;
  line-height: 60px;
  border-radius: 50%;
  text-align: center;
  position: relative;
  z-index: 1;
  color: #bfbfbf;
  font-size: 1.6rem;
  background: #dc143c;
  transition: transform ease-out 0.2s;
}

.socialEffect__box li {
	list-style:none;
}


/* インスタ用アイコン設定 */
.icon-instagram::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: -1;
  transform: scale(0.9);
}
.fab.fa-instagram {
  display: inline-block;
  color: #fff;
}
.icon-instagram:hover {
  background: radial-gradient(
      circle farthest-corner at 32% 106%,
      rgb(255, 225, 125) 0%,
      rgb(255, 205, 105) 10%,
      rgb(250, 145, 55) 28%,
      rgb(235, 65, 65) 42%,
      transparent 82%
    ),
    linear-gradient(135deg, rgb(35, 75, 215) 12%, rgb(195, 60, 190) 58%);
  transform: scale(0.9);
}

/* フェイスブック用アイコン設定 */
.icon-facebook::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: -1;
  transform: scale(0.9);
}
.fab.fa-facebook-f {
  display: inline-block;
  color: #fff;
}
.icon-facebook:hover {
  background: #3b5998;
  transform: scale(0.9);
}

/* ツイッター用アイコン設定 */


.icon-twitter::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  z-index: -1;
  transform: scale(0.9);
}
.fab.fa-twitter {
  display: inline-block;
  color: #fff;
}
.icon-twitter:hover {
  background: #00b0ed;
  transform: scale(0.9);
}




/*
.experience p{
	width:30%;
	text-align:center;
}
.experience img{
	border-radius:30px;
}
.experience a{
	text-decoration:none;
	color:#333;	
}

	
.experience span{
	background:linear-gradient(transparent 60%, #f6c 60%);
	font-size:1.2em;

}

*/

/*新着情報*/

section ul#news{
	width:60%;
	margin:0 auto;

}
section ul#news li{
	list-style:none;
	display:table;
	width:100%;
	margin-bottom:20px;
}
section ul#news li a{
	color:#333;
	text-decoration:none;
}
section ul#news li a:hover{
	opacity: 0.5;
  filter: alpha(opacity=50);
  -ms-filter: "alpha(opacity=50)";
  transition: opacity 0.5s ease-out;
}

section ul#news li .dateArea{
	display:table-cell;
	width:30%;
}
section ul#news li .newsTxt{
	display:table-cell;
	width:70%;
	border-bottom:dotted #333 1px;
	padding-bottom:10px;

}	




/*------footer--------------*/

/*フッター*/
#footer{
	width:100%;
	height:100px;
	background:navy;
	color:#fff;
text-align:center;

}	
#footer.fixed{
	position: fixed;
  z-index: 1000;
  bottom:0;
  right:0;
	width:100%;
	margin-bottom:0;
}

nav ul#f_nav{
  list-style: none;
  display: flex;
  justify-content: center;
}
nav ul#f_nav li{
}

nav ul#f_nav li a{
  display: block;
  padding:10px;
  transition:all 0.3s;
	color:#fff;
	text-decoration:none;
	margin-left:10px;

}

nav ul#f_nav li a:hover{
  color:red; 
}

#footer p
	padding:10px 0;
｝







@media screen and (max-width:767px) {
	.toggle {
    position:fixed;
    right:10px;
    top:10px;
    display: block;
    width: 60px;
		height:60px;
    cursor: pointer;
    z-index:1000;
    background:#000;

}
	.toggle span {
    display: block;
    position: absolute;
		right:9px;
    width:70%;
    border-bottom: solid 2px #fff;
    -webkit-transition: .35s ease-in-out;
    -moz-transition: .35s ease-in-out;
    transition: .35s ease-in-out;
    padding-top:8px;

	}
	.toggle span:nth-child(1) {
    top: 0px;
	}
	.toggle span:nth-child(2) {
    top: 13px;
	}
	.toggle span:nth-child(3) {
    top: 26px;
	}

	.toggle.active span:nth-child(1) {
    top: 15px;
    left: 4px;
    -webkit-transform: rotate(-45deg);
    -moz-transform: rotate(-45deg);
    transform: rotate(-45deg);
	}
	.toggle.active span:nth-child(2),
	.toggle.active span:nth-child(3) {
    top: 15px;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    transform: rotate(45deg);
	}

	ul#g_nav{
	    position:fixed;
	    top:0;
	    left:-300px;
	  	width:50%;
	    transform: translateX(-100%);
			z-index:100;
	    background:RGBa(0,0,0,0.9);
	    transition: all 0.3s;  
			box-sizing:border-box;
			margin:0;
	}
	#g_nav li{
		width:50%;
		box-sizing:border-box;
		text-align:center;
		border-bottom:dotted 1px #fff;
	}
	#g_nav li:last-child{
		border-bottom:none;
	}
	#g_nav li a{
		width:100%;
		font-size:1em;
		height:60px;
		line-height:60px;
		vertical-align:middle;
		margin-bottom:0;
	}	



	#g_nav.active {
    transform: translateX(300px);
	}

}