@charset "utf-8";
/*=====================
	header
=====================*/
header {
    background: #fff;
    border-image: linear-gradient(to right, #B24592, #d9a7c7, #F15F79) 1/ 4px 0 0 0;
    border-style: solid;
    border-image-slice: 1;
}
@media screen and (min-width: 769px) {
    h1 {
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    margin: 20px auto;
}
    h1 img {
        width: 200px;
    }
	nav.global-navi ul {
        width: 1020px;
        font-size: 20px;
        font-weight: bold;
		text-align: center;
        margin: 18px auto;
	}
	nav.global-navi ul li {
		display: inline-block;
		width: 20%;
	}
	nav.global-navi ul li a {
        display: block;
        width:100%;
		color: #4E4848;
		text-decoration: none;
        padding: 10px 0;
	}
	nav.global-navi ul li a:hover {
		color: #fff;
		background: #F15F79;
	}
	.menu_background {
		display: none;
	}
	.menu_checkbox {
		display: none;
	}
	.menu_icon {
		display: none;/*ハンバーガーメニューを表示しない*/
	}
}
@media screen and (max-width: 768px) {
    h1 {
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    margin: 6px auto;
    }
    h1 img {
        width: 140px;
    }
	nav.global-navi {
        display: none; /*通常時はメニューを非表示*/
        background-color: rgba(255,255,255,.8); /*メニュー背景色*/
		width: 50%; /*メニュー横幅*/
		height: 100%;
		position: fixed;
        top:0;
		left: 0; /*メニュー横幅 width と合わせる*/
		transition: transform 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
        margin:0 auto;
		padding: 10px 20px;
		z-index:999;
	}
	nav.global-navi ul {
		width: 100%;
        font-size: 16px;
        font-weight: bold;
		text-align: left;
        margin:  auto;
	}
	nav.global-navi ul li {
		display: block;
        width: 100%;
	}
	nav.global-navi ul li:first-child {
        margin-top: 40px;
	}
	nav.global-navi ul li a {
        display: block;
        width:100%;
		color: #4E4848;
		text-decoration: none;
        padding: 16px 10px;
	}
	nav.global-navi ul li a:hover {
		color: #fff;
		background: #F15F79;
	}
	.menu_background {
		display: none;
	}
	.menu_checkbox {
		display: none;
	}
	.menu_background {
        width: 100%;
		height: 100%;
		opacity: 0;
		position: fixed;
		right: 0;
		transition: all 0.3s linear 0s; /*0.3s はアニメーションにかかる時間*/
	}
	.menu_icon {
		border-radius: 0 0 10px 0; /*右下角丸*/
		cursor: pointer;
		display: block;
		height: 20px; /*アイコン縦高さ*/
        position: absolute;
		top: 0;
		left: 0;
		width: 25px; /*アイコン横幅*/
        margin: 16px 0 0 10px;
		z-index: 1001;
	}
	/*ハンバーガーメニューの真ん中の線をbox-shadowで描画*/
	.menu_icon::before {
		-webkit-box-shadow: #F15F79 0 9px 0;
		box-shadow: #F15F79 0 9px 0;
	}
	.menu_icon::after {
		bottom: 0;
	}
	/*ハンバーガーメニューの上下の線*/
	.menu_icon::before,  .menu_icon::after {
		width: 25px; /*線の幅*/
		height: 2px; /*線の太さ*/
		background: #F15F79;
		display: block;
		content: '';
		position: absolute;
		-webkit-transition: -webkit-box-shadow 0.2s linear, -webkit-transform 0.2s 0.2s;
		transition: box-shadow 0.2s linear, transform 0.2s 0.2s;
	}
	.menu_checkbox:checked ~ .global-navi {
		display: block;
	}
	.menu_checkbox:checked ~ .menu_icon {
		position: fixed;
	}
	.menu_checkbox:checked ~ .menu_icon::before {
		-webkit-box-shadow: transparent 0 0 0;
		box-shadow: transparent 0 0 0;  /*メニュー展開時に真ん中の線を消す*/
		-webkit-transform: rotate(45deg) translate3d(5px, 8px, 0);
		transform: rotate(45deg) translate3d(5px, 8px, 0);
	}
	.menu_checkbox:checked ~ .menu_icon::after {
		-webkit-transform: rotate(-45deg) translate3d(5px, -8px, 0);
		transform: rotate(-45deg) translate3d(5px, -8px, 0);
	}
	.menu_checkbox:checked ~ .menu_background {
		opacity: 0.5;
		z-index: 999;
		display: block;
	}
}
/* copyright yuki_inoue* */