
/*
================================================================================================================
コンテンツエリア
================================================================================================================
*/
#container_bottom{
margin:0%;
width:100%;
min-width:320px;
padding:20px 0 20px 0;
position:relative;
min-height:400px;}

/* コンテンツ内全体 */
.contents_elia{
width:980px;
height:100%;
background-color:rgba(030,030,030,0.0);
position:relative;
padding:1%;
margin:0px auto;}
#container{background:none;}
#container_wp{position:relative;}

@media screen and (max-width:979px){
.contents_elia{
width:100%;
min-width:320px;
padding:1%;
display:block;
display:-moz-block;
display:-o-block;
display:-webkit-block;
display:-ms-block;}}

/*
================================================================================================================
メイン画像エリア
================================================================================================================
*/
#container_top{
width:100%;
height:auto;
background-color:transparent;
z-index:10;}

/*
================================================================================================================
コンテンツエリア・枠
================================================================================================================
*/
.contents_box{
position:relative;
width:100%;
padding:15px;
margin-bottom:10px;
height:auto;
box-shadow:#ACF 1px 1px 10px;
z-index:1;}

/*--------------------------------------------------------------------------------------------------*/

#container_wp img{max-width:100%;}
/*
.title_bg{
width:100%;
background:url(../images/common/cc_barline_01.png) no-repeat left center , url(../images/common/cc_barline_02.png) no-repeat right center , url(../images/common/cc_barline_00.png) repeat right center;
background-size:auto 100%,auto 100%,auto 100%;
color:#fff;
text-align:center;
font-weight:bold;
font-size:16px;}

.bg0{
background:url(../images/common/cc_bg_l.png) no-repeat left 40% fixed , url(../images/common/cc_bg_r.png) no-repeat right 0% fixed , url(../images/common/cc_bg.jpg) no-repeat center top , #fff;
background-size:250px auto,350px auto,auto;
background-color: #99dbfe;
}*/

.title_bg{
width:100%;
background:url(../images/common/cc_barline_00.png) repeat right center;
background-size:auto 100%;
color:#fff;
text-align:center;
font-weight:bold;
font-size:16px;}

.bg0{
background:url(../images/common/cc_bg.jpg) no-repeat center top , #fff;
background-size:auto;
background-color: #99dbfe;
}

.t_center{text-align:center;}
.t_left{text-align:left;}
.t_right{text-align:right;}
.t_bold{font-weight:bold;}

/*
================================================================================================================
ふわっと表示（フェードイン）
================================================================================================================
*/
.fade-in{
transition:opacity 0.4s;
-moz-transition:opacity 0.4s;
-webkit-transition:opacity 0.4s;
-o-transition:opacity 0.4s;}

/*
================================================================================================================
下からふわっと表示（フェードアップ）
================================================================================================================
*/
.fade-up{
transition:opacity 0.7s;
-moz-transition:opacity 0.7s;
-webkit-transition:opacity 0.7s;
-o-transition:opacity 0.7s;
transition:transform 0.7s;
-moz-transition:transform 0.7s;
-webkit-transition:transform 0.7s;
-o-transition:transform 0.7s;}

/*リンク*/
.anchorlink{margin-top:-60px; padding-top:60px;}

.anm0{opacity:0;transform:translate3d(0,100%,0);transition:all 1s ease; display:flex;}
.anm0_l{transform:translate3d(-100%,0,0);}
.anm0_r{transform:translate3d(100%,0,0);}
.anm0_active{opacity:1;transform:translate3d(0,0,0);}

/*
================================================================================================================
トップへ戻る
================================================================================================================
*/
#page-top{display:none !important; position:fixed; bottom:157px;right:0px; width:10%; max-width:120px;}

#page-top a{
background:url(../images/common/cc_pagetop.png) no-repeat;
display:block; background-size:100%; width:100%; height:0px; padding-bottom:100%;}

.in_block{display:inline-block; vertical-align:middle; font-size:13px;}

#c_icon{width:11%; max-width:117px;}

.f_mes{margin-top:2%;}
.f_mes a{color:#00aeba;text-decoration:underline;}
.f_mes a:hover{color:#6b93a0;}

/*
================================================================================================================
メニュー（PC）
================================================================================================================
*/
.menu_bg{background:rgba(163,162,162,0.5);}
.menu_base{/*width:980px;*/width:1100px; margin:0 auto;}

.menu_bg .in_block{width:16%; text-align:center; padding:2% 0;}
.menu_bg .in_block a{
display:block;
width:147px;
height:63px;
margin:0px auto;}
.menu_bg .in_block a:hover{background-position:0 100% !important;}

.menu_bg .in_block#howto_btn a{background:url(../images/common/cc_menu_01.png) no-repeat;}
.menu_bg .in_block#model_btn a{background:url(../images/common/cc_menu_03.png) no-repeat;}
.menu_bg .in_block#news_btn a{background:url(../images/common/cc_menu_02.png) no-repeat;}
.menu_bg .in_block#shop_btn a{background:url(../images/common/cc_menu_04.png) no-repeat;}
.menu_bg .in_block#original_btn a{background:url(../images/common/cc_menu_05.png) no-repeat;}
.menu_bg .in_block#omikuji_btn a{background:url(../images/common/cc_menu_06.png) no-repeat;}

@media screen and (max-width:1100px){
.menu_base{width:980px;}
.menu_bg .in_block{padding:2% 0;}
.menu_bg .in_block a{background-size:100% !important; width:120px !important; height:51px !important;}
}

/*
================================================================================================================
メニュー（SP）
================================================================================================================
*/
#sp_menu_area{display:block; padding-top:0px;}

#spmenu_swich{
width:65px; height:65px; position:absolute;
top:0px;right:0;z-index:4; cursor:pointer;}

#sp_opcl_mark{
width:65px; height:65px; position:absolute;
top:0px;right:0;z-index:2;}

#sp_opcl_mark .bg{
position:absolute;
top:0;
right:0;
width:65px;
height:65px;
background:url(../images/common/cc_sp_btn_open.png) no-repeat;
background-size:100% 100%;
z-index:1;}

/*SPメニューボタンアニメ*/
#sp_opcl_mark.active span{height:4px; background:#78edfe; border-radius:2px;}

#sp_opcl_mark.active .bg{
position:absolute;
top:0;
right:0;
width:65px;
height:65px;
background:url(../images/common/cc_sp_btn_close.png) no-repeat;
background-size:100% 100%;
z-index:1;}

#sp_menu_area ul.spg_menu{
position:absolute;
top:0;
left:0;
z-index:3;
width:calc(100% + 1px);
width:-moz-calc(100% + 1px);
width:-webkit-calc(100% + 1px);
/*幅8px、高さ8pxで背景画像のサイズを指定*/
background-size:5px 5px;
opacity:0.9;
color:#fff;
border-bottom:#026 2px solid;}

#sp_menu_area ul.spg_menu li{
width:100%;
font-size:2.5vw;
background-color:#144e65;
border-top:#fff solid 1px;
border-right:#fff solid 1px;
text-align:center;
cursor:pointer;
color:#fff;
position:relative;}

#sp_menu_area ul.spg_menu li a{color:#fff; width:100%; display:inline-block;}
#sp_menu_area ul.spg_menu li a:hover{color:#ffabca;}

#sp_menu_area #spmenu_logo{padding:12px 0px; background:rgba(255,255,255,0.8);}

/*追加･修正*/
#sp_menu_area ul.spg_menu li.push::after{
position:absolute;
top:25%;
right:2%;
visibility:visible;
content:"";
border-top:7px solid transparent;
border-bottom:7px solid transparent;
border-left:7px solid #f92b77;}

#sp_menu_area ul.spg_menu li #original-print,
#sp_menu_area ul.spg_menu li.push{padding:1%;}

#sp_menu_area ul.spg_menu li #original-print:hover{color:#ffabca;}

@media screen and (max-width:599px){
#sp_menu_area ul.spg_menu li #original-print{font-size:13px; padding:2% 0 !important;}
#sp_menu_area ul.spg_menu li.push{font-size:13px; padding:2% 0 !important;}}

/*
==========================================================================
オリジナルプリントメニュー
==========================================================================
*/
#original-menu{background-color:#fff;}
#original-menu .inner{
display:flex;
width:100%;
font-size:14px;
font-weight:bold;
flex-wrap:wrap;
justify-content:space-between;
margin:0 auto;}

#original-menu .inner a{
display:block;
position:relative;
color:#14546a;
text-decoration:underline;
padding:5px 0 5px 25px;}
#original-menu .inner a span{
position:absolute;
top:5px;
left:0;
display:inline-block;
width:20px;
height:20px;
border-radius:4px;
transform:rotate(-45deg);}
#original-menu .inner a:nth-child(odd) span{border:3px solid #12a895;}
#original-menu .inner a:nth-child(even) span{border:3px solid #dc3285;}

#original-menu .inner a:hover{text-decoration:none;}

@media screen and (min-width:980px){
#original-menu .inner{max-width:900px; padding:10px 0;}}

@media screen and (max-width:979px){
#original-menu{display:none;}
#original-menu .inner a{
color:#144e65 !important;
background-color:rgba(255,255,255,1) !important;
font-size:2.2vw;
text-decoration:none !important;
border-bottom:1px solid #77b5ad;
padding:10px 0;}
#original-menu .inner a:last-child{border-bottom:none;}
#original-menu .inner a:hover{color:#dc3285 !important;}
#original-menu .inner a span{top:12px; left:1%;}}

@media screen and (max-width:700px){
#original-menu .inner a span{top:10px; left:15px; width:15px; height:15px;}}

@media screen and (max-width:599px){
#original-menu .inner a{font-size:13px; padding:6px 0;}
#original-menu .inner a span{top:7px;}}


/*改定履歴*/
.update_box{
  margin-top:2em;
}


