@charset "utf-8";/* エスケープ */
/* ==========================================================================
  Reset Css
 ==========================================================================*/
*{-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;-ms-box-sizing: border-box;-o-box-sizing: border-box;}
html{font-size: 62.5%;height:100%;overflow-y:scroll;margin:0;padding:0;}
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
{font-size:100%;margin:0;padding:0;border:0;outline:0;list-style:none;vertical-align: baseline;background:transparent;font-weight:normal;font-style:normal;font-family:Verdana, Roboto, 'Droid Sans', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', sans-serif;-webkit-text-size-adjust: 100%;-moz-text-size-adjust: 100%;-ms-text-size-adjust: 100%;-o-text-size-adjust: 100%;text-size-adjust: 100%;/* スマホ　文字サイズ自動調整をきる */ }
body{line-height:1; word-wrap: break-word; overflow-wrap: break-word;}
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:none}
a{margin:0;padding:0;font-size:100%;vertical-align: baseline;background:transparent;-webkit-tap-highlight-color: rgba(0, 0, 0, 0);}
ins{background-color:#ff9;color:#000;text-decoration:none}
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}
hr{display:block;height:1px;border:0;border-top:1px solid #ccc;margin:1em 0;padding:0}
input,select,button,textarea{vertical-align:middle;font-family:Verdana, Roboto, 'Droid Sans', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic ProN', sans-serif;margin: 0; padding: 0; background: none;   border: none;border-radius: 0;  outline: none;  -webkit-appearance: none;   -moz-appearance: none;appearance: none;}
img {border:none;vertical-align:text-bottom;max-width: 100%;-ms-interpolation-mode: bicubic;}
.ie9 input[placeholder]{color:#5B5B5B;}
/* ==========================================================================
  Common Design
 ==========================================================================*/
 /*----------------------------------------------------
  ■リンク
----------------------------------------------------*/
a:link { color: #444;text-decoration:underline;}
a:visited { color: #444;text-decoration:underline;}
a:hover { color:#004b91;text-decoration:none;}

/*----------------------------------------------------
  ■loading
----------------------------------------------------*/
body {
  animation: fadeIn 2s ease 0s 1 normal;
  -webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
  0% {opacity: 0}
  100% {opacity: 1}
}

/*----------------------------------------------------
  ■Wrapper
----------------------------------------------------*/
body{color:#444444;}
#wrapper{font-size:1.4rem;line-height:150%; overflow: hidden;}
.magazinePage #wrapper{font-size:1.6rem;line-height:180%; overflow: hidden;}

/*sp*/
@media screen and (max-width:568px){
  #wrapper{ min-width: 320px;}
  .magazinePage #wrapper{font-size:1.4rem;line-height:150%;}
}

/*----------------------------------------------------
  ■HEADER
----------------------------------------------------*/
header {width: 100%; background: #2188dd; background-size: 100% auto;}
#Header {width:98%; max-width:1000px; font-size: 3.5rem; color: #004b91; height: 220px; display: flex; align-items: center; justify-content: center; margin: auto; position: relative;}

/*sp*/
@media screen and (max-width:568px){
  #Header { width:80%; font-size: 2.8rem; height: 180px;}
}

/*----------------------------------------------------
  ■Container
----------------------------------------------------*/
#Container{width:100%;margin:auto;}
#Container .inner{ 
  width:96%; max-width:900px; margin:-60px auto 70px auto; background: #fff;
  border-radius: 8px; padding: 30px; padding-bottom: 60px;
  box-shadow: 0px 2px 3px 0px rgba(0, 0, 0, 0.25);
}

#Container .inner .info-ttl { font-size: 2.5rem; text-align: center; padding: 40px 0;}
#Container .inner p { font-size: 1.6rem; line-height: 200%;}
#Container .inner p span { display: inline-block;}

 /*tb*/
@media screen and (max-width:568px){
  #Container .inner{ padding: 20px 15px; padding-bottom: 40px; margin:-50px auto 50px auto;}
  #Container .inner .info-ttl { font-size: 2.0rem; padding: 30px 0;}
  #Container .inner p { font-size: 1.4rem;}
  
}

/*----------------------------------------------------
  ■Footer
----------------------------------------------------*/
footer{padding-bottom:10px;width:100%; padding:50px 0px 40px 0px; border-top: 1px solid #b7b7b7;}
#Footer { width: 96%; max-width: 1000px; margin: auto; display:table;}
#Footer .FLeft { width: 400px; display:table-cell;} 
#Footer .Fright { width: calc(100% - 400px); text-align: right; display:table-cell; } 
#Footer .Fright .f-copy { font-size: 1.2rem; letter-spacing: -0.1px; font-family: "Arial";}

/*tb*/
@media screen and (max-width:786px){
  #Footer .FLeft { width: 240px;} 
  #Footer .Fright { width: calc(100% - 240px); text-align: right;}
  #Footer .Fright .f-copy { font-size: 1.1rem;}
}
/*sp*/
@media screen and (max-width:568px){
#Footer { display:block;}
#Footer .FLeft { width: 100%; margin: 0px; text-align: center; display:block;} 
#Footer .FLeft img { width: 240px;}
#Footer .Fright { width: calc(100% - 0px); margin-top: 15px; text-align: center; display:block;}
}

/*----------------------------------------------------
  ■PageTop
----------------------------------------------------*/
#pagetop{right: -80px;bottom:-80px;opacity:0;text-decoration:none;transition:0.3s;-moz-transition:0.3s;-webkit-transition:0.3s;-o-transition:0.3s;display: block;width: 50px;height: 50px;position: fixed;background-color: rgba(0, 75, 145, 0.65);text-align: center;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%; z-index: 10;}
#pagetop.fixed{bottom: 20px;right: 20px;opacity: 1;}
#pagetop:hover{background-color: rgba(0, 75, 145, 1);}
#pagetop{position: fixed;}
#pagetop:before,#pagetop:after{content:' ';position: absolute;background: #FFFFFF;height: 19px;width: 2px;top: 15px;display:block;}
#pagetop:before{left: 29px;-webkit-transform: rotate(-45deg);-moz-transform: rotate(-45deg);-o-transform: rotate(-45deg);transform: rotate(-45deg);-ms-transform: rotate(-45deg);}
#pagetop:after{left: 16px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-o-transform: rotate(45deg);transform: rotate(45deg);-ms-transform: rotate(45deg);}
