@charset "utf-8";

/*============================================
本文
============================================*/
div#top {
	width:1160px;			/*幅の指定*/
	float:left;			/*カラムを左寄せにする*/
    margin:10px 20px;       /*マージン*/
	padding:10px 10px 0px 0px;		/*パディング*/
}
p#dekamozi {
    width:1140px;			/*幅の指定*/
    margin: 0px 0px 0px 0px; /* マージン */
    font-size:250%;     /*フォントサイズ*/
    text-align: center;      /*中央揃え*/
    text-indent: 0em;
}

p {
	width:1140px;		/*幅の指定*/
	margin:10px;		/*マージン*/
	text-indent:1em;		/*インデント幅*/
    text-align: center      /*中央揃え*/
}

hr {
    width:1160px;       /*横幅*/
	clear:both;			/*フロート配置をクリアする*/
	margin:10px 0px;		/*マージン*/
	border:1px dotted #ffd700;	/*内容の区切りをグレーの点線表示にする*/
}

div#p_left p {
    text-align: left ;     /*左揃え*/
}

div#cover_top {
    text-align: center;
}

div#cover_top img {
    width: 360px;
    height: auto;
}

/*============================================
グリッド（PC専用）
============================================*/
@media screen and (min-width:640px) {

div#container_mobile {
    display: none;
}
    
div#container {
    width:860px;
    margin:10px 160px 10px 170px;
    display: grid;
    grid-gap: 10px;
    grid-template-rows: 300px 300px 200px;
    grid-template-columns: 360px 490px;
}

div#itemA {
    grid-row: 1 / 3;
    grid-column: 1 / 2;
    background-color: #ffd700;
}

div#itemA:hover {
    background-color: #ffa500;
    transform: scale(1.02);
    transition-duration: 0.2s;
}

div#itemB {
    grid-row: 1 / 2;
    grid-column: 2 / 3;
    background: #ffd700;
}

div#itemB:hover {
    background-color: #ffa500;
    transform: scale(1.02);
    transition-duration: 0.2s;
}

div#itemC {
    grid-row: 2 / 3;
    grid-column: 2 / 3;
    background: #ffd700;
}

div#itemC:hover {
    background-color: #ffa500;
    transform: scale(1.02);
    transition-duration: 0.2s;
}
 
div#itemD {
    grid-row: 3 / 4;
    grid-column: 1 / 2;
    background: #191970;
}

div#itemD:hover {
    background-color: #161666;
    transform: scale(1.02);
    transition-duration: 0.2s;
}   
    
div#itemE {
    grid-row: 3 / 4;
    grid-column: 2 / 3;
    background: #ff8a63;
}

div#itemE:hover {
    background-color: #df4614;
    transform: scale(1.02);
    transition-duration: 0.2s;
}

div#container_latest {
    display: block;
    width: 360px;
    height:101px;
}

div#container_library {
    display: block;
    width: 490px;
    height:50px;
}

a#gridlink {
    text-decoration:none;
    color:#333333;
}

a#gridlink:hover {
    filter: brightness(90%);
    transition-duration: 0.2s;
}
    
}

/*============================================
グリッド（スマホ用）
============================================*/
@media screen and (max-width:640px) {

div#container {
    display: none;
}

div#container_mobile {
    text-align: center; 
    width: 90%;
    margin:0% 5%; 
}

div#itemA {
    text-align:center;
    width: 100%;
    background-color: #ffd700;
}

div#itemA:hover {
    background-color: #ffa500;
    transform: scale(1.02);
    transition-duration: 0.2s;
}

div#itemB {
    text-align:center;
    width: 100%;
    background: #ffd700;
}

div#itemB:hover {
    background-color: #ffa500;
    transform: scale(1.02);
    transition-duration: 0.2s;
}

div#itemC {
    text-align:center;
    width: 100%;
    background: #ffd700;
}

div#itemC:hover {
    background-color: #ffa500;
    transform: scale(1.02);
    transition-duration: 0.2s;
}
    
div#itemD {
    text-align:center;
    width: 100%;
    background: #191970;
}

div#itemD:hover {
    background-color: #161666;
    transform: scale(1.02);
    transition-duration: 0.2s;
}

div#itemE {
    text-align:center;
    width: 100%;
    background: #ff8a63;
}

div#itemE:hover {
    background-color: #df4614;
    transform: scale(1.02);
    transition-duration: 0.2s;
}
    
div#container_latest {
    display: block;
    width:100%;
    height:101px;
}

div#itemA img {
    width: 100%;
    height: auto;
}
    
div#itemB img {
    width: 100%;
    height: auto;
}

div#itemC img {
    width: 100%;
    height: auto;
}

div#itemD img {
    width: 100%;
    height: auto;
}
    
div#itemE img {
    width: 100%;
    height: auto;
}

a#gridlink {
    text-decoration:none;
    color:#333333;
}

a#gridlink:hover {
    filter: brightness(90%);
    transition-duration: 0.2s;
}
    
}
/*============================================
トップバナー（最新号を読む！とか）
============================================*/
div#banner{
    text-align: center;      /*中央揃え*/
}


/*============================================
スライドショー（PC版）
============================================*/
@media screen and (min-width:640px) {

div.section_mobile {
    display: none;
}
    
div.section {
    width:1200px;
    height:400px;
    margin: auto;
}
    
.sliderArea {
  width:1160px;
  margin:auto;
  padding: 0px;
}
.slick-slide {
  margin: 0px;
}
.slick-prev, .slick-next {
  z-index: 1;
}
.slick-prev:before, .slick-next:before {
  color: #000;
}
.slick-slide {
  transition: all ease-in-out 0.3s;
  opacity: 0.2;
}
.slick-active {
  opacity: 1;
}
.slick-current {
  opacity: 1;
}
.thumb {
  margin: 20px 0 0;
}
.thumb .slick-slide {
  cursor: pointer;
}
.thumb .slick-slide:hover {
  opacity: 0.7s;
}
.slider {
  height:370px;
}
.slide01 {
    display: block;
    height: 400px;
}
.slide02 {
    display: block;
    height:400px;
}
.slide03 {
    display: block;
    height:400px;
}
.slide04 {
    display: block;
    height:400px;
}
.slide05 {
    display: block;
    height:400px;
}

}

/*============================================
スライドショー（モバイル版）
============================================*/
@media screen and (max-width:640px) {
div.section {
    display: none;
}

div.section {
    width:100%;
    height: auto;
}

.section_mobile img {
    width:100%;
    height:auto;
}

.sliderArea {
  width:100%;
  margin:auto;
  padding: 0px;
}
.slick-slide {
  margin: 0px;
}
.slick-prev, .slick-next {
  z-index: 1;
}
.slick-prev:before, .slick-next:before {
  color: #000;
}
.slick-slide {
  transition: all ease-in-out 0.3s;
  opacity: 0.2;
}
.slick-active {
  opacity: 1;
}
.slick-current {
  opacity: 1;
}
.thumb {
  margin: 20px 0 0;
}
.thumb .slick-slide {
  cursor: pointer;
}
.thumb .slick-slide:hover {
  opacity: 0.7s;
}
.slide01 {
    display: block;
    width:100%;
    height: auto;
}
    
.slide02 {
    display: block;
    width:100%;
    height: auto;
}
.slide03 {
    display: block;
    width:100%;
    height: auto;
}
.slide04 {
    display: block;
    width:100%;
    height: auto;
}
.slide05 {
    display: block;
    width:100%;
    height: auto;
}

}

/*============================================
トップ用メインメニュー（上マージンの関係でこいつだけ別）
============================================*/
div#menubody {
    background-color:#ffd700;
}

div#menu {
	width:1200px; margin:0 auto;			/*内容全体をセンタリング*/
}

ul.menu_top {
	width:1160px; height:55px; 	/*メインメニュー部分の幅と高さ*/
	margin:0px 0px 0px 20px; 		/*マージン*/
}
.menu_top li {
	list-style-type:none;		/*リストマーカー無しにする*/
	display:inline-block;			/*リスト項目をインライン-ブロック表示にする*/
	float:left;			/*リスト項目を横に並べる*/
    position: relative;     /* サブドロップダウンの表示位置 */
    background-color:#ffd700;		/*背景色*/
	width:290px; height:35px;	/*幅と高さ*/
	padding:10px 0px 10px 0px;	/*上パディング*/
	text-align:center;		/*テキストをセンター揃えにする*/
}

.menu_top li a {
    display:block;			/*リスト項目をインライン-ブロック表示にする*/
    position: absolute;     /* 位置調整 */
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    padding: 5px 0px 0px 0px;
    font-size:175%;			/* フォントサイズを175%にする */
	color:#ffffff;			/*文字色*/
    text-decoration:none;		/*リンク部分を下線無しにする*/
}

.menu_top li ul a {
    padding: 8px 0px 0px 0px;       /*パディング*/
    font-size:150%;			/* フォントサイズを150%にする */
	color:#ffffff;			/*文字色*/
    text-decoration:none;		/*リンク部分を下線無しにする*/
}

.menu_top ul {
    display: none;      /* デフォルトで隠す */
    left: 0;        /* 位置固定 */
    position: absolute;
    top: 100%;
    list-style-type: none;      /* 書式のリセット */
    margin: 0; padding: 0;　/* マージン パディング */
    background-color:#ffd700;		/*背景色*/
    font-size:100%;			/* フォントサイズを100%にする */
	color:#ffffff;			/*文字色*/
	width:290px; height:10px;	/*幅と高さ*/
	text-align:center;		/*テキストをセンター揃えにする*/
	text-decoration:none;		/*リンク部分を下線無しにする*/
}

.menu_top ul ul {
    left: 100%;     /* サブドロップダウン（2段目）の表示位置 */
    position: absolute;
    top: 0;
}


.menu_top li:hover {
    background-color: #ffa500;      /* カーソルを合わせると色が変わる */
    transition-duration: 0.2s;      /*色が変わる時間*/
}

.menu_top li:hover > ul {
    display: block;     /* カーソルを合わせるとドロップダウンが現れる */
}

/*============================================
特製壁紙イラスト配布
============================================*/
div#wallpaper_illust {
    text-align: center;
    width:1160px;
    height:auto;
}

div#wallpaper_illust img {
    width:960px;
    height:auto;
}

/*============================================
ボード（次回の更新日）
============================================*/
div#board {
    margin:0px 300px;
    border:2px solid;
    border-color:#ffd700;
    display: block;
    width: 600px;
    height: auto;
    background-color: #ffffe0;
    text-align: center;
}
div#board p {
    font-size: 150%;
    margin: 0px;
    padding: 10px;
    width: auto;
    height: auto;
    text-indent: 0em;
}

div#board p#nextdate {
    font-size: 300%;
}

/*============================================
ニュース
============================================*/
div#news dl {
    border:2px solid;
    border-color:#ffd700;
    background:#ffffe0;
    padding:20px;
    width:1120px;
}

div#news dt {
  color:#333333;
  font-weight:bold;
  padding:0 10px 0 0;
  width:120px;
  float:left;
  margin-bottom:7px;
}

div#news dd {
  color:#333333;
  margin-bottom:7px;
}

div#news dl::after {
    content: '';
    display: block;
    clear: both;
}

/*============================================
SNS
============================================*/
/* PC */
@media screen and (min-width:640px) {
div#sns {
    width:560px;
    height:auto;
    margin:0px 300px;
}
}
/* モバイル */
@media screen and (max-width:640px) {
div#sns {
    display:flex;
    width:90%;
    height:auto;
    margin:5%;
}
}