@charset "utf-8";

/* ====================　CSSのリセット　=================================== */

html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,abbr,address,cite,code,del,dfn,em,img,ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent;font-weight:normal;}body{line-height:1}article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{display:block}ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:none}a{margin:0;padding:0;font-size:100%;vertical-align:baseline;background:transparent}del{text-decoration:line-through}abbr[title],dfn[title]{border-bottom:1px dotted;cursor:help}table{border-collapse:collapse;border-spacing:0}hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}input,select{vertical-align:middle}

/* ====================　フォントのスタイル設定　========================== */

body{
    font-family: Lato, "Noto Sans JP", "游ゴシック Medium", "游ゴシック体", "Yu Gothic Medium", 
	YuGothic, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, 
	"ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-size: 12px;		/* フォントサイズの設定 */
	color: #333;			/* フォントカラーの設定 */
	background-attachment: fixed;
	background-color: #fff;	
	display: flex;
	flex-flow: column;
	min-height: 100vh;
}

/*================================================
 *  テキストスタイルの設定
 ================================================*/

/* 見出し */
h2 {							
  font-size: 18px;
  color: #fff;
  /*text-shadow: 0 0 5px #ccc;*/
  padding: 0.5em 0.5em;
  background: -moz-linear-gradient(bottom, #54a4eb, #3694e7); 
  background: -webkit-linear-gradient(bottom, #54a4eb, #3694e7); 
  background: linear-gradient(to bottom, #54a4eb, #3694e7);
}

h3 {
	margin-bottom:0.25em;
	padding:4px 5px;
	font-weight: bold;
	font-size:14px;
}

h4 {
	margin-bottom:0.25em;
	line-height: 1.0em;
	font-size: 24px;
	font-weight: bold;
	color:#F00;
}

h5 {							
  font-size: 18px;
  color: #fff;
  /*text-shadow: 0 0 5px #ccc;*/
  padding: 0.5em 0.5em;
  background: -moz-linear-gradient(bottom, #ff7a77, #ff5855); 
  background: -webkit-linear-gradient(bottom, #ff7a77, #ff5855); 
  background: linear-gradient(to bottom, #ff7a77, #ff5855);
}



/* ボーダーライン（お知らせ用）*/ 
.h_line1 {
	padding-top: 15px;
	font-size: 16px;
	font-weight: bold;
	position: relative;
	line-height: 30px;
	color: #f00;
	padding-left: 5px;
}
.h_line1:after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 5px;
	background: #f88;
}


/*================================================
 *  セレクトボックスの設定
 ================================================*/

.select-box01 select {
	float: right;
	margin: 0 0 5px 0;
	width: 100px;
	padding: 5px;
	border: 1px solid #302a1c;
	background: #f8f3ec;
	background-size: 20px, 100%;
}




/*================================================
 *  仕切り線のスタイル設定
 ================================================*/

.hr1 {
    border-width: 1px 0 0 0;	/* 太さ */
    border-style: dotted;			/* 線種 */
    border-color: #666;				/* 灰色 */
}

.hr2 {
    border-width: 1px 0px 0px 0px; 	/* 太さ */
    border-style: dotted; 			/* 線種 */
    border-color: #70b3fb; 			/* 青色 */
    height: 1px; 					/* 高さ */
}


/*================================================
 *  アイコンのスタイル設定
 ================================================*/

.icon01 {
	margin-right: 10px;
	padding: 2px 0;
	width: 50px;
	float: left;
	text-align: center;
	background: #f466b6;			/*背景色：ピンク、主にWEBに使用*/
	color: #fff;					/*文字の色：白*/
	border-left: solid 7px #d40f7e;
	border-top: solid 1px #d40f7e;
	border-right: solid 1px #d40f7e;
	border-bottom: solid 1px #d40f7e;
}

.icon02 {
	margin-right: 10px;
	padding: 2px 0;
	width: 50px;
	float: left;
	text-align: center;
	background: #f99617;			/*背景色：オレンジ　その他に使用*/
	color: #fff;					/*文字の色：白*/
	border-left: solid 7px #d77c06;
	border-top: solid 1px #d77c06;
	border-right: solid 1px #d77c06;
	border-bottom: solid 1px #d77c06;
}

.icon03 {
	margin-right: 10px;
	padding: 2px 0;
	width: 50px;
	float: left;
	text-align: center;
	background: #91d207;			/*背景色：黄緑、主にGAMEに使用*/
	color: #fff;					/*文字の色：白*/
	border-left: solid 7px #649005;
	border-top: solid 1px #649005;
	border-right: solid 1px #649005;
	border-bottom: solid 1px #649005;
}

.icon04 {
	margin-right: 10px;
	padding: 2px 0;
	width: 50px;
	float: left;
	text-align: center;
	background: #979468;			/*背景色：薄茶、主にSHOPに使用*/
	color: #fff;					/*文字の色：白*/
	border-left: solid 7px #6f6c4c;
	border-top: solid 1px #6f6c4c;
	border-right: solid 1px #6f6c4c;
	border-bottom: solid 1px #6f6c4c;
}

.icon05 {
	margin-right: 10px;
	padding: 2px 0;
	width: 50px;
	float: left;
	text-align: center;
	background: #9318d6;			/*背景色：紫、主にEVENTに使用*/
	color: #fff;					/*文字の色：白*/
	border-left: solid 7px #4a0c6c;
	border-top: solid 1px #4a0c6c;
	border-right: solid 1px #4a0c6c;
	border-bottom: solid 1px #4a0c6c;
}

.icon06 {
	margin-right: 10px;
	padding: 2px 0;
	width: 50px;
	float: left;
	text-align: center;
	background: #099def;			/*背景色：青*/
	color: #fff;					/*文字の色：白*/
	border-left: solid 7px #0672ae;
	border-top: solid 1px #0672ae;
	border-right: solid 1px #0672ae;
	border-bottom: solid 1px #0672ae;
}

/*================================================
 *  ゲーム用アイコンのスタイル設定
 ================================================*/

.game_icon01 {
	margin-right: 5px;
	width: 55px;
	float: left;
	text-align: center;
	background: #f66;			/*背景色：赤色（業務用）*/
	color: #fff;					/*文字の色：白*/
	border: solid 1px #f33;
	border-radius: 3px;
	line-height: 15px;
	font-size: 12px;
}

.game_icon02 {
	margin-right: 5px;
	width: 55px;
	float: left;
	text-align: center;
	background: #69b6e0;			/*背景色：水色（モバイル用）*/
	color: #fff;					/*文字の色：白*/
	border: solid 1px #3fa1d7;
	border-radius: 3px;
	line-height: 15px;
	font-size: 12px;
}

.game_icon03 {
	margin-right: 5px;
	width: 55px;
	float: left;
	text-align: center;
	background: #203ab9;			/*背景色：深青（ソニーハード用）*/
	color: #fff;					/*文字の色：白*/
	border: solid 1px #0e1a54;
	border-radius: 3px;
	line-height: 15px;
	font-size: 12px;
}

.game_icon04 {
	margin-right: 5px;
	width: 55px;
	float: left;
	text-align: center;
	background: #fe7eb8;			/*背景色：ピンク（任天堂ハード用）*/
	color: #fff;					/*文字の色：白*/
	border: solid 1px #fe4b9c;
	border-radius: 3px;
	line-height: 15px;
	font-size: 12px;
}

.game_icon05 {
	margin-right: 5px;
	width: 55px;
	float: left;
	text-align: center;
	background: #77da21;			/*背景色：緑（Xbox用）*/
	color: #fff;					/*文字の色：白*/
	border: solid 1px #5fae1a;
	border-radius: 3px;
	line-height: 15px;
	font-size: 12px;
}

.game_icon06 {
	margin-right: 5px;
	width: 55px;
	float: left;
	text-align: center;
	background: #066;			/*背景色：青緑（PC用）*/
	color: #fff;					/*文字の色：白*/
	border: solid 1px #0e1a54;
	border-radius: 3px;
	line-height: 15px;
	font-size: 12px;
}




/* ====================　コンテナの設定　================================== */

#container{
   min-height: 100vh;
    position: relative;/*←相対位置*/
    padding-bottom: 180px;/*←footerの高さ*/
    box-sizing: border-box;/*←全て含めてmin-height:100vhに*/
}

/*================================================
 *  一般・共通設定
 ================================================*/
 
.inner {
	position: relative;
	max-width: 850px;			/* 表示幅の設定 */
	margin: 0 auto;
}

main{
	flex: 1;
}

#contents {		
	width:850px;
	background:#fff;
	margin-top: 5px; 
	padding: 30px 0 0;		/* 上に余白を取る（ヘッダーの高さより大きくする事） */
	width: 100%;
	padding-bottom: 20px;	/* フッターと同じ高さを設定 */
}



#c_main {
	padding:3px;
	box-sizing:border-box;
	overflow:hidden;
	float:left;
	width:68%;
}

#c_sub {
	box-sizing:border-box;
	overflow:hidden;
	float:right;
	width:30%;
}
#c_sub img {
	width: 100%;
	height: auto;
	margin-top: 10px;
}

.main_box {
	padding:3px;
	margin-bottom: 30px;
	box-sizing:border-box;
	overflow:hidden;
	width:100%;
}

.main_box2 {
	padding:3px;
	box-sizing:border-box;
	overflow:hidden;
	width:100%;
	background:linear-gradient(135deg, #fefcfa, #f4e3d1);
	border-right: solid 3px #3694e7; 
	border-bottom: solid 3px #3694e7; 
	border-left: solid 3px #3694e7; 
}

.main_box3 {
	padding:3px;
	box-sizing:border-box;
	overflow:hidden;
	width:100%;
	border-right: solid 3px #3694e7; 
	border-bottom: solid 3px #3694e7; 
	border-left: solid 3px #3694e7; 
}

.main_box4 {
	padding:3px;
	box-sizing:border-box;
	overflow:hidden;
	width:100%;
	background:linear-gradient(135deg, #fefcfa, #f4e3d1);
	border-right: solid 3px #ff5855; 
	border-bottom: solid 3px #ff5855; 
	border-left: solid 3px #ff5855; 
}

.l-box {
	box-sizing: border-box;
	overflow: hidden;
	float: left;
	width: 70%;
}

.l-box2 {
	box-sizing: border-box;
	overflow: hidden;
	float: left;
	width: 25%;
}
.l-box2 img{
	max-width: 100%;
	height: auto;
}

.r-box {
	box-sizing: border-box;
	float: right;
	overflow: hidden;
	display:flex;
	justify-content:flex-end;	
	width: 30%;
}

.r-box2 {
	box-sizing: border-box;
	text-align: left;
	float: right;
	overflow: hidden;
	display:flex;
	justify-content:flex-end;	
	width: 75%;
}

.r-boxitem {
	padding-top: 25px;
	font-size: 13px;
	font-weight: bold;
}

.r-text{			/* テキストを右側に配置する際に使用*/
	box-sizing: border-box;
	float: right;
	overflow: hidden;
	display:flex;
	justify-content:flex-end;	
	margin-bottom:0.25em;
	padding:4px 5px;
	font-weight: bold;
	font-size:14px;
}


.card_box {			/* カード4枚時は調整が必要 */
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
.card_box:after{
  content:"";
  display: block;
  width:60%;
}

.card_box2 {			/* 商品紹介用 */
	padding-top: 10px;
	padding-bottom: 20px;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
.card_box2:after{
	content:"";
	display: block;
	width:50%;
}

/*================================================
 *  タグのスタイルの設定
 ================================================*/

/* ニュース用の箱 */

.news {
	padding: 10px;
	box-sizing:border-box;
	overflow:hidden;
	width:100%;
	line-height: 1.3em;
}
.news img {
	max-width: 480px;
	width: 100%;
	height: auto;
}
.news dt {
	color: #F00;
	display: flex;
	align-items: center;
}
.news dd {
	padding-top: 10px;
}
.news a:link {						/* デフォルト用：未訪問 */
	color: #0066FF;
	text-decoration: underline;
}
.news a:visited {					/* デフォルト用：訪問後 */
	color: #0066FF;
	text-decoration: underline;
}
.news a:hover {						/* デフォルト用：マウスをのせた時 */
	color: #FF0066;
	text-decoration: underline;
}
.news a:active {					/* デフォルト用：選択中 */
	color: #0066FF;
	text-decoration: underline;
}

/* テキスト用の箱 */

.textb{
	padding:20px;
	box-sizing:border-box;
	overflow:hidden;
	width:100%;
	line-height: 1.3em;
}
.textb p{
	padding: 10px 5px;
}
.textb ol{
	padding-left: 20px;
}
.textb ul{
	padding-left: 20px;
	list-style: square;
	/*left: -10px;*/
}
.textb ul ul{
	list-style: circle;
}

.textb dt{
	float: left;
}
.textb dd{
	margin-left: 100px;
}
.textb a:link {						/* デフォルト用：未訪問 */
	color: #0066FF;
	text-decoration: underline;
}
.textb a:visited {					/* デフォルト用：訪問後 */
	color: #0066FF;
	text-decoration: underline;
}
.textb a:hover {						/* デフォルト用：マウスをのせた時 */
	color: #FF0066;
	text-decoration: underline;
}
.textb a:active {					/* デフォルト用：選択中 */
	color: #0066FF;
	text-decoration: underline;
}	



/* iframe用の可変箱 */
.ibox{
	box-sizing: border-box;
    position:relative;
    width:100%;
    height:0;
    padding-top:45%;		/* 枠の高さ */
	border-right: #3694e7 3px solid;
	border-bottom: #3694e7 3px solid;
	border-left: #3694e7 3px solid;
	/*margin-top:5px;*/
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
.ibox iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}

/* iframe用の可変箱（News用） */
.ibox2{
	box-sizing: border-box;
    position:relative;
    width:100%;
    height:0;
    padding-top:150%;		/* 枠の高さ */
	/*border-right: #3694e7 3px solid;
	border-bottom: #3694e7 3px solid;
	border-left: #3694e7 3px solid;
	/*margin-top:5px;*/
	overflow: auto;
	-webkit-overflow-scrolling: touch;
}
.ibox2 iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}





/* 商品掲載用の箱 */

.waku {
	box-sizing: border-box;
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
	max-width: 700px;
	padding: 20px 0 20px;
	margin-left: auto;
	margin-right: auto;
}
.waku img {
	max-width: 100%;
	height: auto;
}
.waku:after{
  content:"";
  display: block;
  width:50%;
}







/* 右側の余白消し */
.wrap {
	overflow: hidden;
}



/*================================================
 *  カードデザイン
 ================================================*/

/* ピックアップ用 */
.card01 {
	max-width: 250px;
	min-width: 250px;
	overflow: hidden;
	border-radius: 3px;
	margin-top: 1rem;
	margin-bottom: 1rem;
	margin-left: auto;
	margin-right: auto;
	position: relative;
	background: #f8ebe4;
	-webkit-box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.3);
	transition: all 0.25s ease-in;
	border-bottom: 10px solid #f8ebe4;
	border-top: 1px solid #f8ebe4;
	border-left: 1px solid #f8ebe4;
	border-right: 1px solid #f8ebe4;	
	flex-basis: 33%;
}
.card01 .photo {
	height: 180px;		/* 画像の高さ設定 */
	overflow: hidden;
}
.card01:hover {
	border: none;
	border-bottom: 10px solid #bd6231;
	border-top: 1px solid #bd6231;
	border-left: 1px solid #bd6231;
	border-right: 1px solid #bd6231;
}
.card01 .details {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	padding: 1em 1em 0 1em;
	font-size: 1.0em;
}
.card01 .date {
	-webkit-box-flex: 1;
	-ms-flex: 1;
	flex: 1;
	text-align: right;
}
.card01 .category {
	-webkit-box-flex: 2;
	-ms-flex: 2;
	flex: 2;
}
.card01 .category p {
	font-size: 0.8em;
	padding: 4px 8px;
	width: 6.5em;
	margin: 0;
	border-radius: 10px;
	background: #3694e7;
	text-align: center;
	color: #ffffff;
}
.card01 .description {
	padding: 0 1em;
}
.card01 .description h1 {			/* タイトルテキスト */
	font-size: 1.2em;
	border-bottom: #000 1px dotted;
	margin: 0;
	margin-bottom: 0.5em;
	padding: 4px 0 4px 0;
}
.card01 .description .text p {
	margin: 0;
	padding-top:5px;
}
.card01 .description a {
	float: right;
	padding-top: 5px;
	margin-bottom: 10px;
	text-decoration: none;
	color: #3694e7;
}
.card01 .description a:after {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-left: -10px;
	content: '\f061';
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	vertical-align: middle;
	opacity: 0;
}
.card01 .description a:hover:after {
	margin-left: 5px;
	opacity: 1;
}

/* ピックアップ用の空データ */
.card01b {
	max-width: 250px;
	margin :auto;
	transition: all 0.25s ease-in;
	flex-basis: 60%;
}



/* 商品紹介用 */

.card02 {
	width: 380px;
	font-size: 13px;
	line-height: 1.45em;
	position: relative;
	overflow: hidden;
	height: 140px;
	margin: 0 auto 1.6%;
	-webkit-transition: height 0.3s ease;
	transition: height 0.3s ease;
	border-radius: 3px;
	background: #f8ebe4;
	-webkit-box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.3);
	box-shadow: 0 3px 7px -3px rgba(0, 0, 0, 0.3);
}
.card02:hover .details {
	left: 0;
}
.card02:hover.alt .details {
	right: 0;
}
.card02.alt .details {
	right: -100%;
	left: inherit;
}
.card02 .photo {
	position: relative;
	float: left;
	width: 34%;		/* 画像スペース */
	height: 100%;
	-webkit-transition: all 0.5s ease;
	transition: all 0.5s ease;
}
.card02:hover .photo {
	-webkit-transform: rotate(5deg) scale(1.3);
	transform: rotate(5deg) scale(1.3);
}
.card02 .photo.photo1 {
	background: url('images.jpg') center no-repeat;
	background-size: cover;
}
.card02 .details {
	position: absolute;
	top: 0;
	left: -100%;
	width: 40%;
	height: 200px;
	margin: 0;
	padding: 10px 15px;
	list-style: none;
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	color: #ffffff;
	background: rgba(0,0,0, 0.6);
	font-size:11px;
}
.card02 .details > li {
	padding: 3px 0;
}
.card02 .details li::before,
.card02 .details .tags ul::before {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-right: 10px;
	vertical-align: middle;
}
.card02 .details .date::before {
	content: '\f073';
}
.card02 .details .tags::before {
	content: '\f157';
}
.card02 .description {
	position: relative;
	z-index: 0;
	float: left;
	width: 60%;
	padding: 8px 8px 8px 3px;
	min-height: 200px;
	font-size: 12px;
}
.card02 .description::before {
	position: absolute;
	z-index: -1;
	top: 0;
	bottom: 0;
	left: -15px;
	width: 100%;
	content: '';
	-webkit-transform: skewX(-8deg);
	transform: skewX(-8deg);
	background: #f8ebe4;
}
.card02 .description h1 {
	font-size: 1.2em;
	line-height: 1em;
	margin: 0 0 10px 0;
}
.card02 .description p {
	font-size: 12px;
	position: relative;
	margin: 0;
	padding-top: 25px;
	line-height: 1.0em
}
.card02 .description a {
	float: right;
	padding-top: 5px;
	margin-bottom: 10px;
	text-decoration: none;
	color: #3694e7;
}
.card02 .description a:after {
	font-family: "Font Awesome 5 Free";
	font-weight: 900;
	margin-left: -10px;
	content: '\f061';
	-webkit-transition: all 0.3s ease;
	transition: all 0.3s ease;
	vertical-align: middle;
	opacity: 0;
}
.card02 .description a:hover:after {
	margin-left: 5px;
	opacity: 1;
}



@media screen and (max-width: 480px) {
.card02 .description h1 {
font-size: 1.3em;
}
}


/* 関連商品紹介用 */

.card03 {
	line-height: 1.1em;
	width: 380px;
	margin: 0 auto 1.6%;
	border-radius: 5px;
	background-color: #f8ebe4;
	box-shadow: 0 3px 6px #ccc;
}
.card03 .box {
	display: flex;
}
.card03 img {
	width: 90px;
	height: 100px;
	object-fit: cover;
	border-radius: 5px 0 0 5px;
}
.card03 .title {
	font-size: 105%;
	margin: 10px;
	color: #444;
}
.card03 .content {
	padding: 5px 10px 10px;
	color: #666;
}

/* 社内紹介用 */

.card04 {
	width: 230px;
	margin: 0 auto 1.6%;
	background: #fff;
	border-radius: 3px;
	box-shadow: 0 3px 6px #ccc;
}
.card04-img {
	border-radius: 3px 3px 0 0;
	max-width: 100%;
	height: auto;
}
.card04-content {
	padding: 10px;
}
.card04-title {
	font-size: 14px;
	font-weight: bold;
	color: #333;
}
.card04-text {
	color: #444;
	font-size: 12px;
	line-height: 1.5;
}

/* 壁紙カレンダー（大） */

.card05 {
	width: 180px;
	margin: 0 auto 2.0%;
	background: #fff;
	border-radius: 3px;
	box-shadow: 0 3px 6px #ccc;
}
.card05-img {
	max-width: 100%;
	height: auto;
}
.card05-title {
	border-radius: 3px 3px 0 0;
	padding: 1px;
	font-size: 12px;
	text-align: center;
	color: #fff;
	background: #000;
}
.card05-text {
	padding: 3px;
	color: #444;
	font-size: 12px;
	text-align: center;
	line-height: 1.2;
}
.card05-text a:link {						/* デフォルト用：未訪問 */
	color: #0066FF;
	text-decoration: underline;
}
.card05-text a:visited {					/* デフォルト用：訪問後 */
	color: #0066FF;
	text-decoration: underline;
}
.card05-text a:hover {						/* デフォルト用：マウスをのせた時 */
	color: #FF0066;
	text-decoration: underline;
}
.card05-text a:active {					/* デフォルト用：選択中 */
	color: #0066FF;
	text-decoration: underline;
}	



/* 壁紙カレンダー（小） */
.card06 {
	width: 90px;
	margin: 0 auto 2.0%;
	background: #fff;
	border-radius: 3px;
	box-shadow: 0 3px 6px #ccc;
}
.card06-img {
	max-width: 100%;
	height: auto;
}
.card06-title {
	border-radius: 3px 3px 0 0;
	padding: 1px;
	font-size: 12px;
	text-align: center;
	color: #fff;
	background: #000;
}
.card06-text {
	padding: 3px;
	color: #444;
	font-size: 12px;
	text-align: center;
	line-height: 1.2;
}
.card06-text a:link {						/* デフォルト用：未訪問 */
	color: #0066FF;
	text-decoration: underline;
}
.card06-text a:visited {					/* デフォルト用：訪問後 */
	color: #0066FF;
	text-decoration: underline;
}
.card06-text a:hover {						/* デフォルト用：マウスをのせた時 */
	color: #FF0066;
	text-decoration: underline;
}
.card06-text a:active {					/* デフォルト用：選択中 */
	color: #0066FF;
	text-decoration: underline;
}	

/* 壁紙カレンダー（空データ） */

.card07 {
	width: 90px;
	margin: 0 auto 2.0%;
}

/* 商品掲載用 */
.card08 {
	width: 130px;
	position: relative;
	margin: 0 auto 2.0%;
	background: #fff;
	text-align: center;	
	border-radius: 3px;
	box-shadow: 0 3px 6px #ccc;
}
.card08-img {
	max-width: 100%;
	padding-top: 23px;
	height: auto;
}
.card08-title {
	position: absolute;
	top: 2px;
	left: 2px;
	font-size: 0.8em;
	padding: 2px;
	cursor: pointer;
	width: 6em;
	margin: 0;
	border-radius: 10px;
	background: #F60;
	text-align: center;
	color: #ffffff;
}
.card08-text {
	padding: 3px;
	color: #333;
	font-size: 11px;
	text-align: center;
	line-height: 1.2;
}

/* 商品掲載用空データ */
.card08b {
	max-width: 130px;
	margin :auto;
	transition: all 0.25s ease-in;
	flex-basis: 60%;
}

/* 素材掲載用 */
.card09 {
  position: relative;
  border: solid 1px #999;			/* キャラクター枠の線種と幅、色の設定 */
  width: 120px;						/* キャラクター枠の幅設定 */
  height: 160px;					/* キャラクター枠の高さ設定 */
  float: left;						/* キャラクター枠を左寄せ */
  margin: 5px;						/* キャラクター枠の間隔設定 */
  }

.card09 p {
  position: absolute;
  bottom: 0;						/* 画像の左下に配置 */
  width: 83.5%;
  margin: 0; 						/* 余計な隙間を除く */
  color: white;						/* 文字を白に */
  background-color: rgba(0,0,0,0.7);/* 背景色と透過の指定 */
  font-size: 11px;					/* 文字サイズ */
  text-align: center;
  line-height: 1;					/* 行高は1に */
  padding: 5px 10px;				/* 文字周りの余白 */
  }

.card09 img {
  width: 100%;
  }

/* 素材掲載用空データ */
.card09b {
  position: relative;
  width: 120px;						/* キャラクター枠の幅設定 */
  height: 10px;					/* キャラクター枠の高さ設定 */
  float: left;						/* キャラクター枠を左寄せ */
  margin: 5px;						/* キャラクター枠の間隔設定 */
  }


/* コミック用 */
.card10 {
	width: 140px;
  	margin: 5px;						/* キャラクター枠の間隔設定 */
	border: solid 1px #999;			/* キャラクター枠の線種と幅、色の設定 */
	background: #fff;
	border-radius: 3px;
	float: left;						/* キャラクター枠を左寄せ */
	box-shadow: 0 3px 6px #ccc;
}
.card10-img {
	border-radius: 3px 3px 0 0;
	max-width: 100%;
	height: auto;
}
.card10-content {
	padding:10px;
	margin-top: -5px;
	background: #444;
}
.card10-title {
	font-size: 12px;
	font-weight: bold;
	text-align: center;
	color: #fff;
}
.card10-text {
	color: #Ff0;
	font-size: 10px;
	text-align: center;
	line-height: 1.0;
}

/* コミック用空データ */
.card10b {
  position: relative;
  width: 140px;						/* キャラクター枠の幅設定 */
  height: 10px;					/* キャラクター枠の高さ設定 */
  float: left;						/* キャラクター枠を左寄せ */
  margin: 5px;						/* キャラクター枠の間隔設定 */
  }


/*================================================
 *  ナビゲーション
 ================================================*/ 

nav {
	width:100%;
	background:#fff;
	box-shadow:0 1px 2px #d0d8dc;
	⁄zoom:1;
}
nav:after {
	content:'';
	display:block;
	clear:both;
}

@media print, screen and (min-width:768px) {	/* 幅が768以上になった時の処理 */
nav {
	background:#3694e7;
	border-bottom:5px solid #104e85;
	box-shadow:0 1px 3px #999;
	z-index:3;
}

/* 共通 */
nav ul {
	margin:0;
	padding:0;
}

nav ul li {
	position:relative;
	margin:0;
	padding:0;
	list-style:none;
}

nav ul li a {
	display:block;
	margin:0;
	padding:12px 0;						/* メニューの高さ設定 */
	background:#3694e7;
	color:#fff;
	font-size:14px;						/* 1段目のフォントサイズ */
	font-weight:bold;
	line-height:1;
	text-decoration:none;
	border-left: 1px solid #73c1eb;		/* メニュー左側の1pxライン */
	border-right: 1px solid #73c1eb;	/* メニュー右側の1pxライン */
}

nav ul li+li a {						/* 隣接するメニューの左ラインを消す */
	border-left: 0;
	border-right: 1px solid #73c1eb;
}

nav ul li:hover > a {
	color:#fff;
	background:#104e85;
}

/* 1段目 */
nav ul.gnav > li {
	position:relative;
	width:14%;							/* メニューの分割比率（7分割） */
	float:left;
	margin:0;
	padding:0;
	text-align:center;
	list-style:none;
}

nav ul.gnav > li:first-child {
	width:15%;
}

nav ul.gnav > li.subnav a {
	padding-right:20px;
}

nav ul.gnav > li.subnav > a:after {
	position:absolute;
	content:"";
	top:20px;
	width:0;
	height:0;
	margin-left:10px;
	border:5px solid transparent;
	border-top-color:#fff;
}

/* 2段目 */
nav ul li ul {
	position:absolute;
	z-index:3;
	top:100%;
	left:0;
	width:100%;
	margin:0;
	padding:0;
}

nav ul li ul li {
	overflow:hidden;
	width:180%;							/* 2段目メニュー（右）の長さ */
	height:0;
	color:#fff;
	transition:.2s;
}

nav ul li ul li a {
	padding:14px 15px;					/* 2段目メニューの高さ */
	text-align:left;
	background:#1772c2;					/* 2段目のメニュー色 */
	font-weight:normal;
	font-size:12px;
}

nav ul li:hover > ul > li {
	overflow:visible;
	height:40px;
	border-bottom:1px solid #54a4eb;	/* 2段目の区切り線 */
}

nav ul li:hover ul li:last-child {
	border-bottom:none;
}

nav ul.gnav > li:last-child > ul {		/* 2段目メニュー（左）の長さ */
	left:-80%;
}

nav ul li ul li ul:before {
	position:absolute;
	content:"";
	top:13px;
	left:-20px;
	width:0;
	height:0;
	border:5px solid transparent;
	border-left-color:#fff;
}

nav ul.gnav > li:last-child ul li ul:before {
	position:absolute;
	content:"";
	top:13px;
	left:200%;
	margin-left:-20px;
	border:5px solid transparent;
	border-right-color:#fff;
}

/* 3段目 */
nav ul li ul li ul {
	top:0;
	left:100%;
}

nav ul li ul li ul li {
	width:100%;
}

nav ul li ul li:hover > ul > li {
	border-bottom:1px solid #278ce5;	/* 3段目の区切り線 */
}

nav ul.gnav > li:last-child > ul li ul {
	left:-100%;
}

nav ul li ul li ul li a {
	background:#1460a4;					/* 3段目のメニュー色 */
}

nav ul li ul li ul li a:hover {
	background:#104e85;					/* 3段目のメニュー選択色 */
}

.gnav {
	display:block !important;
}

#spMenu {
	display:none;
}

.fixed {
	position:fixed;
	top:0;
	left:0;
}
}



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

header {
	box-sizing:border-box;
	position:relative;
	width:100%;
	padding:5px 10px;
	background:#fff;
}

/* 一言コメント枠 */
.summary {
	position:absolute;
	right:10px;
	margin:0;
	bottom:0;
}

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

footer {
	position: absolute;
	bottom: 0;
	box-sizing:border-box;
	width:100%;
	margin:0 auto;
	clear:both;
	background-color:#333;
	margin-top: auto;
	font-size: 11px;
	color:#fff;	
}
footer a {
	color: #fff;
	text-decoration: none;
}
footer a:hover {
	color: #ff0;
	text-decoration: none;
}
footer ul li a:hover {
	color: #ff0;
	text-decoration: none;
}
footer a:visited {		/* フッター用：訪問後 */
	color: #fff;
	text-decoration: none;
}

/*フッター内のメニュー*/
#footermenu {
	display: flex;	
	margin: 0 auto;
	overflow: hidden;
	padding: 20px 0px;
}

/*１行分の設定*/
#footermenu ul {
	width: 22%;		/*幅（4列用）下のpaddingと合わせてトータル25%になるよう設定。*/
	padding-left: 3%;	

}

/* フッター内のコピーライト設定 */
#copyright {			
  margin: 0;
  color: #fff;
  background-color:#000;
  text-align: center;
  padding:5px 0;
}


/*================================================
 *  ページトップへの戻り
 ================================================*/

.pagetop {
    display: none;
    position: fixed;
    bottom: 30px;
    right: 15px;
}
.pagetop a {
    display: block;
    background-color: #0c97f6;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding: 5px 10px;
}
.pagetop a:hover {
    display: block;
    background-color: #7ec8fa;
    text-align: center;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
    padding:5px 10px;
}



/*================================================
 *  スマートフォン向けデザイン
 ================================================*/
@media screen and (max-width:767px) {	/* 幅が767以下になった時の処理 */
.lock {
	overflow:hidden;
}

header {
	z-index:2;
	box-sizing:border-box;
	position:fixed;
	top:0;
	left:0;
	width:100%;
	padding:5px 10px;
	background:#fff;
}

.summary {
	position:relative;
	top:auto;
	right:auto;
	margin-top:5px;
}

#c_main {
	float:none;
	width:100%;
}

#c_sub {
	display:none;
}


.l-box {
	float:none;
	width:100%;
}

.r-box {
			float:none;
		width:100%;
}


nav {
	background:#104e85;
}
nav ul {
	margin:0;
	padding:0;
}

nav .inner > ul {
	z-index:2;
	overflow:auto;
	position:fixed;
	top:53px;			/* メニュータブが出現する位置設定 */
	right:0;
	width:100%;
	height:88%;
	height:-webkit-calc(100% - 53px);
	height:calc(100% - 53px);
}
nav li {
	position:relative;
	width:100%;
	float:none;
	margin:0;
	text-align:left;
	list-style:none;
	border-bottom:1px solid #54a4eb;		/* ナビの区切り線の色 */
	background:#3694e7;
}

nav li:first-child {
	border-top:0;
}
nav li:last-child {
	border-bottom:0;
}

nav li a {
	display:block;
	padding:10px 30px;
	color:#fff;
	text-decoration:none;
	background:#3694e7;			/* ナビの色 */
}
nav li a:hover {
	color:#fff;
	background:#104e85;			/* ナビ選択時の色 */
}
nav ul ul {
	display:none;
	position:relative;
}
nav li li a {
	box-sizing:border-box;
	width:100%;
	padding:10px 30px 10px 50px;
	text-align:left;
}

nav li li li a {
	padding:10px 30px 10px 70px;
}

.subnav > a:before {
	display:block;
	content:"";
	position:absolute;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	top:20px;
	right:30px;
	width:10px;
	height:10px;
	margin-top:-5px;
	background:#f1f1f1;
}
.subnav > a:after {
	display:block;
	content:"";
	position:absolute;
	-webkit-transform:rotate(45deg);
	transform:rotate(45deg);
	top:20px;
	right:30px;
	width:10px;
	height:10px;
	margin-top:-10px;
	background:#3694e7;		/* 矢印を消す為の補色 */
}
.subnav a:hover:after {
	background:#104e85;		/* 矢印を消す為の補色 */
}

.active > a:before {
	margin-top:0;
}
.active > a:after {
	margin-top:5px;
}

.gnav {
	display:none;
}

#spMenu {
	display:block;
	z-index:2;
	position:fixed;
	top:10px;
	right:10px;
}
#spMenu:hover {
	cursor:pointer;
}

#navBtn {
	display:inline-block;
	position:relative;
	width:30px;
	height:30px;
	border-radius:5%;
	background:#104e85;		/* ナビボタンの色 */
}
#navBtnIcon {
	display:block;
	position:absolute;
	top:50%;
	left:50%;
	width:14px;
	height:2px;
	margin:-1px 0 0 -7px;
	background:#f1f1f1;
	transition:.2s;
}
#navBtnIcon:before,
#navBtnIcon:after {
	display:block;
	content:'';
	position:absolute;
	top:50%;
	left:0;
	width:14px;
	height:2px;
	background:#f1f1f1;
	transition:0.3s;
}
#navBtnIcon:before {
	margin-top:-6px;
}
#navBtnIcon:after {
	margin-top:4px;
}
#navBtn .close {
	background:transparent;
}
#navBtn .close:before,
#navBtn .close:after {
	margin-top:0;
}
#navBtn .close:before {
	transform:rotate(-45deg);
	-webkit-transform:rotate(-45deg);
}
#navBtn .close:after {
	transform:rotate(-135deg);
	-webkit-transform:rotate(-135deg);
}

.col_two_one ul {
	margin-right:0;
}
.col_two_one li {
	width:100%;
}
.col_two_one li:nth-child(2n+1) {
	clear:both;
}

}











@media screen and (max-width:480px) {	/* 幅が480以下になった時の処理 */

.card_box {
	display: flex;
	flex-flow: row wrap;
	justify-content: space-between;
}
.card_box:after{
  	content:"";
  	display: block;
  	width:50%;
}

.card01 {
	flex-basis: auto;
}

}



/* ====================　テキストスタイルの設定　========================== */

.font_red-b {
	color: #F00;
	font-weight: bold;
}

.font_red {
	color: #F00;
}

.font_orange {
	color: #F60;
}
.font_blue {
	color: #06f;
}

.font_white {
	color: #fff;
}

.font_yellow {
	color: #ff0;
}

.font_bold {
	font-weight: bold;
}

.font_oblique {
	font-style: oblique;
}

.text_lb {
	font-size: 15px;
	font-weight: bold;
}

.text_uline {
	text-decoration: underline;
}

.text_s {					/* 小さなフォント */
	font-size: 7px;
}

.text_ss {					/* 小さなフォント */
	font-size: 6px;
}

.text_sss {					/* 小さなフォント */
	font-size: 4px;
	line-height: 50%;
}

.text_top {					/* 上詰めフォント */
	font-size: 6px;
	vertical-align: text-top;
}

/* ====================　仕切り線のスタイル設定　========================== */







/* ====================　リンクボタン　==================================== */





/* ====================　img要素の設定　=================================== */

img {
	border: 0;				/* imgにリンクを貼った時に出る枠を消す */
}





/* ====================　コンテンツエリアの表示設定　====================== */



/*================================================
 *  テーブル
 ================================================*/ 
 
.table *, .table *:before, .table *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}
.table {
	width: 100%;
	border-collapse: collapse;
}
.table th {
	padding: 10px;
	width: 65%;
	text-align: left;
}
.table td {
	padding: 10px;
	vertical-align: bottom;
}

@media only screen and (max-width:767px) {
.table {
	margin: 0;
}
.table th, .table td {
	width: 100%;
	display: block;
	border-top: none;
}
.table tr:first-child th {
	
}
}

/*================================================
 *  メールフォーム
 ================================================*/
 
#formWrap {
	width:700px;
	margin:0 auto;
	color:#555;
	line-height:120%;
	font-size:90%;
}
table.formTable{
	width:100%;
	margin:0 auto;
	border-collapse:collapse;
}
table.formTable td,table.formTable th{
	border:1px solid #ccc;
	padding:10px;
}
table.formTable th{
	width:30%;
	font-weight:normal;
	background:#efefef;
	text-align:left;
}

/*　簡易版レスポンシブ用CSS（必要最低限のみとしています。ブレークポイントも含め自由に設定下さい）　*/
@media screen and (max-width:767px) {
#formWrap {
	width:95%;
	margin:0 auto;
}
table.formTable th, table.formTable td {
	width:auto;
	display:block;
}
table.formTable th {
	margin-top:5px;
	border-bottom:0;
}
input[type="text"], textarea {
	width:80%;
	padding:5px;
	font-size:110%;
	display:block;
}
input[type="submit"], input[type="reset"], input[type="button"] {
	display:block;
	width:100%;
	height:40px;
}
}

/*================================================
 *  コンテンツのアンカー設定
 ================================================*/

#anchor1 {		/* アンカーが固定ヘッダーの下に潜り込まないようにする */
	margin-top: -75px; /* 固定ナビの高さ分のネガティブマージン */
  	padding-top: 75px; /* 打ち消し用のパディング */
}

#anchor2 {		/* アンカーが固定ヘッダーの下に潜り込まないようにする */
	margin-top: -75px; /* 固定ナビの高さ分のネガティブマージン */
  	padding-top: 75px; /* 打ち消し用のパディング */
}

#anchor3 {		/* アンカーが固定ヘッダーの下に潜り込まないようにする */
	margin-top: -75px; /* 固定ナビの高さ分のネガティブマージン */
  	padding-top: 75px; /* 打ち消し用のパディング */
}

#anchor4 {		/* アンカーが固定ヘッダーの下に潜り込まないようにする */
	margin-top: -75px; /* 固定ナビの高さ分のネガティブマージン */
  	padding-top: 75px; /* 打ち消し用のパディング */
}

#anchor5 {		/* アンカーが固定ヘッダーの下に潜り込まないようにする */
	margin-top: -75px; /* 固定ナビの高さ分のネガティブマージン */
  	padding-top: 75px; /* 打ち消し用のパディング */
}

#anchor6 {		/* アンカーが固定ヘッダーの下に潜り込まないようにする */
	margin-top: -75px; /* 固定ナビの高さ分のネガティブマージン */
  	padding-top: 75px; /* 打ち消し用のパディング */
}

#anchor7 {		/* アンカーが固定ヘッダーの下に潜り込まないようにする */
	margin-top: -75px; /* 固定ナビの高さ分のネガティブマージン */
  	padding-top: 75px; /* 打ち消し用のパディング */
}

#anchor8 {		/* アンカーが固定ヘッダーの下に潜り込まないようにする */
	margin-top: -75px; /* 固定ナビの高さ分のネガティブマージン */
  	padding-top: 75px; /* 打ち消し用のパディング */
}

#anchor9 {		/* アンカーが固定ヘッダーの下に潜り込まないようにする */
	margin-top: -75px; /* 固定ナビの高さ分のネガティブマージン */
  	padding-top: 75px; /* 打ち消し用のパディング */
}

#anchor10 {		/* アンカーが固定ヘッダーの下に潜り込まないようにする */
	margin-top: -75px; /* 固定ナビの高さ分のネガティブマージン */
  	padding-top: 75px; /* 打ち消し用のパディング */
}

#anchor11 {		/* アンカーが固定ヘッダーの下に潜り込まないようにする */
	margin-top: -75px; /* 固定ナビの高さ分のネガティブマージン */
  	padding-top: 75px; /* 打ち消し用のパディング */
}

#anchor12 {		/* アンカーが固定ヘッダーの下に潜り込まないようにする */
	margin-top: -75px; /* 固定ナビの高さ分のネガティブマージン */
  	padding-top: 75px; /* 打ち消し用のパディング */
}

#anchor13 {		/* アンカーが固定ヘッダーの下に潜り込まないようにする */
	margin-top: -75px; /* 固定ナビの高さ分のネガティブマージン */
  	padding-top: 75px; /* 打ち消し用のパディング */
}

#anchor14 {		/* アンカーが固定ヘッダーの下に潜り込まないようにする */
	margin-top: -75px; /* 固定ナビの高さ分のネガティブマージン */
  	padding-top: 75px; /* 打ち消し用のパディング */
}

#anchor15 {		/* アンカーが固定ヘッダーの下に潜り込まないようにする */
	margin-top: -75px; /* 固定ナビの高さ分のネガティブマージン */
  	padding-top: 75px; /* 打ち消し用のパディング */
}

#anchor16 {		/* アンカーが固定ヘッダーの下に潜り込まないようにする */
	margin-top: -75px; /* 固定ナビの高さ分のネガティブマージン */
  	padding-top: 75px; /* 打ち消し用のパディング */
}

#anchor17 {		/* アンカーが固定ヘッダーの下に潜り込まないようにする */
	margin-top: -75px; /* 固定ナビの高さ分のネガティブマージン */
  	padding-top: 75px; /* 打ち消し用のパディング */
}

#anchor18 {		/* アンカーが固定ヘッダーの下に潜り込まないようにする */
	margin-top: -75px; /* 固定ナビの高さ分のネガティブマージン */
  	padding-top: 75px; /* 打ち消し用のパディング */
}

#anchor19 {		/* アンカーが固定ヘッダーの下に潜り込まないようにする */
	margin-top: -75px; /* 固定ナビの高さ分のネガティブマージン */
  	padding-top: 75px; /* 打ち消し用のパディング */
}

#anchor20 {		/* アンカーが固定ヘッダーの下に潜り込まないようにする */
	margin-top: -75px; /* 固定ナビの高さ分のネガティブマージン */
  	padding-top: 75px; /* 打ち消し用のパディング */
}