@font-face {
	font-family:Draco-Regular;
	src: url('/font/Draco-Regular.eot'); /* IE9 Compat Modes */
	src: local(Draco-Regular), /* フォントがローカルにインストールされている場合に有効 */
	     url('/font/Draco-Regular.eot?#iefix') format('embedded-opentype'), /* eof - IE6-IE8 */
	     url('/font/Draco-Regular.woff') format('woff'), /* woff - Modern Browsers */
	     url('/font/Draco-Regular.ttf')  format('truetype'); /* ttf - Safari, Android, iOS */
}
@font-face {
	font-family:Draco-Bold;
	src: url('/font/Draco-Bold.eot'); /* IE9 Compat Modes */
	src: local(Draco-Bold), /* フォントがローカルにインストールされている場合に有効 */
	     url('/font/Draco-Bold.eot?#iefix') format('embedded-opentype'), /* eof - IE6-IE8 */
	     url('/font/Draco-Bold.woff') format('woff'), /* woff - Modern Browsers */
	     url('/font/Draco-Bold.ttf')  format('truetype'); /* ttf - Safari, Android, iOS */
}

* {  
	margin: 0;  
	padding: 0;
	font-style:normal;
	-webkit-font-smoothing: subpixel-antialiased;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
} 
html {
	height: 100%;
	overflow-y: scroll;  
}   
body{
	height: 100%;
	font-size: 16px;
	text-align: center;
	background-color: rgba(251,252,253,1);
	margin: 0 auto;
	text-decoration : none ;
	 -webkit-text-size-adjust: 100%; /* ios safariの横向きに対応 */
	/* text-rendering: optimizeLegibility; */
	
}
canvas {
	display: block;
}
header,#main,footer,img {
	width: 100%;
}
img {  
	border: 0;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
	transition: all 0.5s;
}
address {  
	font-style: normal;  
}
h1, h2, h3, h4 {
	font-weight: 300;
}
ul{
	list-style-image: none;
	list-style-type:none;
}
a:link { text-decoration : none ;}
a:visited { text-decoration : none ;}
a:active { text-decoration : none ;}
a:hover { text-decoration : none ;} 

section {
	transition: all 0.5s;
}
button {
	border-style: none;
	background-color: rgba(0,0,0,0);
	outline: 0;
}
button:active {
	border-style: none;
	background-color: rgba(0,0,0,0);
	outline: 0;
}
input {
	display: none;
}



/*ヘッダーぼかしライブラリ　safari以外に使用
  oblurlay v0.1.1
  Licensed under MIT
  Author : blivesta  ---------------------------------------------------- */
  
.oblurlay {	
	height: 100%;
} 
.oblurlay-upper {	
	overflow: hidden;
	-webkit-filter: saturate(220%);	
	filter: saturate(220%);
}
.oblurlay-contents {
	position: relative;
}
.oblurlay-contents-clone {
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	opacity: 1;
}
.oblurlay-svg {
	height: 0;
}
/*  ここまでoblurlay------------------------------------------------------- */

/* ヘッダー用のぼかし設定 */
.headerblur{
	height: 70px;
	width: 100%;
	z-index:4;
	position: fixed;
	background-color: rgba(255,255,255,0.3);
	transition: all 0.4s;
}
#menublur{ /* メニューアイコン用のブラー(safariと他のブラウザで異なるメニューの透明度を調節するためにも活用) */
	height: 50px;
	width: 100px;
	z-index:4;
	position: absolute;
	right: 0;
	opacity: 0;
	display: none;
	transition: all 0.4s;
	border-radius: 0px;
	background-color: rgba(255,255,255,0);
}
#menu-switch:checked ~ #menublur{ /* メニューボタンクリック後、メニューの縦幅を広くする */
	height: 290px;
	opacity: 1;
	background-color: rgba(255,255,255,0.6);
}


/* safari向けのブラー設定　代わりにbackdrop-filterを使用 */
@supports ( ( -webkit-backdrop-filter: blur(25px) ) or ( backdrop-filter: blur(25px) ) ){
    .headerblur,
    #menublur,
    .oblurlay-upper,
    .oblurlay-contents-clone,
    .oblurlay-svg{
	display: none;
	visibility: hidden;
    }
}


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

header {
	max-width: 100%;
	height: 50px;
	padding-top: 20px;
	background-color: rgba(255,255,255,0.7);
	border-bottom: solid 1px rgba(110,128,150,0.13);
	color: rgba(0,0,0,0.6);
	font-kerning: auto;
	position: fixed;
	font-family: 'Akko W01 Light', MyriadPro-Regular, "Lucida Grande", LucidaSans, sans-serif;
	z-index: 5;
	transition: all 0.4s;
	-webkit-backdrop-filter: saturate(180%) blur(25px);
	backdrop-filter: saturate(180%) blur(25px);
}
header > nav {
	max-width: 1200px;
	height: 50px;
	margin: 0 auto;
	letter-spacing: 0.02em;
	font-weight: normal;
}
header h1 {
	float: left;
	font-size: 21.4px;
	padding-left: 75px;
	text-align: left;
	font-weight: normal;
	z-index: 5;
	transition: all 0.5s;
}
header h1 img {
	width: 13px;
	float: left;
	margin-top: 5px;
	margin-right: 9px;
}
header h1 span {
	padding-top: 12px;
	float: left;
	letter-spacing: 0.06em;
}
header a:link, 
header a:visited {
	color: rgba(0,0,0,0.6);
}



/* グローバルメニュー ================== */

#globalmenu {
	float: right;
	margin-top: 16px;
	margin-right: 77px;
	font-size: 15px;
	font-weight: 100;
	transition: all 0.5s;
}
#globalmenu li {
	float: left;
	margin-right: 3.89em;
	transition: all 0.4s;
}
#globalmenu li:nth-of-type(4) {
	margin-right: 0;
}
#globalmenu a {
	transition: all 0.2s;
}
#globalmenu a:hover {
	color: #42b4cc;
}

/* ここまでグローバルメニュー =========== */





/* グローバルメニューボタン(小さい画面向け) ================================================================================== */

.globalblock { /* メニューボタンを入れるブロック　ヘッダーと同じ幅で、この中にメニューボタンを右寄せして配置 */
	will-change: scroll-position;
	max-width: 1200px;
	width: 100%;
	position: fixed;
	transition: all 0.4s;	
}


/* メニューボタン開閉アニメーション用の隠しチェックボックス */
#menu-switch + label {
	width: 100px;
	height: 50px;
	top: 0;
	right: 0;
	position: absolute;
	z-index: 20;
	cursor: pointer;
}
.close-menu { /* 画面のどこを押してもチェックボックスがオフになり、メニューが閉じるように設定 */
	position: fixed;
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0;
	z-index: 4;
	display: none;
}
#menu-switch:checked ~ .close-menu {
	display: block;
}


/* グローバルメニューボタン(角丸トリミング) 角丸にできない-webkit-backdrop-filterをトリミングする */
.globalbutton { 
	overflow: hidden; /* safari用ブラーを角丸に対応させる */
	display: none;
	border-radius: 0;
	width: 100px;
	height: 50px;
	margin-left: auto;
	top: 0;
	right: 0;
	position: absolute;
	z-index:7;
	font-weight: 200;
	text-align: center;
	transition: all 0.4s;
	-moz-user-select: none;
	-webkit-user-select: none;
	-ms-user-select: none;
	user-select: none;
}
#menu-switch:checked ~ .globalbutton { /* メニューボタンクリック後、メニューの縦幅を広くする */
	height: 290px;
	display: block;
}
.no-js .globalbutton { /* JS無効時 */
	border-radius: 0;
}


/* グローバルメニュー(トリミング前) */
.button-box { 
	height: 50px;
	text-align: right;
	transition: all 0.4s;
	background-color: rgba(255,255,255,0);
	-webkit-backdrop-filter: blur(0px);
	backdrop-filter: blur(0px);
}
#menu-switch:checked ~ .globalbutton .button-box { /* メニューボタンクリック後、メニューの縦幅を広くする */
	height: 290px;
	background-color: rgba(255,255,255,0.75);
	-webkit-backdrop-filter: saturate(180%) blur(25px);
	backdrop-filter: saturate(180%) blur(25px);
}
.no-js .button-box { /* JS無効時 */
	background-color: rgba(255,255,255,0.75);
	-webkit-backdrop-filter: saturate(180%) blur(25px);
	backdrop-filter: saturate(180%) blur(25px);
}



/* button-boxの内部------------------------------------------------------------- */

.switch-block {
	width: 100px;
	height: 50px;
	transition: all .3s;
}
#menu-switch:checked ~ .globalbutton .switch-block {
	background-color: rgba(0,0,0,0.5);
	color: rgba(255,255,255,0.8);
}


.menu-title { /* ボタンのキャプション */
	width:55px;
	padding-top: 15px;
	padding-right: 6px;
	float: right;
	font-weight: 200;
	font-size: 16.5px;
}
.menu-title span:nth-of-type(2) {
	display: none;
}
#menu-switch:checked ~ .globalbutton .menu-title { /* キャプションの位置の微調整 */
	padding-right: 5px;
}
#menu-switch:checked ~ .globalbutton .menu-title span:nth-child(1) {
	display: none;
}
#menu-switch:checked ~ .globalbutton .menu-title span:nth-child(2) {
	display: block;
}

/* メニューアイコン----------------------------------------------- */

.menu-icon {
	position: relative;
	width: 15px;
	height: 15px;
	margin-top: 18px;
	margin-right: 18px;
	float: right;
	transition: all 0.2s;
	box-sizing: border-box;
}
.menu-icon span {
	position: absolute;
	left: 0;
	width: 100%;
	height: 2px;
	border-radius: 0px;
	display: inline-block;
	transition: all 0.2s;
	box-sizing: border-box;
}
.m-line01 { /*アイコン上側の棒*/
	top: 0; 
	background-color: rgba(0,0,0,0.6);
} 
.m-line02a { /*アイコン中央の棒*/
	top: 6px;
	background-color: rgba(0,0,0,0.6);
} 
.m-line02b { /*変形後のバツ印用の棒*/
	top: 6px;
	background-color: rgba(0,0,0,0);
}
.m-line03 { /*アイコン下側の棒*/
	bottom: 1px; 
	background-color: rgba(0,0,0,0.6);
} 


/*メニューボタンクリック後にメニューアイコンを変形させ、閉じるアイコンに変える */

#menu-switch:checked ~ .globalbutton .m-line01 {
	-webkit-transform: translate(50%) scale(0);
	transform: translate(50%) scale(0);
}
#menu-switch:checked ~ .globalbutton .m-line02a {
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
	background-color: rgba(255,255,255,0.8);
}
#menu-switch:checked ~ .globalbutton .m-line02b {
	background-color: rgba(255,255,255,0.8);
	-webkit-transform: rotate(135deg);
	transform: rotate(135deg);
}
#menu-switch:checked ~ .globalbutton .m-line03 {
	-webkit-transform: translate(-50%) scale(0);
	transform: translate(-50%) scale(0);
}

/* ここまでメニューアイコン------------------------------------------- */




/* グローバルリンクボタン縦(Design About Link HOME)------------------- */

.v-globalmenu{
	font-size: 15.5px;
	font-weight: 200;
	text-align: center;
	z-index: 8;
}
#menu-switch:checked ~ .globalbutton .v-globalmenu{ /* メニューボタンクリック後、メニューの内容を表示 */
	display: block;	
}

.v-globalmenu li {
	display: block;
	margin:0 auto;
	line-height: 22px; 
}
.v-globalmenu li:nth-child(1) {
	line-height: 23px; 
}
.v-globalmenu li a{
	display: inline-block;
	width: 100px;
	height: 41px;
	padding-top: 18px;
	border-top: solid 1px rgba(20,60,120,0.1);
}
.v-globalmenu li a:hover{
	background-color: rgba(30,60,60,0.08);
	border-top: solid 1px rgba(20,60,120,0);
}

/* ここまでグローバルリンクボタン------------------------------------- */

/* ここまでbutton-boxの内部------------------------------------------------------------- */

/* ここまでグローバルメニューボタン=========================================================================================== */

/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ここまでヘッダー///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */






/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* メインコンテンツ///////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */

#main{
	max-width: 1200px;
	min-height: 100%;
	margin: 0 auto;
	color: #222222;
	text-align: left;
	overflow: hidden;
	z-index: 3;
	transition: all 0.5s;
	font-weight: 300;
	font-family: 'Akko W01 Light', "ヒラギノ角ゴシック", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ W3 JIS2004", "游ゴシック体", "Yu Gothic", YuGothic, sans-serif;
}



#home {
	max-width: 240px;
	margin: 25% auto 0;
}
#home img {
	max-width: 120px;
	margin: 0 auto;
	padding-right: 2%;
	display: block;
}
#home h1 {
	margin: 24px auto 25%;
	max-width: 320px;
	text-align: center;
	font-size: 28px;
	color: #42b4cc;
	letter-spacing: 0.2em;
	padding-left: 1%;
	font-family: 'Akko W01 Thin', -apple-system, "ヒラギノ角ゴシック", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ W3 JIS2004", sans-serif;
}





/* Design About Link------------------------------------------------- */

.main-contents { 
	max-width: 1050px;
	margin: 70px 75px 0;
	transition: all 0.5s;
}
.page-intro {
	width: 100%;
	height: 205px;
	padding-top: 160px;
	transition: all 0.5s;
}
.page-intro h1 {
	text-align: center;
	font-weight: 100;
	font-size: 56px;
	line-height: 28px;
	font-kerning: normal;
	color: #42b4cc;
	font-family: 'Akko W01 Thin', -apple-system, "ヒラギノ角ゴシック", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ W3 JIS2004", sans-serif;
}
.page-intro h1 > span {	
	font-weight: 400;
	font-size: 14px;
	letter-spacing: 0.1em;
	margin-left: 3px;
	font-display: optional;
}
#about-page h1,
#link-page h1 {
	line-height: 26px;
}
#about-page section,
#link-page section {
	max-width: 1050px;
	text-align: center;
}

/* ここまでDesign About Link------------------------------------------- */



/* ここからAboutページ------------------------------------- */

#about-01 {
	margin-top: -20px;
	font-family: "解ミン 宙 R", "Kaimin Sora Regular", YuMin-Medium, YuMincho-Regular, "游明朝体", "游明朝", "ヒラギノ明朝 ProN", serif;
}
#about-01 > h2 {
	font-size: 36px;
	margin-top: 14px;
	letter-spacing: 0.07em;
}
#about-01 p:nth-of-type(1) {
	font-size: 20px;
	margin-top: 8px;
	line-height: 1.45em;
}
#about-01 p:nth-of-type(2) {
	font-size: 15px;
	margin-top: 12px;
}
#about-01 > img {
	max-width: 660px;
	margin: 0 auto;
	display: block;
}
#about-02 > p {
	font-size:13px;
	max-width: 535px;
	margin: 50px auto;
	line-height: 2.5em;
}
#about-02 > p > span{
	color: #d71220;
}
#about-03 > p {
	font-size: 13px;
	margin: 100px auto 150px;
	line-height: 2em;
}
#about-M {
	color: #42b4cc;
	font-size: 21px;
}
#about-M a:link, 
#about-M a:visited {
	color: #42b4cc;
}
#about-03 img {
	display: none;
	max-width: 205px;
}
.no-js #about-03 img {
	display: inline-block;
}

/* ここまでAboutページ------------------------------------- */



/* ここからLinkページ-------------------------------------- */

#link-page h2 a:link, 
#link-page h2 a:visited {
	color: #42b4cc;
}
#link-page h2 {
	font-size: 19px;
	color: #42b4cc;
}
.link-index {
	font-size: 28px;
	font-family: 'Akko W01 Thin', -apple-system, sans-serif;
}
#link-02 .link-index {
	vertical-align: -3%;
}
#link-01 > p {
	font-size: 14px;
	margin-top: 4px;
	margin-bottom: 20px;
	line-height: 1.9em;
}
#link-01 > p > span:nth-of-type(1) {
	letter-spacing: 0.1em;
	font-size: 16px;
	color: #333333;
}
#link-01 > p > a {
	color: #1eaa39;
}
#link-02 {
	margin: 120px auto;
	line-height: 1.5em;
	letter-spacing: 0.04em;
}
#link-02-caption {
	font-size: 14px;
	margin-right: 2px;
}
.link-icon {
	width: 20px;
	height: 20px;
	fill: #42b4cc;
	vertical-align: -11%;
}
#link-01 .link-icon {
	margin-left: -4px;
}

/* ここまでLinkページ-------------------------------------- */


/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */
/* ////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////// */








/* ブレークポイント============================================================================== */

/* ウインドウ幅の変化に対応----------------------------------------------- */

@media screen and (max-width: 980px) { /* #mainの幅が839-980pxの時 */
    #globalmenu li{
	margin-right: 3em;
    }
}
@media screen and (max-width: 600px) { /* #mainの幅が470-600pxの時 */
    .headerblur{
	height: 65px;
    }
    header{
	padding-top: 15px;
    }
    header h1{
	padding-left: 31px;
    }
    #globalmenu{
	margin-right: 31px;
    }
    #globalmenu li{
	margin-right: 2em;
    }
    .main-contents{
	margin: 65px 31px 0;
    }
    .page-intro {
	height: 155px;
	padding-top: 110px;
    }
}
@media screen and (max-width: 469px) { /* #mainの幅が0-469pxの時 */
    header{
	position: absolute;
	padding-top: 0;
    }
    header h1{
	padding-left: 16px;
    }
    header h1 img {
	width: 12px;
	margin-top: 8px;
    }
    header h1 span {
	padding-top: 13px;
    }
    .headerblur{
	position: absolute;
	height: 50px;
    }
    #menublur{
	display: block;
	border-top-right-radius : 0;
	border-bottom-right-radius : 0;
    }
    #globalmenu{ 
	display: none;
    }
    .globalbutton{  /* グローバルメニューがアイコンに切り替わる */
	display: block;
    }
    .main-contents{
	margin: 50px 16px 0;
    }
    .page-intro {
	height: 155px;
	padding-top: 102px;
    }
}
@media screen and (max-width: 320px) { /* #mainの幅が0-469pxの時 */
    #home img {
	max-width: 90px;
    }
}
/* ------------------------------------------------------------------- */



/* 横幅が広く縦幅が狭い時------------------------------------------------- */

@media screen and (max-height: 599px) and (min-width: 469px) { /* 縦599px以下　横470px以上の時 = グローバルメニューからメニューボタンに切り替わる */
    .headerblur{
	position: absolute;
    }
    header{
	position: absolute;
    }
    #globalmenu{ 
	display: none;
    }
    #menublur{
	right: 15px;
	display: block;
    }
    #menu-switch + label {
	right: 15px;
    }
    .globalbutton{
	display: block;
	right: 15px;
    }
    .page-intro {
	height: 125px;
	padding-top: 77px;
    }
}

@media screen and (max-height: 599px) and (min-width: 600px) { /* 縦599px以下　横600px以上の時 */
    #menublur{
	right: 75px;
    }
    #menu-switch + label {
	right: 75px;
    }
    .globalbutton {
	right: 75px;
    }
    .page-intro {
	height: 125px;
	padding-top: 82px;
    }
}
@media screen and (min-height: 599px) and (min-width: 469px) { /* 縦599px以上　横470px以上の時 */
    .globalblock{  /* グローバルメニューを消す */
	display: none;
    }
}
/* ------------------------------------------------------------------- */