@charset "UTF-8";

/*========================================================================================
【common】
========================================================================================*/
html { height:100%; width:100%; -webkit-text-size-adjust:100%; }
body { color:#000; font-family: "M PLUS 1p","ＭＳ Ｐゴシック","Osaka",sans-serif; font-size:13px; line-height:18px; }

fieldset, img { border:0; }
ul, ol, li { list-style:none; padding:0; margin:0; }

.clearfix:before,
.clearfix:after { content:" "; display:table; }
.clearfix:after { clear:both; }

/*「forSP＝スマホ版にしか表示しない」ものを非表示に
--------------------------------------------*/
.forPC { display:inline-block;}
.forSP { display:none !important;}


/*========================================================================================
【コンテンツ大枠】
========================================================================================*/
#contents{ margin: 0 auto; padding: 0; width: 100%;}


/*========================================================================================
【メインビジュアル】
========================================================================================*/

/*大枠*/
#contents .mainArea {background: #bd5d6a;  margin: 0 auto; position: relative;}

/*写真が切り替わるパネル
---------------------------------------------------------------------*/
ul.itemList { font-size: 0; line-height: 0; margin: 0 auto; padding: 0; width: 100%;overflow: hidden;}
ul.itemList li { display: inline-block; margin: 0; padding: 1px; vertical-align: top; box-sizing: border-box;width: 14.28%;}
ul.itemList li img {height: auto; min-width: 120px;width: 100%;  box-sizing: border-box;}

@media screen and (max-width: 1230px){
	ul.itemList li {
		width: 20%;
	}
	.itemList .forPC{display: none!important;}
}

/*パネルをマスクする
---------------------------------------------------------------------*/
.masked { position: relative;}
.masked:before {background-color: rgba(183,64,93,0.73); background-size: cover; content:""; height:100%; margin:0; position:absolute; left:0; right: 0; top:0; bottom: 0; width: 100%; z-index:50; box-sizing: border-box;}


/*メインビジュアル
---------------------------------------------------------------------*/
.mvBox { height: auto; position: absolute; top: 0; left: 0; right: 0; width: 100%; z-index: 200;}

.mvBox .mv_move { margin: 0 auto; position: relative; padding: 2em 0; text-align: center; width: 1045px; z-index: 300; box-sizing: border-box;}
.mvBox .mv_move img { display: block; height: auto; margin: 0 auto; max-width: 1045px; width: 100%;}
.mvBox .logo_circle{
	position: absolute;
	top:362px;
	left: 49.7%;
	z-index: 400;
	margin:0 auto;
}
.mvBox .logo_circle img{
	width: 112px;
	animation: rotate-anime 3s linear infinite;
}
@keyframes rotate-anime {
  0%  {transform: rotate(0);}
  100%  {transform: rotate(360deg);}
}

@media screen and (max-width:1080px){
	.mvBox .logo_circle{
	left: 519px;
}
}

/*========================================================================================
【コンテンツ】
========================================================================================*/
.chimi10_contents .webf { transform: rotate(0.03deg); }

.chimi10_contents h2{
	text-align: center;
	margin-bottom: 1em;
}

/*---メッセージ---*/
.chimi_message{
	background: url("../images/bg_message.jpg");
	background-position: top;
	background-repeat: no-repeat;
	background-size: cover;
	background-color: #fdd000;
	padding:100px 0;
}

.chimi_message h2 img{
	width:919px;
}
.message_box{
	border: solid 17px #120402;
	background-color: #fff;
	width:900px;
	margin:1em auto;
	border-radius:90px 0 90px 0;
	position: relative;
}
.message_txt{
	position: relative;
	margin: 3em auto 4em;
	width:650px;
	background: repeating-linear-gradient(-45deg, #ffe5ea, #ffe5ea 14px,#ffedf1 14px, #ffedf1 20px);
}

.message_txt::before{
	height: 0;
	display: block;
	position: absolute;
	right: 0;
	content: "";
	border-top: solid 50px #fff;
	border-left: solid 50px transparent;
}

.message_txt::after{
	height: 0;
	display: block;
	position: absolute;
	right: 0;
	content: "";
	border-bottom: solid 50px #f0819c;
	border-right: solid 50px transparent;
	top: 0;
}

.message_txt img{
	position: absolute;
	right:-4em;
	bottom:0.3em;
	width:10em;
}

.message_box p{	
	padding:2.5em 3em 5em;
	font-size:20px;
	font-weight: 600;
	line-height:1.7em;
}
.message_box p span{
	float: right;
	font-weight: 500;
	line-height: 2.5em;
}
.message_box .yonkoma_link{
	margin-bottom:3em;
	text-align: center;	
	transition: 0.3s;
}
.message_box .yonkoma_link:hover{
	opacity: 0.7;
}
.message_box .yonkoma_link img{width:436px;}


.message_logo_petit{
	position: absolute;
	bottom:-4em;
	left:1em;
	width:102px;
}
.message_logo_petitChara{
	position: absolute;
	top:9em;
	left:-4em;
	width:130px;
}
.message_logo_buddy{
	position: absolute;
	bottom:9em;
	right:-3em;
	width:152px;
}
.message_logo_chimimega{
	position: absolute;
	top:3em;
	right:-3em;
	width:129px;
}

/*---10周年記念品---*/
.chimi_10thitem{
	background-color:#ffa6bc;
	background-image: url("../images/bg_stars.png");
	background-size:300px;
	padding:80px 0;
}

.chimi_10thitem .img_10th{
	width:933px;
	margin:0 auto;
}
.chimi_10thitem .item_10th{
	margin-bottom: 5em;
}

.chimi_10thitem .item_info{
	width:933px;
	margin:0.8em auto;
}

.chimi_10thitem .item_name{
	display: inline-block;
	vertical-align: top;
	width:614px;
	height: 120px;
	background: #fff;
	border-radius: 30px 0 0;
	box-shadow: 6px 6px rgba(175,80,102,0.5);
}
.chimi_10thitem .item_name p{
	font-size: 19px;
	font-weight: 800;
	line-height: 1.4em;
	margin: 1em 1em 1em 2em;
}
.chimi_10thitem .item_name p span{
	font-weight: 500;
}

.chimi_10thitem .item_btn{
	display: inline-block;
	vertical-align: top;
	width:295px;
	height:118px;
	background:linear-gradient(-45deg, #feb800 50%, #fdd000 50%);
	border-radius: 0 0 30px;
	border:solid 1px #fffd84;
	box-shadow: 6px 6px rgba(175,80,102,0.5);
	margin-left:13px;
	position:relative;
	transition: 0.3s;
}

.chimi_10thitem .item_btn p{
	color:#663204;
	font-size: 33px;
	font-weight: 800;
	text-align: center;
	text-shadow: -1px -1px #fffd84; 
	line-height: 1.4em;
	margin: 1.1em auto;
}
.chimi_10thitem .item_btn .twolines {margin: 0.4em;}

.chimi_10thitem .item_btn a{
	transition: 0.3s;
}

.chimi_10thitem .item_btn a:hover{
	opacity: 0.7;
}

/*---
.chimi_10thitem .item_btn p::after{
	content: "";
    display:inline-block;
    width: 0;
    height: 0;
    border-top: solid 10px transparent;
    border-right: solid 10px transparent;
    border-bottom: solid 10px transparent;
    border-left: solid 10px #663204;
    position: absolute;
    top: 50%;
    right:2px;
    margin-top:-10px;	
}
.chimi_10thitem a{text-decoration: none;}
---*/
.line_bnr {
	width:869px;
	margin: 0 auto 3em;
	}
.sketch {
	width:813px;
	margin-bottom: 4em;
}
.line_bnr a{
	transition: 0.3s;
}

.line_bnr a:hover{
	opacity: 0.7;
}


/*---ちみメガ関連商品---*/

.item_chimimega {
	background-color: #6a3906;
	background-image:url("../images/bg_logo.png");
	margin:0;
	padding: 65px 0 80px;
}

.item_chimimega h2{
	margin:0 auto 65px;
}

.item_chimimega ul{
	width:930px;
	margin: 0 auto;
}

.item_chimimega li{
	display: inline-block;
	margin: 0 0 14px 14px;
}
.item_chimimega li:first-child{
	margin-left: 0;
}
.item_chimimega li:nth-child(7n+1){
	margin-left: 0;
}

.item_chimimega li img{
	width:117px;
	transition: 0.2s;
}
.item_chimimega li img:hover{
	opacity: 0.7;
}


/*========================================================================================
【コピーライト】
========================================================================================*/
#copyrightBox { margin: 0 auto; padding: 30px 0; text-align: center; width: 65%;}
#copyrightBox p { font-size: 13px; line-height: 18px; margin: 0; padding: 0; }


/*========================================================================================
【共用フッター】
========================================================================================*/
footer {width: 100%; position: relative !important; z-index: 999;}
footer #box_inner {max-width: 1200px; width: 100%; margin: 0 auto; position:relative;}
footer #box_inner #footer_sns {position: absolute; top:90px; left:0;}
footer #box_inner #footer_sns .fb-like{ margin: 0 10px 0 0;}
footer #box_inner #footer_sns .fb_iframe_widget > span{vertical-align: baseline !important;}

/*========================================================================================
【共通】強調するテキスト
========================================================================================*/
.emphasis {font-size: 20px; font-weight: bold;}



/*========================================================================================
【メディアクエリ】タブレット～ノートサイズの調整
========================================================================================*/
@media screen and (min-width: 768px) and (max-width: 1024px){

/*「forSP＝スマホ版にしか表示しない」ものを非表示に
--------------------------------------------*/
.forPC { display:inline-block !important;}
.forSP { display:none !important;}


/*========================================================================================
【TAB】【メインビジュアル】
========================================================================================*/

/*【TAB】大枠*/
	#contents{ max-width: 100%!important; }
#contents .mainArea {background: #bd5d6a;  margin: 0 auto; position: relative; min-width: 100%; max-width: 100%; }
	
ul .itemlist li{
		width: 20%;
	}
	

/*メインビジュアル
---------------------------------------------------------------------*/

.mvBox .mv_move { width: 98%;}
.mvBox .logo_circle{
	position: absolute;
	top:47%;
	left: 49.8%;
	margin:0 auto;
}
.mvBox .logo_circle img{
	width: 10vw;
}
.mvBox .forPC { display:none !important;}
.mvBox .forSP { display:inline-block !important;}
	
	
	
/*---メッセージ---*/
.message_box{
	width:85%;
}
.chimi_message h2 img{
	width: 90%;
	max-width: 919px;
	}
	
.message_txt{
	width:90%;
}
	
.message_txt::before{
	height: 0;
	display: block;
	position: absolute;
	right: 0;
	content: "";
	border-top: solid 30px #fff;
	border-left: solid 30px transparent;
}

.message_txt::after{
	height: 0;
	display: block;
	position: absolute;
	right: 0;
	content: "";
	border-bottom: solid 30px #f0819c;
	border-right: solid 30px transparent;
	top: 0;
}
	
.message_txt img{
	right:-2em;
	bottom:-2em;
	width:10em;
}
	
.message_logo_chimimega {
	top: 7em;
    right: -3em;
	width:110px;
	}
	
.message_logo_petitChara {
    top: 18em;
    width: 120px;
}
	
/*---10周年記念品---*/
.chimi_10thitem{
	background-size:10em;
	padding:2em 0 2em;
}
	
.chimi_10thitem h2 img{
	width:95%
}

.chimi_10thitem .img_10th{
	width:95%;
	text-align: center;
}
.chimi_10thitem .img_10th img{
	width:100%;
}
.chimi_10thitem .item_10th{
	margin-bottom: 2em;
}

.chimi_10thitem .item_info{
	width:95%;
	margin:0.1em auto;
}

.chimi_10thitem .item_name{
	width:61.5vw;
	height: auto;
	border-radius: 2rem 0 0;
	box-shadow: 4px 4px rgba(175,80,102,0.5);
}
.chimi_10thitem .item_name p{
	font-size: 2vw;
	margin: 1em 1.5em;
}

.chimi_10thitem .item_btn{
	width:27vw;
	height:auto;
	border-radius: 0 0 2rem;
	border:solid 1px #fffd84;
	box-shadow: 4px 4px rgba(175,80,102,0.5);
	margin-left:2vw;
	position:relative;
}

.chimi_10thitem .item_btn p{
	font-size: 2.8vw;
	line-height: 1.3em;
	margin: 1.5em 0.5em 1.5em 1em;
}

.chimi_10thitem .item_btn .twolines {margin:1.35em 0;}

/*---
.chimi_10thitem .item_btn p::after{
	content: "";
    display:inline-block;
    width: 0;
    height: 0;
    border-top: solid 1.5vw transparent;
    border-right: solid 1.5vw transparent;
    border-bottom: solid 1.5vw transparent;
    border-left: solid 1.5vw #663204;
    position: absolute;
    top: 50%;
    right:1px;
    margin-top:-1.5vw;	
}---*/
.line_bnr {
	width:95%;
	margin: 0 auto 4em;
}
.line_bnr img{
	width:100%;
	text-align: center;
	}
	
/*---ちみメガ関連商品---*/

.item_chimimega h2 img{
	width: 85%;
	}
.item_chimimega ul{
	width:90%;
}

.item_chimimega li{
	display: inline-block;
	margin: 0 0 1rem 1rem;
}
.item_chimimega li:first-child{
	margin-left: 0;
}
	
.item_chimimega li:nth-child(7n+1){
	margin-left: 1rem;
}
.item_chimimega li:nth-child(4n+1){
	margin-left: 0;
}

.item_chimimega li img{
	width:19.5vw;
}

}
	
	
/*========================================================================================
【メディアクエリ】スマホ～タブレットサイズの調整
========================================================================================*/
@media screen and (min-width: 320px) and (max-width: 767px){

/*=====================================================
【SP】【common】
=====================================================*/
html {font-size: 62.5%; width:100%; }
body { margin:0; padding:0; overflow-x:hidden; position:relative; color: #222; font-family: "M PLUS 1p","ＭＳ Ｐゴシック","Osaka",sans-serif; font-size: 1.4rem;min-width:100%; width:100%; -webkit-text-size-adjust:100%; -webkit-tap-highlight-color: transparent;}

fieldset, img { border:0; }
a,
a:hover,
a:focus,
a[target="_blank"]{-webkit-tap-highlight-color: transparent !important; outline: none !important;}

a img { border-style:none; }
ul, ol, li { list-style:none; padding:0; margin:0; }

.clearfix:before, .clearfix:after { content:" "; display:table; }
.clearfix:after { clear:both; }

/*「forPC＝PC版にしか表示しない」ものを非表示に*/
.forPC { display:none !important;}
.forSP { display:inline-block !important; line-height: 0;}

/*=====================================================
【SP】【メインビジュアル】
=====================================================*/

/*【SP】大枠*/
#contents .mainArea {background: #bd5d6a;  margin: 0 auto; position: relative; min-width: 100%; max-width: 100%; }
	
	
/*写真が切り替わるパネル
---------------------------------------------------------------------*/
ul.itemList { font-size: 0; line-height: 0; margin: 0 auto; padding: 0; width: 100%;overflow: hidden;}
ul.itemList li { display: inline-block; margin: 0; padding: 1px; vertical-align: top; box-sizing: border-box;width:25%; }
ul.itemList li img {height: auto; min-width:0; box-sizing: border-box;}

	

/*メインビジュアル
---------------------------------------------------------------------*/

.mvBox .mv_move { width: 98%;}
.mvBox .logo_circle{
	position: absolute;
	top:43.5%;
	left: 49.5%;
	margin:0 auto;
}
.mvBox .logo_circle img{
	width: 12.2vw;
}

/*========================================================================================
【コンテンツ】
========================================================================================*/
/*---メッセージ---*/
.chimi_message{
	padding:2em 0 4em;
}

.chimi_message h2 img{
	width:95%;
}
.message_box{
	border: solid 1rem #120402;
	width:85%;
	border-radius:5rem 0 5rem 0;
}

.message_txt{
	width: 90%;
	margin: 2em auto 2em;
	}
.message_txt::before{
	content: "";
	border-top: solid 20px #fff;
	border-left: solid 20px transparent;
}

.message_txt::after{
	content: "";
	border-bottom: solid 20px #f0819c;
	border-right: solid 20px transparent;
}

.message_txt img{
	position: absolute;
	right:0.5em;
	bottom:0.3em;
	width:7em;
}
.message_box p{	
	padding:2em 1.8em 6rem;
	font-size:3.5vw;
	}
.message_box p span{
	float: none;
	line-height: 1.7em;
	}

.message_box .yonkoma_link{
	margin-bottom:4em;
}
.message_box .yonkoma_link img{
	width:70%;
	max-width:436px;}

.message_logo_petit{
	position: absolute;
	bottom:-2.5em;
	left:1em;
	width:4em;
}
.message_logo_petitChara{
	position: absolute;
	top:11em;
	left:-1.8em;
	width:4em;
}
.message_logo_buddy{
	position: absolute;
	bottom:1em;
	right:-1.5em;
	width:5em;
}
.message_logo_chimimega{
	position: absolute;
	top:6em;
	right:-1.5em;
	width:3.8em;
}

/*---10周年記念品---*/
.chimi_10thitem{
	background-size:10em;
	padding:2em 0;
}
	
.chimi_10thitem h2 img{
	width:95%
}

.chimi_10thitem .img_10th{
	width:95%;
	text-align: center;
}
.chimi_10thitem .img_10th img{
	width:100%;
}
.chimi_10thitem .item_10th{
	margin-bottom: 2em;
}

.chimi_10thitem .item_info{
	width:95%;
	margin:0.1em auto;
}

.chimi_10thitem .item_name{
	display: inline-block;
	vertical-align: top;
	width:62vw;
	height: auto;
	background: #fff;
	border-radius: 2rem 0 0;
	box-shadow: 4px 4px rgba(175,80,102,0.5);
}
.chimi_10thitem .item_name p{
	font-size: 2.8vw;
	margin: 1em 1.5em;
}

.chimi_10thitem .item_btn{
	display: inline-block;
	vertical-align: top;
	width:27vw;
	height:auto;
	border-radius: 0 0 2rem;
	border:solid 1px #fffd84;
	box-shadow: 4px 4px rgba(175,80,102,0.5);
	margin-left:2vw;
	position:relative;
	transition: 0.3s;
}

.chimi_10thitem .item_btn p{
	font-size: 4vw;
	line-height: 1.3em;
	margin: 1.5em 0.5em 1.5em 1em;
}
	
.chimi_10thitem .item_btn .twolines {
	margin:1.5em 0;
	font-size: 3.9vw;}

/*---
.chimi_10thitem .item_btn p::after{
	content: "";
    display:inline-block;
    width: 0;
    height: 0;
    border-top: solid 1.5vw transparent;
    border-right: solid 1.5vw transparent;
    border-bottom: solid 1.5vw transparent;
    border-left: solid 1.5vw #663204;
    position: absolute;
    top: 50%;
    right:1px;
    margin-top:-1.5vw;	
}---*/
.line_bnr {
	width:95%;
	margin: 0 auto 3em;
}
.line_bnr img{
	width:100%;
	text-align: center;
	}

/*---ちみメガ関連商品---*/

.item_chimimega {
	padding: 4em 0;
	background-image:url("../images/bg_logo.png");
	background-size: 40vw;
}

.item_chimimega h2{
	margin:0 auto 2em;
}
.item_chimimega h2 img{
	width: 85%;
	}
.item_chimimega ul{
	width:90%;
}

.item_chimimega li{
	display: inline-block;
	margin: 0 0 1rem 1rem;
}
.item_chimimega li:first-child{
	margin-left: 0;
}
	
.item_chimimega li:nth-child(7n+1){
	margin-left: 1rem;
}
.item_chimimega li:nth-child(4n+1){
	margin-left: 0;
}


.item_chimimega li img{
	width:19.5vw;
}


/*=====================================================
【SP】【共用フッター】
=====================================================*/
footer { background: #000; margin: 0; padding: 3% 0; box-sizing: border-box;}
footer #box_inner {max-width: 100%; width: 100%; margin: 0 auto; position:relative;}
footer #box_inner #footer_sns {position: inherit; top: inherit; left: inherit; margin: 2% 0 0 0; text-align: center;}
footer #box_inner #footer_sns .fb-like{ margin: 0 10px 0 0;}
footer #box_inner #footer_sns .fb_iframe_widget > span{vertical-align: baseline !important;}
.groupLogo{position: static;}

#copyrightBox { width: 90%;}
	
/*=====================================================
【共通】強調するテキスト
=====================================================*/
.emphasis {font-size: 17px; font-weight: bold;}
	}