@charset "utf-8";


/*========================================================================
															■初期化■
========================================================================*/

html {
	font-size: 100%; /* 初期化 */
	scroll-behavior: smooth;
}

body {
	font-size: 1.6rem; /* 基準フォントサイズ */
	font-family: "メイリオ", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "游ゴシック", "MS Pゴシック", "MS ゴシック", "Osaka", "Helvetica Neue", "Helvetica", "Arial", sans-serif; /* フォント種 */
	color:#333;
	line-height: 1.5em; /* 行間 */

	text-size-adjust: 100%; /* スマホでフォントサイズが変わる現象の回避 */
	-webkit-text-size-adjust: 100%; /* Safari用 */
}

table,tr,td,th {
	border-collapse: collapse; /* 枠線用余白をなしに */
}

a:link,
a:visited,
a:active { /* (全体)リンクカラー */
	color:#005577;
	font-weight:bold;
	text-decoration: none;
}
a:hover{
	color:#6699aa;
}

ul{
  list-style:none;
  margin: 0;
  padding: 0;
}

p{
	padding: 0;
	margin: 0;
}
/*========================================================================
															■一般■
========================================================================*/

/*====================================
					■文字装飾■
====================================*/


.text_normal{
	font-weight: normal;
}

.text_bold{
	font-weight: bold;
}

.text_sub{
	font-size: 0.9em;
	color: #999999;
}

.text_small{
	font-size: 0.9em;
}

.text_mainColor{
	color: #005577;
}

.text_subColor{
	color: #6699aa;
}
.text_gray{
	color: #999999;
}

.text_caution{
	color: #aa0000;
}

/*====================================
					■段落装飾■
====================================*/


.text_center{
	text-align: center;
}

.indent{
	padding-left: 1em;
}

.text_2ndLine_indent{
	text-indent: -1em;
	padding-left: 1em;
}

.bottomSpace{
	padding-bottom: 1em;
}

.bottomSpace_half{
	padding-bottom: 0.5em;
}

/*====================================
					■水平線(hr)■
====================================*/

hr { /* 水平線 */
	border-width: 1px 0px 0px; /* 線の太さ */
	border-style: solid; /* 線種 */
	border-color: #cccccc; /* 線の色 */
	height: 1px; /* いじらないこと */
	margin: 4rem 0 1.5rem 0; /* 線の外側の余白 */
}

hr.type1 { /* 水平線別パターン1(メニュー下用) */
	height: 0px;
	border-style: solid;
	border-color: #000000;
	margin: 0;
	border-width: 4px 0px 0px 0px;
}

hr.type2 { /* 水平線別パターン2(余白なし) */
	height: 1px;
	border-width: 1px 0px 0px 0px;
	border-style: solid;
	border-color: #cccccc;
	margin: 1px;
}

hr.type3 { /* 水平線別パターン3(余白上下1文字) */
	height: 1px;
	border-width: 1px 0px 0px 0px;
	border-style: solid;
	border-color: #cccccc;
	margin: 1em 0;
}


/*====================================
					■見出し(h)■
====================================*/

h1 { /* 各ページの英語見出し */
	text-align: center;
	color: #708ec9;
	font-weight: bold;
	font-size: 1.5rem;
	margin: 0px;
	padding: 0px;
}

h2 { /* 各ページの日本語訳見出し */
	text-align: center;
	color : #aaaaaa;
	font-weight: normal;
	font-size : 1.4rem;
	margin: 0px;
	padding: 0px;
}

h3 { /* 本文中の小見出し */
	text-align: center;
	font-weight: bold;
	font-size : 1.6rem;
	margin: 0px;
	padding: 0.5rem 0 3rem 0;
}

/*====================================
					■その他■
====================================*/

blockquote { /* 引用文 */
	background-color : #fbfefd;
	color : #005577;
	margin :2px 0px;
	padding :1.4rem;
	margin-left: 2em;
	margin-right: 2em;
	border: #99b0b0 1px solid;
}
cite { /* 引用元 */
	display:block;
	font-style: normal;
	text-align: right;
	padding :0.8em 0.5em 0px 0px;
}


/*========================================================================
											■全体レイアウト関係■
========================================================================*/

/*====================================
						■全体幅■
====================================*/

/* ★★★全体(ヘッダー＆ページ見出し＆フッターの横幅)★★★ */
div#Container {
	width:960px;
	margin-top : 0px;
	margin-bottom : 0px;
	margin-left : auto;
	margin-right : auto;
}


/* 本文部 */
div#Main{
	margin-top: 1rem; /* フッターと本文の間のスペース */
}


/* 中枠(各ページの本文部の横幅　※幅は各htmlのWrapper部で個別に設定) */
div#Wrapper {
	margin-top : 0px;
	margin-bottom : 0px;
	margin-left : auto;
	margin-right : auto;
}

/*====================================
					■ヘッダー、メニュー■
====================================*/

/* ヘッダー */
div#Header{
	background-image: url("../images/headerBanner.png");
	width: 100%;
	height: 128px;
	background-repeat: no-repeat;
	text-align: right;
}

div#HeaderText {
	line-height: 1.2em;
	color: #99b0b0;
	padding: 8px 8px;
}


/*====================================
			■ハンバーガーメニュー■
====================================*/

/* 開閉ボタン部 */

.menu-btn {
		position: fixed;
		top: 13px;
		right: 20px;
		display: flex;
		height: 100px;
		width: 100px;
		justify-content: center;
		align-items: center;
		z-index: 90;
		background-color: #005577;
		opacity: 0.8;
}
.menu-btn:hover{
	opacity: 0.65 ;
}

.menu-btn span,
.menu-btn span:before,
.menu-btn span:after {
		content: '';
		display: block;
		height: 6px;
		width: 40px;
		border-radius: 3px;
		background-color: #ffffff;
		position: absolute;
}
.menu-btn span:before {
		bottom: 16px;
}
.menu-btn span:after {
		top: 16px;
}

#menu-btn-check:checked ~ .menu-btn span {
		background-color: rgba(255, 255, 255, 0);/*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
		bottom: 0;
		transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
		top: 0;
		transform: rotate(-45deg);
}

#menu-btn-check {
		display: none;
}


/* メニュー内部 */

.menu-content {
		width: 100%;
		height: 100%;
		position: fixed;
		top: 0;
		left: 100%;/*leftの値を変更してメニューを画面外へ*/
		z-index: 80;
		background-color: #3584bb;
		transition: all 0.3s;/*アニメーション設定*/
		opacity: 0.9;
}
.menu-content ul {
		padding: 120px 10px 0;
}
.menu-content ul li {
		border-bottom: solid 1px #ffffff;
		list-style: none;
}
.menu-content ul li a {
		display: block;
		width: 100%;
		font-size: 2.8rem;
		box-sizing: border-box;
		color:#ffffff;
		text-decoration: none;
		padding: 9px 15px 10px 0;
		margin: 32px 0 0;
		position: relative;
}
.menu-content ul li a::before {
		content: "";
		width: 7px;
		height: 7px;
		border-top: solid 2px #ffffff;
		border-right: solid 2px #ffffff;
		transform: rotate(45deg);
		position: absolute;
		right: 11px;
		top: 16px;
}
#menu-btn-check:checked ~ .menu-content {
		left: 0;/*メニューを画面内へ*/
}

.menu-content_explain{
		font-weight: normal;
		font-size: 0.7em;

}

/*====================================
					■フッター■
====================================*/

/* フッタークラス(「Copyright (C) 2003-20xx Remmings nest All Rights Reserved.」用) */
#Footer {
	background-color: #000000;
	color: #999999;
	font-size: 1.2rem;
	text-align: center;
	padding: 2px 4px;
	margin: 24px 0 0 0;
}

.AA{ /*アスキーアート用行間調整*/
	line-height: 1em;
}

.HIDDEN{ /* 「class="HIDDEN"」でその要素を隠す */
	display: none;
	visibility: hidden;
}

/*====================================
					■ページトップボタン■
====================================*/

.pagetop {
	height: 100px;
	width: 100px;
	position: fixed;
	right: 30px;
	bottom: 30px;
	background: #fff;
	border: solid 2px #005577;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 2;
	opacity: 0.8;
}

.pagetop_arrow {
	height: 20px;
	width: 20px;
	border-top: 3px solid #005577;
	border-right: 3px solid #005577;
	transform: translateY(20%) rotate(-45deg);
}

@media (hover: hover) and (pointer: fine) {
	.pagetop:hover, .pagetop:hover .pagetop__arrow {
			border-color: #3293e7;
	}
}

/*========================================================================
											■各ページ専用クラス■
========================================================================*/


/*====================================
					■Picture■
====================================*/

/* Picturesのサムネイル並べ用 */
ul.flexbox{
	display: flex; /* サムネイルを収めるボックスのレイアウト大枠 */
  flex-wrap: wrap; /* 折り返す */
}

li.pictureBox{
	width: 25%; /* 各サムネイルの横幅 */
	margin-bottom: 0.5rem; /* 行間 */
}

.PICTURE_thumbnail img{
	width: 100%;	/* サムネイルの横幅いっぱいに画像を縮小 */
	vertical-align: top;	/* 行全体を上付きに */
}

/*====================================
					■Doujin■
====================================*/

 /* セクション用 */
div.DOUJIN_section{
	display: flex; /* サムネイルを収めるボックスのレイアウト大枠 */
  flex-wrap: wrap; /* 折り返す */
	background-color: #fefeee;
	margin-bottom: 2em; /* 次セクションとの余白 */
}

/* 画像側 */
div.doujinBoxL{
	display: flex; /* 画像を上下中央にするための大枠 */
	align-items: center; /* 画像を上下中央に配置 */
	width: 50%; /* セクションの左半分を占有 */
	padding: 0;
	margin: 0;
}

.doujinBoxL img{
	width: 100%;	/* サムネイルの横幅いっぱいに画像を縮小 */
}

 /* 諸元 */
div.doujinBoxR{
	width: 50%; /* セクションの右半分を占有 */
	padding: 1em 16px 0.5em; /* テキストの周囲に余白 */
	margin: 0;
}

.doujinBoxR p{
	width: 100%;
	border: none;
	vertical-align: top;
}

 /* 内容説明 */
div.doujinBoxBottom{
	width: 100%;
	padding: 0 1.5em; /* 左右余白 */
	margin: 0;
}

.doujinBoxBottom p{
	margin: 0 0 1.5em; /* 試し読みとの間の余白 */
}

 /* 右に寄せるテキスト用 */
div.doujin_alignRight{
	text-align: right;
	padding: 0 0 0.5em; /* 複数並べる場合の行間 */
}

/*========================================================================
												■各プラグイン用■
========================================================================*/

/*====================================
					■slick■
====================================*/


.slider6-wrap {
	width: 100%;
	margin: 0 auto;
	position: relative;
}
.slider-6 .slick-slide {
	height: 100%;
	overflow: hidden;
}
.slider-6 .slick-slide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.thumbs_dots {
	margin: 0px 0 0;
}
.thumbs_list li {
	display: inline-block;
	width: 12.5%;
	height: 81px;
	opacity: 0.5;
	cursor: pointer;
	transition: opacity 0.3s;
}
.thumbs_list li.slick-active {
	opacity: 1;
}