html {}
body{ font-size:12pt; line-height:2em; background-color:#fff; color:#000; font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;}

.smablank50{ position:relative; float:left; display:block; height:50px;}
.smablank100{ position:relative; float:left; display:block; height:100px;}
.smablank150{ position:relative; float:left; display:block; height:150px;}
.smablank200{ position:relative; float:left; display:block; height:200px;}
.smablank250{ position:relative; float:left; display:block; height:250px;}
.smablank300{ position:relative; float:left; display:block; height:300px;}

.bg-bege{background-color:#FDF9E7;}

/* 点滅 */
.blinking{
	-webkit-animation:blink 1.2s ease-in-out infinite alternate;
    -moz-animation:blink 1.2s ease-in-out infinite alternate;
    animation:blink 1.2s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0.3;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0.3;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0.3;}
    100% {opacity:1;}
}
/*
********************************************************************************************************************************
global navigation
********************************************************************************************************************************
*/
#menugn{ width:100%; background-color:#FFFBE2; z-index:10000; /*height:100px*/ margin-top:0; padding-bottom:10px; margin-bottom:15px;;}
#menugncons{ width:100%; background-color:#FFF; z-index:10000; /* height:380px;*/ margin-top:30px; margin-bottom:30px;}
@media screen and (max-width : 992px ){
#menugncons{ height:150px;}
}

.fix-header {	position: fixed;	top: 0;	opacity:0;	width:100%; padding:0px 0 0px 0; background-color:rgba(252, 241, 205,0.9); border-bottom:#C9C9C9 1px solid;	 z-index:400;}

.gnavi{ display: flex; list-style: none; z-index:550; margin-top:10px;}
.gnavi li a{ display: block; padding:10px 12px; font-size:1.4rem; text-decoration: none; color: #000000;}
.gnavi li{ position: relative; margin:0 10px;}

/*線の基点位置*/
.gnavi li::before,.gnavi li::after{ content:""; position: absolute; width: 0; height:2px; background:#E57BA8; transition: all 0.2s linear; transition-delay: 0.2s; }
.gnavi li::before{ right: 0; top: 0;}
.gnavi li::after{ left: 0; bottom: 0;}

/*線の基点位置2 spanタグ*/
.gnavi li span{ display: block;}
.gnavi li span::before,.gnavi li span::after{  content:""; position: absolute; width:2px; height:0; background: #E57BA8; transition: all 0.2s linear;}
.gnavi li span::before{ left: 0; top: 0;}
.gnavi li span::after{ right: 0; bottom: 0;}

/*現在地とhoverした際の線の変化*/
.gnavi li.current::before,.gnavi li.current::after,.gnavi li:hover::before,.gnavi li:hover::after{ width: 100%;/*横幅を100%に*/}
.gnavi li.current span::before,.gnavi li.current span::after,.gnavi li:hover span::before,.gnavi li:hover span::after{ height: 100%;/*縦幅を100%に*/}

.pushdown {position:relative; width:100%; height:100%; transition: 0.5s all; z-index:50000;}
.pushdown:hover {transform:translateY(4px);}
/*
********************************************************************************************************************************
menu スマフォ
********************************************************************************************************************************
*/

@media screen and (max-width : 992px ){
.fix-sp-header{ position:fixed; display:block; width:100%; height:95px; padding-bottom:40px; left:0; background:#ffffff; z-index:9000;	opacity:0;}

#menu_sp_base{ display:block; position:fixed; width:100%; height:85px; top:0; left:0; padding-top:20px; background:#ffffff;box-sizing:border-box; z-index:9997;}
.sp-logo { height:50px; margin-left:15px; margin-top:-5px;} /*ロゴ*/

.mbtopmargin {margin-top: 100px;}

.menu_sp_icon_base{display:block;width:180px;height:55px;position:absolute;right:65px;top:15px; text-align:center;}
.menu_sp_icon{ float:left; width:70px; margin-left:10px; }
.menu_sp_icon img{height:55px;}

#navigation {
	width:100%;
	height:100%;
	display: block;
	position: fixed;
	top:85px;
	right:0;
	overflow:auto;
	color:rgba(0, 23, 100,1.0);
	-webkit-transform: translate3d(200%, 0, 0);
	-ms-transform: translate3d(200%, 0, 0);
	transform: translate3d(200%, 0, 0);
	-webkit-transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1),opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
	-ms-transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1),opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1),opacity 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
	z-index: 9999 !important;
}

#navigation.show {
	z-index: 9998 !important;
	position: fixed;
	right:0;
	opacity: 1;
	overflow:visible;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
	-ms-transform: translate3d(0, 0, 0);
	-webkit-transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
	-ms-transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
	transition: transform 300ms cubic-bezier(0.645, 0.045, 0.355, 1);
}

#navigation:before {
content:"";
display:block;
z-index: -1 !important;
position: fixed;
left: 0;
top:0;
width:500%;
height:100%;
background:#fff;
color:rgba(0, 23, 100,1.0);
}

#sp-menu {margin-top:0;width: 100%;height:100%;overflow:auto;-webkit-overflow-scrolling: touch;display:block;}
/*スクロールバー*/
#sp-menu::-webkit-scrollbar{width:4px;}
#sp-menu::-webkit-scrollbar-track{background:#fff;}
#sp-menu::-webkit-scrollbar-thumb{background:#edd634;}


/*ナビゲーション内のli全体*/
#navigation li {padding: 0;	display:block;background:#ffffff;}
#navigation li a {display: block;position:relative;
width:calc(100% - 30px);
margin:0 auto;
height:44px;
padding-top:11px;
bpx-sizing:border-box;
text-align: center;
text-decoration: none;
border-bottom: 1px solid #88B2DB;
font-size:1.4rem;
color:#88B2DB;
padding-left:0;
line-height:20px;
-webkit-transition: background 0.4s ease;
-moz-transition: background 0.4s ease;
-o-transition: background 0.4s ease;
transition: background 0.4s ease;
}

/*トグル部分*/
#navigation li .btm_toggle{display:none; background:#efefef; width:calc(100% - 30px);margin:0 auto;}
.toggle-li h5{font-size:15px;	margin-bottom:0px; width:calc(100% - 30px); padding: 17px 0; border-bottom: 2px solid rgba(0, 23, 100,1.0); font-weight:bold; margin: 0 auto; position:relative; text-align: center; cursor:pointer;}
.toggle-li h5:before{content:"+";display:block;position:absolute;top:13px;right:17px;color:rgba(207, 0, 28,1.0);font-size:20px;font-weight:nomal;text-align:center;}
.toggle-li h5.active:before{content:"-";}

#navigation .link_box{width:100%;}

.togglenone-li h5{padding:0;border-bottom: none;}
.togglenone-li h5:before{display:none;}
.togglenone-li h5 a{padding: 17px 0;height:auto;font-size:15px;margin-bottom:0px;width:100%;border-bottom: 2px solid rgba(0, 23, 100,1.0);font-weight:bold; margin: 0 auto;position:relative; text-align: center; cursor:pointer;}

.oc{pointer-events: all;}

/*#navigation li a:before{content:"";position:absolute;width:9px;height:12px;right:15px;top:18px;margin:auto;background-size:cover;}*/
#navigation li a:hover {opacity: 1;	background:#88B2DB; color:#ffffff;	z-index:9999;}

/*ハンバーガーメニュー*/
#menu {width: 65px; height: 65px; position: fixed; top: 7px; right: 7px; cursor: pointer; z-index: 9999;background-color: transparent;}/*スマフォトグルボタンの色変更はココ*/
#menu span,#menu:before,#menu:after {content: "";width: 50%;height: 2px;display: block;background-color: #000;position: absolute;right:16px;top: 16px;-webkit-transform-origin: center center;transform-origin: center center;-webkit-transition: all 0.2s ease;-moz-transition: all 0.2s ease;-o-transition: all 0.2s ease;transition: all 0.2s ease;z-index: 9999;} /*ハンバーガーメニューの色など*/
#menu:before {margin-top: 0px;z-index: 9999;}
#menu:before {margin-top: 0px;z-index: 9999;}
#menu span {margin-top: 7px;z-index: 9999;}
#menu span:before{content:"MENU";position:absolute;top:16px;left:0;color:#585652;font-size:12px;font-weight:700;} /*menu文字*/

#menu:after {margin-top: 15px;z-index: 9999;}
#menu:hover:before {-webkit-transform: translate3d(0, -2px, 0);transform: translate3d(0, -2px, 0);}
#menu:hover:after {	-webkit-transform: translate3d(0, 2px, 0);transform: translate3d(0, 2px, 0);}
#menu.show {position:fixed;z-index:9999; top: 7px; right: 7px;height:65px;}
#menu.show span {z-index: 9999;opacity: 0;}
#menu.show:before {-webkit-transform: translate3d(0, 9px, 0) rotate3d(0, 0, 1, 45deg);transform: translate3d(0, 9px, 0) rotate3d(0, 0, 1, 45deg);background-color: #000;z-index: 9999;margin-top:4px;} /*×ボタンの色変更など*/
#menu.show:after {-webkit-transform: translate3d(0, -9px, 0) rotate3d(0, 0, 1, -45deg);transform: translate3d(0, -9px, 0) rotate3d(0, 0, 1, -45deg);background-color: #000;z-index: 9999;margin-top:22px;} /*×ボタンの色変更など*/

/*スライドして現れたメニューのフッタ情報*/
#spmenu_info{margin-top:20px;}

#spmenu_info h1{width:50%;float:none;margin:0 auto;}
#spmenu_info p{text-align:center;padding:15px 15px 20px;box-sizing:border-box;font-size:12px;line-height:24px;margin-left:0;}
#spmenu_info ul{height:150px;-js-display: flex;display:-webkit-box;display: -webkit-flex;display:-moz-box;display:-ms-flexbox;display: flex;-webkit-justify-content: space-between;justify-content: space-between;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;position:relative;z-index:9997;margin: 0 auto;width:184px;}
#spmenu_info ul li{	}
	
#spmenu_info ul li a{display:block;width:100%;padding:0;border:0;}

#spmenu_info ul .fb{width:26px;}
#spmenu_info ul .twi{width:31px;}
#spmenu_info ul .insta{width:25px;}
#spmenu_info ul .line{width:25px;}
}

/*
********************************************************************************************************************************
main content
********************************************************************************************************************************
*/
#maincontent{position:relative; width:100%;}
/*
********************************************************************************************************************************
slider
********************************************************************************************************************************
*/
#header{ width:100%; height: 75vh;}
.slider-mb {
 position:relative;
	z-index: 1;
	height:85vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

/*　背景画像設定　*/
.slider-photo01-mb {background:url(../WebP/catch-top01m.webp);}
.slider-photo01-mbyear {background:url(../WebP/catch-top01m-year.webp);}
.slider-photo02-mb {background:url(../WebP/catch-top02m.webp);}
.slider-photo03-mb {background:url(../WebP/catch-top03m.webp);}
.slider-photo04-mb {background:url(../WebP/catch-top04m.webp);}
.slider-photo05-mb {background:url(../WebP/catch-top05m.webp);}
.slider-photo06-mb {background:url(../WebP/catch-top06m.webp);}
.slider-photo07-mb {background:url(../WebP/catch-top07m.webp);}
.slider-photo08-mb {background:url(../WebP/catch-top08m.webp);}
.slider-photo09-mb {background:url(../WebP/catch-top09m.webp);}
.slider-photo10-mb {background:url(../WebP/catch-top10m.webp);}

.slider-photo-mb {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:85vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-photo全体を覆い表示*/
}

.slider {
 position:relative;
	z-index: 1;
	height:60vh;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
}

/*　背景画像設定　*/
.slider-photo01 {background:url(../WebP/catch-top01.webp);}
.slider-photo01-year {background:url(../WebP/catch-top01-year.webp);}
.slider-photo02 {background:url(../WebP/catch-top02.webp);}
.slider-photo03 {background:url(../WebP/catch-top03.webp);}
.slider-photo04 {background:url(../WebP/catch-top04.webp);}
.slider-photo05 {background:url(../WebP/catch-top05.webp);}
.slider-photo06 {background:url(../WebP/catch-top06.webp);}
.slider-photo07 {background:url(../WebP/catch-top07.webp);}
.slider-photo08 {background:url(../WebP/catch-top08.webp);}
.slider-photo09 {background:url(../WebP/catch-top09.webp);}
.slider-photo10 {background:url(../WebP/catch-top10.webp);}

.slider-photo {
    width: 100%;/*各スライダー全体の横幅を画面の高さいっぱい（100%）にする*/
    height:60vh;/*各スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/
    background-repeat: no-repeat;/*背景画像をリピートしない*/
    background-position: center;/*背景画像の位置を中央に*/
    background-size: cover;/*背景画像が.slider-photo全体を覆い表示*/
}

.slider-mb { position:relative; z-index:1;/*↑z-indexの値をh1のz-indexの値よりも小さくして背景に回す*/	height: auto;/*スライダー全体の縦幅を画面の高さいっぱい（100vh）にする*/}

/*矢印の設定*/
.slick-prev, .slick-next {position: absolute;z-index: 3;top: 50%;cursor: pointer;/*マウスカーソルを指マークに*/outline: none;/*クリックをしたら出てくる枠線を消す*/border-top: 2px solid #E57BA8;/*矢印の色*/border-right: 2px solid #E57BA8;/*矢印の色*/height: 25px;width: 25px;}
.slick-prev {/*戻る矢印の位置と形状*/left:2.5%;transform: rotate(-135deg);}
.slick-next {/*次へ矢印の位置と形状*/right:2.5%;transform: rotate(45deg);}

/*ドットナビゲーションの設定*/
.slick-dots {position: relative;z-index: 3;text-align:center;margin:-50px 0 0 0;/*ドットの位置*/}
.slick-dots li {display:inline-block;margin:0 5px;}
.slick-dots button {color: transparent;outline: none;width:8px;/*ドットボタンのサイズ*/height:8px;/*ドットボタンのサイズ*/display:block;border-radius:50%;background:#fff;/*ドットボタンの色*/}
.slick-dots .slick-active button{background:#E57BA8;/*ドットボタンの現在地表示の色*/}

.slider-item li img { width:80%;}


/*
********************************************************************************************************************************
見出しタイトル
********************************************************************************************************************************
*/
#titlecatch {position:relative; width:100%; }
.bg-ayumi { background-image:url(/images/bg-ayumi.webp); background-position:center center; background-repeat:no-repeat; background-size: cover; }
.bg-greeting {background-image:url(/images/bg-greeting2.webp); background-position:center center; background-repeat:no-repeat; background-size: cover;}
.bg-project {background-image:url(/images/bg-project2.webp); background-position:center center; background-repeat:no-repeat; background-size: cover;}

/*箇条書きの二行目を一段下げる*/
li{text-indent: -0.6em;}
dd{text-indent: -0.7em;padding-left: 3em;}


/*lity が開いているときにlityをスクロールできるようにする改造css*/
.lity-wrap { z-index: 99990; position: fixed; top: 0; right: 0; bottom: 0; left: 0; padding: 20px; text-align: center; outline: none !important; overflow: scroll; display: flex; align-items: center; justify-content: center; }
.lity-content > * {  max-height: none !important;  }
.lity-image img { margin: 0 auto; max-width: 100%; display: block; line-height: 0; border: 0; }

/*
********************************************************************************************************************************
page-top
********************************************************************************************************************************
*/
/*リンクを右下に固定*/
#page-top {	position: fixed;	right: 10px;	bottom:40px;	opacity: 0;	transform: translateY(150px); z-index:900;}
/*　上に上がる動き　*/
#page-top.UpMove{	animation: UpAnime 0.5s forwards;}
@keyframes UpAnime{  from {    opacity: 0;	transform: translateY(150px);  }  to {opacity: 1;	transform: translateY(0);  }}
/*　下に下がる動き　*/
#page-top.DownMove{	animation: DownAnime 0.5s forwards;}
@keyframes DownAnime{  from {  	opacity: 1;	transform: translateY(0);  }  to {opacity: 1;	transform: translateY(150px);  }}
/*画像の切り替えと動き*/
/*
#page-top a {	display: block;	width: 80px;	height: 80px;	color: #333;	text-align: center;	text-transform: uppercase; 	text-decoration: none;	font-size:0.6rem;	background: url("../img/rocket_base.svg") no-repeat center;	background-size: contain;}
#page-top.floatAnime a{	width: 80px;	height: 80px;	background: url("../img/rocket.svg") no-repeat center;	background-size: contain;	animation: floatAnime 2s linear infinite; opacity: 0;}
@keyframes floatAnime {
  0% { transform: translateX(0); opacity: 0; }
  25% { transform: translateX(-6px);opacity: 1; }
  50% { transform: translateX(0) }
  100% { transform: translateX(6px);opacity: 1; }
}
*/

/*Page Topと書かれたテキストの位置*/
#page-top span{ position: absolute; bottom: -11px; right: 20px;	color: #333; font-weight: bold; line-height: 1.3;}
#page-top.floatAnime span{ bottom: -30px;}
/*
********************************************************************************************************************************
footer
********************************************************************************************************************************
*/
#footer { bottom:0; padding-top:50px; padding-bottom:20px; line-height:20px; background-color:#FFFBE2; color:#3B3B3B; }
#footer a{ color:#36ABDD;text-decoration:none;}