html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video,main {margin:0;padding:0;border:0;font-size:100%;}
article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,main {display:block;}
body {font-family:Verdana,"Hiragino Kaku Gothic ProN",Meiryo,sans-serif;line-height:1;}
ol,ul {list-style:none;}
blockquote,q {quotes:none;}
blockquote:before,blockquote:after,q:before,q:after {content:'';content:none;}
table {border-collapse:collapse;border-spacing:0;}
wbr:after {content:"\00200B";}

/*	TBS reset
============================== */
.alt {position:absolute;top:-5000px;left:-9999px;}
.clearfix:after {content:"";clear:both;display:block;}
.hide-txt {text-indent:110%;white-space:nowrap;overflow:hidden;}
.fp-causion {display:none;}
.nocontxt {-webkit-touch-callout: none;-webkit-user-select: none;user-select: none;-webkit-user-drag:none;}
.nocontxt img {pointer-events: none;}
@media all and (min-width:768px) {
.alt-pc {position:absolute;top:-5000px;left:-9999px;}
.clearfix-pc:after {content:"";clear:both;display:block;}
.hide-txt-pc {text-indent:110%;white-space:nowrap;overflow:hidden;}
}
@media all and (max-width:767px) {
.alt-smp {position:absolute;top:-5000px;left:-9999px;}
.clearfix-smp:after {content:"";clear:both;display:block;}
.hide-txt-smp {text-indent:110%;white-space:nowrap;overflow:hidden;}
}
div.embed-tbsplayer {
background-color:#000;
position:relative;
height:0;
padding-top:56.25%;
}
div.embed-tbsplayer .tbs-player {
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
}
div.embed-tbsplayer-audio {
background-color:#fff;
}
div.embed-tbsplayer-audio .tbs-player {
height:46px;
}
div.lbx-overlay {
z-index:10000;position:absolute;background-color:#000;width:100%;height:100%;left:0;top:0;right:0;bottom:0;opacity:0.9;
}

/* ============================
	common css
============================ */

/*  General
=============================================== */

#con-body { font-family:Roboto, "Droid Sans", "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; color:#333; background:url(../img/common/bg.jpg) center top; background-size:100% auto; }

.cover { background:url(/img/cover.gif); display:block; width:100%; height:100%; }

.lazy { display:block; position:relative; }

.txts { font-size:80%; }
.txtb { font-size:120%; }

a { color:#7f4ebc; }

#container { text-align:center; }

#pagebody { width:980px; margin:auto; }

@font-face {
  font-family: 'Lato';
  src: url('/um/library/fonts/Lato/Lato-Regular.ttf') format('truetype');
	   font-weight:normal;
}

@font-face {
  font-family: 'Lato';
  src: url('/um/library/fonts/Lato/Lato-Bold.ttf') format('truetype');
	   font-weight:bold;
}

/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

#pagebody { width:auto; }

}


/*	fadein
=============================================== */

.fadein {
    opacity : 0;
    transform : translate(0, 40px);
    transition:all 1s;
  display:block;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}


/*  Main
=============================================== */

.box { margin-bottom:40px; border-radius:10px; box-shadow:0px 2px 4px rgba(0,0,0,0.1); }
.box .subttl { height:80px; border-radius:10px 10px 0 0; background-position:center center; background-repeat:no-repeat; background-size:auto 100%, cover; text-indent:-9999px; }
.box .box-body { padding:30px; background-color:#fff; border-radius:0 0 10px 10px; }

.mov_yt { width:600px; margin:0 auto 1.0em auto; }
.mov_yt_inner { position:relative; width:auto; height:0; padding-top:56.25%; }
.mov_yt_inner iframe { position:absolute; left:0; top:0; width:100%; height:100%; }

.btn-area { text-align:center; }
.btn a { display:inline-block; width:100%; padding:0.9em 0; border-radius:1.5em; font-size:120%; line-height:120%; font-weight:bold; color:#fff; text-decoration:none; text-shadow:0px 1px 3px rgba(0,0,0,0.2); background: rgb(161,162,238); background:linear-gradient(90deg, rgba(161,162,238,1) 0%, rgba(81,123,202,1) 100%); box-shadow:0.1em 0.1em 0.2em rgba(0,0,0,0.2), -0.1em -0.1em 0.4em rgba(0,0,0,0.1) inset; transition: opacity 0.2s ease-out; }
.btn a::before { display:inline-block; position:relative; bottom:0.35em; margin-right:0.7em; content:"▶︎"; font-size:50%; }
.btn a:hover { opacity:0.5; }

@media all and (max-width: 767px) {

.box { margin:0 5% 5% 5%; }
.box .subttl { height:50px; background-size:auto 95%, cover; }
.box .box-body { padding:5%; }

.mov_yt { width:auto; }

.btn { font-size:80%; }

}


/* pagetop
-------------------------------- */

#pagetop { position:fixed; z-index:10; bottom:-200px; right:20px; padding-bottom:20px; }
#pagetop a { display:block; width:3.0em; height:3.0em; border-radius:3.0em; background:url(../img/common/pagetop.png) center center no-repeat; background-size:cover; box-shadow:1px 1px 4px rgba(0,0,0,0.2); text-indent:-9999px; outline:none; }

/*  Header
=============================================== */

#header { margin-bottom:20px; height:270px; background:url(../img/common/header_bg.jpg) center center no-repeat; background-size:cover; }
#logo { margin:auto; width:980px; height:100%; }
#logo a { display:block; width:100%; height:100%; background-image:url(../img/common/logo2022_3.png); background-position:center center; background-repeat:no-repeat; background-size:cover; text-indent:-9999px; }

#gnav-area { margin-bottom:40px; }
#gnav { box-shadow:0px 2px 4px rgba(0,0,0,0.1); border-radius:10px; }

#gnav1 { background-color:#fff; border-radius:10px 10px 0 0; /* for space */ font-size:0; }
#gnav1 li { position:relative; display:inline-block; height:100px; vertical-align:middle; /* for space */ font-size:1rem; }
#gnav1 li:nth-child(1) { width:22.4489795918367%; }
#gnav1 li:nth-child(2) { width:25.5102040816327%; }
#gnav1 li:nth-child(3) { width:29.5918367346939%; }
#gnav1 li:nth-child(4) { width:22.4489795918367%; background:url(../img/common/gnav_boshu_bg.jpg) center center no-repeat; background-size:100% auto; border-radius:0 10px 0 0; animation:gnav-boshu 2.0s forwards; }
@keyframes gnav-boshu {
    0% { opacity:1; }
    25% { opacity:0.2; }
    50% { opacity:1; }
    75% { opacity:0.2; }
    100% { opacity:1; }
}
#gnav1 li a { display:block; width:100%; height:100%; background-position:center center; background-repeat:no-repeat; background-size:auto 100%; text-indent:-9999px; transition: opacity 0.2s ease-out; }
#gnav1 li a:hover { opacity:0.5; }
#gnav1 li:nth-child(1) a { background-image:url(../img/common/gnav_top.png); border-radius:10px 0 0 0; }
#gnav1 li:nth-child(2) a { background-image:url(../img/common/gnav_minogashi.png); }
#gnav1 li:nth-child(3) a { background-image:url(../img/common/gnav_archive.png); }
#gnav1 li:nth-child(4) a { background-image:url(../img/common/gnav_boshu.png); border-radius:0 10px 0 0; }
#gnav1 li:nth-child(1)::after,
#gnav1 li:nth-child(2)::after { position:absolute; display:block; top:30%; right:0; z-index:2; width:1px; height:40%; content:""; background-color:#e2e2e3; }
#gnav2 { padding:0 16px; background-color:#efefef; border-radius:0 0 10px 10px; /* for space */ font-size:0; }
#gnav2 li { display:inline-block; vertical-align:middle; /* for space */ font-size:1rem; }
#gnav2 li a { display:inline-block; margin:16px 8px; padding:0.5em 1.0em 0.5em 0.5em; border-radius:1.0em; background-color:#fff; color:#6d504f; font-weight:bold; text-decoration:none; box-shadow:0px 0px 4px rgba(0,0,0,0.1); transition: opacity 0.2s ease-out; }
#gnav2 li a:hover { opacity:0.5; }
#gnav2 li a::before { display:inline-block; vertical-align:bottom; content:""; width:1.0em; height:1.0em; background:url(../img/common/arrow.png) center center no-repeat; background-size:55%; }

/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

#header { margin-bottom:0; height:auto; background:none; }

#logo { position:relative; width:100%; height:0; padding-top:61.333%; }
#logo a { position:absolute; display:block; left:0; top:0; width:100%; height:100%; background-image:url(../img/common/logo2022_3_smp.jpg); }

#gnav-area { margin-bottom:5%; }

#gnav1 { background-color:#fff; border-radius:0; /* for space */ font-size:0; }
#gnav1 li { position:relative; width:50%!important; height:0; padding-top:13.29787234%; }
#gnav1 li a { position:absolute; left:0; top:0; width:100%; height:100%; background-size:auto 120%; }
#gnav1 li:nth-child(4) { border-radius:0 0 0 0; }
#gnav1 li:nth-child(2)::after { display:none; }
#gnav1 li:nth-child(3)::before { position:absolute; display:block; top:0; left:10%; z-index:2; width:80%; height:1px; content:""; background-color:#e2e2e3; }

#gnav2 { padding:2.8vw 0; border-radius:0; }
#gnav2 li { font-size:3.6vw; padding:0.8vw 1.2vw; }
#gnav2 li a { margin:0; padding:0; border-radius:0; background-color:transparent; box-shadow:none; }


}

/*  Footer
=============================================== */


#official-sns { width:660px; margin:0 auto 40px auto; text-align:center; }
#official-sns:after {content:"";clear:both;display:block;}

#official-sns .ttl { display:block; width:288px; height:40px; margin:0 auto 30px auto; background:url(../img/common/sns_ttl.png) center center no-repeat; background-size:cover; text-indent:-9999px; }

#sns-tw,
#sns-fb { float:left; width:300px; margin:0 15px; }

#bn-rectangle { width:300px; margin:0 auto; }

#f-copy { padding:15px; font-size:85%; line-height:130%; text-align:center; font-family:'Lato', sans-serif; letter-spacing:0.05em; }
#f-copy a:hover { text-decoration:none; }


/* ---- Media Queries ---- */

@media all and (max-width: 767px) {

#official-sns { width:auto; margin:0 auto 5% auto; }

#official-sns .ttl { width:216px; height:30px; margin:0 auto 3% auto; }

#sns-tw { float:none; margin:0 auto 20px auto; }
#sns-fb { float:none; margin:0 auto; }

#f-copy { font-size:75%; }

}


/*eof*/