@charset "utf-8";
/* CSS Document */

/* 
html5doctor.com Reset Stylesheet
v1.6.1
Last Updated: 2010-09-17
Author: Richard Clark - http://richclarkdesign.com 
Twitter: @rich_clark
*/
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, menu, nav, section, summary,
time, mark, audio, video {
    margin:0;
    padding:0;
    border:0;
    outline:0;
    font-size:100%;
    vertical-align:baseline;
    background:transparent;
	box-sizing:border-box; /* 追加要素 */
}
body { line-height:1;}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { display:block;}
nav ul { list-style:none;}
blockquote, q { quotes:none;}
blockquote:before, blockquote:after, q:before, q:after { content:''; content:none;}
a { margin:0; padding:0; font-size:100%; vertical-align:baseline; background:transparent;}
/* change colours to suit your needs */
ins { background-color:#ff9; color:#000; text-decoration:none;}
/* change colours to suit your needs */
mark { background-color:#ff9; color:#000; font-style:italic; font-weight:bold;}

del { text-decoration: line-through;}
abbr[title], dfn[title] { border-bottom:1px dotted; cursor:help;}
table { border-collapse:collapse; border-spacing:0;}
/* change border colour to suit your needs */
hr { display:block; height:1px; border:0; border-top:1px solid #cccccc; margin:1em 0; padding:0;}
input, select { vertical-align:middle;}
textarea { font-weight:normal; font-family:Georgia, "Times New Roman", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;}
/* //End// html5doctor.com Reset Stylesheet */

html { height:100%; font-size:62.5%; font-family:Georgia, "Times New Roman", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; background:url(../img/com/bg-body.jpg) repeat top center #E8E5DE;}
body { position:static; width:100%; height:100%; margin:0 auto; font-size:14px; font-size:1.4rem; line-height:1.5; color:#333333; background-color:#FFFFFF; overflow-wrap:break-word; word-wrap:break-word; word-break:keep-all/*break-all*/; background-color:transparent;}
a { text-decoration:none;}
a:hover { text-decoration:none;}
@media all and (max-width:719px)
{
html,body { -webkit-text-size-adjust:none;}
a { text-decoration:none;}
a:hover { text-decoration:none;}
}

/*文字リンク色と装飾設定*/
a:link { color:#333399; text-decoration: none} 
a:visited { color:#0033FF; text-decoration: none}
a:hover { color:#0033FF; text-decoration:underline} 
a:active { color:#6699FF; text-decoration: underline} 

/*文字サイズ*/
.text5 { font-size: 5px; font-size:0.5rem !important;}
.text8 { font-size: 8px; font-size:0.8rem !important;}
.text10 { font-size: 10px; font-size:1.0rem !important;}
.text11 { font-size: 11px; font-size:1.1rem !important;}
.text12 { font-size: 12px; font-size:1.2rem !important;}
.text13 { font-size: 13px; font-size:1.3rem !important;}
.text14 { font-size: 14px; font-size:1.4rem !important;}
.text15 { font-size: 15px; font-size:1.5rem !important;}
.text16 { font-size: 16px; font-size:1.6rem !important;}
.text17 { font-size: 17px; font-size:1.7rem !important;}
.text18 { font-size: 18px; font-size:1.8rem !important;}
.text20 { font-size: 20px; font-size:2.0rem !important;}
.text22 { font-size: 22px; font-size:2.2rem !important;}
.text24 { font-size: 24px; font-size:2.4rem !important;}
.text28 { font-size: 28px; font-size:2.8rem !important;}
.text32 { font-size: 32px; font-size:3.2rem !important;}
.text36 { font-size: 36px; font-size:3.6rem !important;}
.text48 { font-size: 48px; font-size:4.8rem !important;}
.text-wh { color:#FFFFFF !important;}
.text-red_bd { color:#FF0000 !important; font-weight:bold !important;}
.text-red { color:#FF0000 !important;}

.clear { clear:both; height:0px; margin:0; padding:0;}

.clearfix:after { /*floatの解除、ここがポイント*/ 
    display:block; 
    clear:both; 
    height:0px; 
    visibility:hidden; 
    content:"."; 
} 
.clearfix { 
    min-height: 1px; /*IE6、7対策*/ 
} 
* html .clearfix { 
    height: 1px; 
    /*\*//*/ /*MAC IE5.x対策*/ 
    height: auto; 
    overflow: hidden; 
    /**/ 
}

.fontmin { font-weight:800 !important; font-family:ＭＳ Ｐ明朝, 細明朝体, 'Hiragino Mincho ProN', 'Sawarabi Mincho', serif !important; transform: rotate(.03deg) !important;}
.fonteuromin { font-weight:normal !important; font-family:Georgia, "Times New Roman", Times, serif !important; transform: rotate(.00deg) !important;}

@keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
0% {opacity: 0}
100% {opacity: 1}
}

/*===========================================================*/

body { margin-top:-50%; margin-top:-50vh; padding-top:50%; padding-top:50vh;}

/*----- ヘッダー -----*/
header { position:fixed; top:0; right:0; left:0; margin:0; padding:0; z-index:2; text-align:center;}
header.is-fixed {}/* ヘッダー固定用スタイル */
header #hederarea { background:url(../img/com/h-bg_contents.jpg) no-repeat center center; background-size:cover;}
header #hederarea #mainlogo { position:relative; display:inline-block; width:/*130*/195px; margin:0 auto;}
header #hederarea #mainlogo img { display:block; width:100%; margin:10px auto 0; padding:0;}
header #hederarea #mainlogo img:hover { opacity:0.7;}
header #hederarea.home { background:none; background-color:transparent;}
header #hederarea.home #mainlogo { width:240px; margin:20% auto 0; margin:40vh auto 0; transition:0.5s ease;}
header #hederarea.home #mainlogo img { margin:10px auto 5px;
animation: fadeIn 2s ease 2s 1 normal both;
-webkit-animation: fadeIn 2s ease 2s 1 normal both;
}
header.is-fixed #hederarea.home { background-color:rgba(0,0,0,0.3);}
header.is-fixed #hederarea.home #mainlogo { width:/*130*/195px; margin:0% auto 0; margin:0vh auto 0;}
@media all and (max-width:719px)
{
header #hederarea #mainlogo { width:110px;}
header #hederarea #mainlogo img { margin:10px auto 0;}
header #hederarea.home #mainlogo { width:180px; margin:25vh auto 0; transition:1.0s ease;}
header.is-fixed #hederarea.home #mainlogo { width:110px; margin:0vh auto;}
header.is-fixed #hederarea.home #mainlogo img { margin:5px auto 0;}
}

/*----- 開閉用ボタン -----*/
.snsicon { position:absolute; top:/*15*/25px; right:10px; width:auto; height:40px; text-align:right;}
.snsicon a:hover { opacity:0.7;}
.snsicon img { position:relative; width:auto; height:100%;}
.menu-btn { display:block; position:absolute; top:/*10*/20px; left:10px; width:50px; height:50px; cursor:pointer; z-index:999;}
/*.menu-btn span { color:#FFFFFF;}*/
/* 開閉用ボタンがクリックされた時のスタイル */
/*.menu-btn span:after { content:attr(data-txt-menu);}
.open .menu-btn span:after { content:attr(data-txt-close);}*/
#menuButton { overflow:hidden; display:block; position:relative; z-index:0; width:50px; height:50px; cursor:pointer; z-index:999;}
#menuButton span,
#menuButton::before,
#menuButton::after { display:block; position:absolute; top:0; bottom:0; left:0; right:0; width:36px; height:1px; margin:auto; background:#FFFFFF;}
#menuButton span { overflow:hidden; z-index:1; color:#FFFFFF;}
#menuButton::before { z-index:2; transform:translate(0, -12px); content:"";}
#menuButton::after { z-index:2; transform:translate(0, 12px); content:"";}
#menuButton span { transition:transform 150ms 50ms;}
#menuButton::before,
#menuButton::after { transition:transform 200ms;}
/*#menuButton.active { overflow:inherit;}
#menuButton.active { position:fixed; top:0; right:0; bottom:0; left:0; width:100vw; height:100vh;}
#menuButton.active p { position:relative; top:10px; left:10px; width:50px; height:50px; background-color:#C90;}*/
#menuButton.active span { display:none;}
/*#menuButton.active span { position:fixed; top:0; right:0; bottom:0; left:0; width:100vw; height:100%; height:100vh; //--transform:translate(100px, 0);--// background:none; transition:transform 150ms; z-index:1;}*/
#menuButton.active::before { transform:rotate(45deg); background:#000000; z-index:9999;}
#menuButton.active::after { transform:rotate(-45deg); background:#000000; z-index:9999;}
@media all and (max-width:719px)
{
.snsicon { top:10px; height:30px;}
.menu-btn { top:10px; left:5px; width:30px; height:30px;}
#menuButton { width:30px; height:30px;}
#menuButton span,
#menuButton::before,
#menuButton::after { width:28px; height:1px;}
#menuButton::before { transform:translate(0, -10px);}
#menuButton::after { transform:translate(0, 10px);}
#menuButton.active span { display:none;}
}

/*----- モーダルウィンドウのスタイル -----*/
.menu { position:fixed; display:table; top:0; left:0; width:100%; height:100%; height:100vh; background:rgba(255,255,255,0.8); -webkit-transition:all .5s; transition:all .5s; visibility:hidden; opacity:0;}
.menu > ul { position:relative; width:95%; margin:40vh auto 0; list-style:none; z-index:99999;}
.menu > ul > li { display:inline-block; margin:0 20px 10px; text-align:center;}
.menu > ul > li.current { text-decoration:line-through; /*background:rgba(0,0,0,0.05);*/ pointer-events:none;}
.menu > ul > li > a { display:block; padding:0 10px; font-size:3.6rem; font-weight:normal !important; font-family:Georgia, "Times New Roman", Times, serif !important; transform: rotate(.00deg) !important; color:#000000;}
.menu > ul > li > a:hover { text-decoration:none; background:rgba(0,0,0,0.03);}
.open .menu { -webkit-transition:all .5s; transition:all .5s; visibility:visible; opacity:1;}/* 開閉用ボタンがクリックされた時のスタイル */
#m-logo { position:fixed; top:10px; left:50%; transform:translatex(-50%); display:inline-block; width:/*130*/195px; z-index:99999;}
#m-logo img { width:100%; opacity:0;}
.open .menu #m-logo img { width:100%; opacity:1;}
.open .menu #m-logo img:hover { opacity:0.7;}
.m-snsicon { position:fixed; top:/*15*/25px; right:10px; transform:translate(0,0); width:auto; height:40px; text-align:right; z-index:99999;}
.m-snsicon a:hover { opacity:0.7;}
.m-snsicon img { position:relative; width:auto; height:100%; z-index:9; opacity:0;}
.open .menu .m-snsicon img { opacity:1;}
@media all and (max-width:719px)
{
.menu > ul { position:relative; width:90%; max-width:720px; height:auto; max-height:85vh; margin:15vh auto 0; list-style:none; z-index:9999;}
.menu > ul > li { display:block; /*height:10vh; line-height:10vh;*/ margin:0;}
.menu > ul > li > a { font-size:2.8rem; padding:0;}
#m-logo { top:10px; width:110px;}
.home #m-logo { top:5px;}
.m-snsicon { top:10px; height:30px;}
}

/*----- 常時表示メニュー※トップ以外 -----*/
ul#dp-menubox  { margin:0; padding:0; list-style:none; font-size:0;}
header #hederarea.home ul#dp-menubox { display:none;}
ul#dp-menubox li { display:inline-block; margin:0 2vw 0 0; padding:0;}
ul#dp-menubox li:last-of-type { margin:0;}
ul#dp-menubox li a { display:block; margin:0; padding:0; font-size:22px; color:#FFFFFF; font-weight:normal !important; font-family:Georgia, "Times New Roman", Times, serif !important; transform: rotate(.00deg) !important;}
ul#dp-menubox li.current a { color:#32B0B1;}
@media all and (max-width:719px)
{
ul#dp-menubox li a { padding:0; font-size:2.2rem;}
}
@media all and (max-width:559px)
{
ul#dp-menubox li a { font-size:4.0vw;}
}

/*----- フッター -----*/
footer { margin:0; padding:10px 0; text-align:center; font-size:1.2rem;}

/*----- メイン -----*/
main { text-align:center;}
h1 { margin:40px 0; text-align:center; font-size:36px; font-weight:normal !important; font-family:Georgia, "Times New Roman", Times, serif !important; transform: rotate(.00deg) !important;}
h1 p { font-size:1.8rem;}
h1.contents-title { margin:120px 0 40px; font-size:0;}
@media all and (max-width:719px)
{
h1 { font-size:3.2rem;}
h1.contents-title { margin:70px 0 40px;}
}
@media all and (max-width:559px)
{
h1.contents-title { margin:15vw 0 40px;}
}

/*----- ページトップ用 -----*/
#pagetop {
	display:block;
	position: fixed;
	bottom: -100px;
	right: 20px;
	z-index:1;
}
#pagetop a {
	display: block;
	width: 75px;
	height: 75px;
	background-image:url(../img/com/pagetop.png);
	background-repeat:no-repeat;
	background-size:contain;
	text-align: center;
	color:#001D81;
	font-size: 28px;
	text-decoration: none;
	line-height: 50px;
}
#pagetop a:hover {
	background-image:url(../img/com/pagetop_on.png);
	color:#002ECC;
}
@media all and (max-width:719px)
{
#pagetop {
	bottom: -50px;
	right: 5px;
}
#pagetop a {
	width: 50px;
	height: 50px;
	font-size: 1.8rem;
	line-height: 40px;
}
}

/*付加要素--------------------*/
.linkanchor { margin-top:-120px; padding-top:120px;}
@media all and (max-width:719px)
{
.linkanchor { margin-top:-60px; padding-top:60px;}
}

.ta-left { text-align:left !important;}
.ta-center { text-align:center !important;}
.ta-right { text-align:right !important;}
.mg_top-10 { margin-top:10px !important;}
.mg_top-15 { margin-top:15px !important;}
.mg_top-20 { margin-top:20px !important;}
.mg_top-30 { margin-top:30px !important;}
.mg_top-40 { margin-top:40px !important;}
.mg_btm-10 { margin-bottom:10px !important;}
.mg_btm-15 { margin-bottom:15px !important;}
.mg_btm-20 { margin-bottom:20px !important;}
.mg_btm-30 { margin-bottom:30px !important;}
.mg_btm-40 { margin-bottom:40px !important;}
.box-vta { vertical-align:middle !important;}
a .box-vta { display:block !important;}
a:hover .box-vta img { opacity: 0.7 !important;}
ul#dp-menubox li:nth-of-type(1)  { display:none !important;}