@charset "UTF-8";
/****************************************
Resetting
*****************************************/
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 {
    margin: 0;
    padding: 0;
    vertical-align: baseline;
    color: #555555;
    background-image: url(url);
}

/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, main,hgroup, menu, nav, section {
	display: block;
}




.att01{
    width: auto;
    margin-left: 0px;
    float: right;
    font-size: 80%;
    clear: left;
}
.att02{
    width: 100%;
    margin-left: 0px;
    float: left;
    font-size: 80%;
    clear: left;
    margin-bottom: 25px;
    margin-top: -10px;
}

 /* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　ヘッダーエリアここから　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
 /* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　ヘッダーエリアここから　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
 /* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　ヘッダーエリアここから　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

.header {
	width: 100%;
	float: left;
	background-color: #EEEEEE;
	position: fixed;
	z-index: 0;
	height: 80px;
    border: 1% solid #000000;
}

 /* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　ヘッダーエリア　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

@media only screen and (max-width:420px) {
#headerArea {
    position: fixed !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 65px;
    z-index: 3;
    background-color: #FFFFFF;
    border-bottom: 1px solid #CCCCCC;
} 
#header-top{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    border-width: 0px;
}
#logo01{
    width: 280px;
    height: auto;
    position: fixed;
    float: left;
    text-align: left;
    font-size: 85%;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    line-height: 35px;
    color: #333333;
    letter-spacing: 0.15em;
}
#logo01 a:hover{
    color: #333333;
}
#logo02{
    width: 280px;
    height: auto;
    position: fixed;
    float: left;
    text-align: left;
    font-size: 160%;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    color: #333333;
    clear: left;
    margin-top: 23px;
    letter-spacing: 0.05em;
}
#logo02 a:hover{
    color: #333333;
}
}

@media only screen and (min-width:420px)  and (max-width:650px){
#headerArea {
    position: fixed !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 65px;
    z-index: 3;
    background-color: #FFFFFF;
    border-bottom: 1px solid #CCCCCC;
} 
#header-top{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
    border-width: 0px;
}
#logo01{
    width: 280px;
    height: auto;
    position: fixed;
    float: left;
    text-align: left;
    font-size: 85%;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    line-height: 35px;
    color: #333333;
    letter-spacing: 0.15em;
}
#logo01 a:hover{
    color: #333333;
}
#logo02{
    width: 280px;
    height: auto;
    position: fixed;
    float: left;
    text-align: left;
    font-size: 160%;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    color: #333333;
    clear: left;
    margin-top: 23px;
    letter-spacing: 0.05em;
}
#logo02 a:hover{
    color: #333333;
}
}

@media only screen and (min-width:651px)  and (max-width:850px){
#headerArea {
    position: fixed !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    z-index: 1;
    background-color: #FFFFFF;
    border-bottom: 1px solid #CCCCCC;
} 
#header-top{
    width: 90%;
    margin-left: auto;
    margin-right: auto;
}
#logo01{
    width: 280px;
    height: auto;
    position: fixed;
    float: left;
    text-align: left;
    font-size: 105%;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    line-height: 35px;
    margin-top: 4px;
    color: #333333;
    letter-spacing: 0.15em;
}
#logo01 a:hover{
    color: #333333;
}
#logo02{
    width: 280px;
    height: auto;
    position: fixed;
    float: left;
    text-align: left;
    font-size: 200%;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    color: #333333;
    clear: left;
    margin-top: 29px;
    letter-spacing: 0.05em;
}
#logo02 a:hover{
    color: #333333;
}
}

@media only screen and (min-width:851px)  and (max-width:1200px){
#headerArea {
    position: fixed !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 120px;
    z-index: 1;
    background-color: #FFFFFF;
    border-bottom: 1px solid #CCCCCC;
} 
#header-top{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
#logo01{
    width: 280px;
    height: auto;
    position: fixed;
    float: left;
    text-align: left;
    font-size: 105%;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    line-height: 35px;
    margin-top: 4px;
    color: #333333;
    letter-spacing: 0.15em;
}
#logo01 a:hover{
    color: #333333;
}
#logo02{
    width: 280px;
    height: auto;
    position: fixed;
    float: left;
    text-align: left;
    font-size: 200%;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    color: #333333;
    clear: left;
    margin-top: 29px;
    letter-spacing: 0.05em;
}
#logo02 a:hover{
    color: #333333;
}
}


@media only screen and (min-width:1201px) {
#headerArea {
    position: fixed !important;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    z-index: 2;
    background-color: #FFFFFF;
    border-bottom: 1px solid #CCCCCC;
} 
#header-top{
    width: 80%;
    margin-left: auto;
    margin-right: auto;
}
#logo01{
    width: 280px;
    height: auto;
    position: fixed;
    float: left;
    text-align: left;
    font-size: 105%;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    line-height: 35px;
    margin-top: 4px;
    color: #333333;
    letter-spacing: 0.15em;
}
#logo01 a:hover{
    color: #333333;
}
#logo02{
    width: 280px;
    height: auto;
    position: fixed;
    float: left;
    text-align: left;
    font-size: 200%;
    font-family: "Times New Roman", Times, serif;
    font-weight: bold;
    color: #333333;
    clear: left;
    margin-top: 29px;
    letter-spacing: 0.05em;
}
#logo02 a:hover{
    color: #333333;
}
}



/* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　ヘッダー上メニュー　＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

@media only screen and (max-width:651px){
#h_menu	{
	display: none;
}
}

@media only screen and (min-width:651px)  and (max-width:1200px){
#h_menu	{
    width: auto;
    float: right;
    text-align: right;
    font-size: 85%;
    letter-spacing: 0.5px;
    font-family: 'Josefin Sans', sans-serif;
}
}

@media only screen and (min-width:1201px) {
#h_menu	{
    width: auto;
    float: right;
    text-align: right;
    font-size: 85%;
    letter-spacing: 0.5px;
    margin-right: -3px;
    font-family: 'Josefin Sans', sans-serif;
}
}

#h_menu a	{
	color: #000;
	border-right: solid 1px #AAA;
	padding-right: 6px;
	margin-right: 3px;
	text-decoration: none;
}

#h_menu ul	{
	margin-top: 5px;
	margin-right: 0;
	margin-left: 0;
	margin-bottom: 15px;
	padding: 3px 0 0;
}

#h_menu li	{
	display: inline;
	list-style-type: none;
}


#h_menu a:hover {
	color: #D90000;
	text-decoration: none;
}


#h_menu li:last-child a	{
	border: none;
}

#h_menu li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li + li a	{
	border: none;
}








h1{
    font-size: 150%;
    color: #555555;
    padding-bottom: 5px;
    width: 100%;
    float: left;
    text-align: left;
    position: absolute;
}
h2{
    font-size: 120%;
    color: #555555;
    margin-bottom: 10px;
    float: left;
    width: 100%;
}
h3{
    font-size: 100%;
    margin-top: 20px;
    color: #555555;
}

html {
	-webkit-font-smoothing: antialiased;
}


body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    width: 100%;
    height: 200%;
    float: left;
    font-size: 100%;
    color: #555555;
}

main {
    width: 100%;
    float: left;
    margin-top: -100px;
}

a:link {
	color: #555555;
	text-decoration: none; /* 非常に特殊な表示方法でリンクをスタイル付けする場合を除き、一目で見分けられるように下線を指定することをお勧めします。 */
	transition: 0.4s ;
}
a:visited {
	color: #555555;
	text-decoration: underline;
}

a:hover, a:active, a:focus { /* このセレクターグループは、キーボードを使用するユーザーに対し、マウスを使用するユーザーと同じホバー効果を提供します。 */
    color: #D90000;
    text-decoration: none;
}

.gotop {
    width: 80px;
    opacity: 1;
    clear: right;
    float: right;
}	

#pagetop {
	position: fixed;
	bottom: 50px;
	width: 80px;
	overflow: auto;
	z-index: 10;
	height: 57px;
	text-align: center;
	float: right;
}


.contents_top{
    width: 100%;
    float: left;
    z-index: 1;
}


 /* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　タイトル・サブタイトル・リード ここまで ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
 /* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　タイトル・サブタイトル・リード ここまで ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
 /* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　タイトル・サブタイトル・リード ここまで ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */

@media only screen and (max-width:420px) {
.tit {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 500%;
    float: left;
    color: #DDDDDD;
    margin-right: 12%;
    width: 100%;
    font-weight: 400;
    text-align: center;
    line-height: 55px;
}
.tit_s {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 500%;
    float: left;
    color: #DDDDDD;
    margin-right: 12%;
    width: 100%;
    font-weight: 400;
    text-align: center;
    line-height: 55px;
}
.tit_acs {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 500%;
    float: left;
    color: #DDDDDD;
    margin-right: 12%;
    width: 100%;
    font-weight: 400;
    text-align: center;
    line-height: 55px;
}
.font_space {
	letter-spacing: -0.18em;
    color: #DDDDDD;	
}
.tit_access {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 500%;
    float: left;
    color: #DDDDDD;
    margin-right: 12%;
    width: 100%;
    font-weight: 400;
    text-align: center;
    line-height: 55px;
}
.tit_news {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 500%;
    float: left;
    color: #DDDDDD;
    margin-right: 12%;
    width: 100%;
    font-weight: 400;
    text-align: center;
    line-height: 55px;
}
.subtit {
    font-family: 'Noto Serif JP', serif;
    font-size: 150%;
    float: left;
    color: #555555;
    width: 100%;
    margin-top: -20px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
}
.lead {
    font-size: 110%;
    margin-top: 0px;
    width: 100%;
    float: left;
    letter-spacing: 0.05em;
    margin-bottom: 120px;
}
}



@media only screen and (min-width:420px)  and (max-width:650px){
.tit {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 600%;
    float: left;
    color: #DDDDDD;
    margin-right: 12%;
    width: 100%;
    font-weight: 400;
    text-align: center;
    line-height: 80px;
}
.tit_s {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 600%;
    float: left;
    color: #DDDDDD;
    margin-right: 12%;
    width: 100%;
    font-weight: 400;
    text-align: center;
    line-height: 80px;
}
.tit_acs {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 600%;
    float: left;
    color: #DDDDDD;
    margin-right: 12%;
    width: 100%;
    font-weight: 400;
    text-align: center;
    line-height: 80px;
}
.font_space {
	letter-spacing: -0.18em;
    color: #DDDDDD;	
}
.tit_access {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 600%;
    float: left;
    color: #DDDDDD;
    margin-right: 12%;
    width: 100%;
    font-weight: 400;
    text-align: center;
    line-height: 80px;
}
.tit_news {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 600%;
    float: left;
    color: #DDDDDD;
    width: 100%;
    font-weight: 400;
    text-align: center;
    line-height: 80px;
}
.subtit {
    font-family: 'Noto Serif JP', serif;
    font-size: 160%;
    float: left;
    color: #555555;
    width: 100%;
    margin-top: -20px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
}
.lead {
    font-size: 110%;
    margin-top: 0px;
    width: 100%;
    float: left;
    letter-spacing: 0.05em;
    margin-bottom: 120px;
    text-align: center;
}
}


@media only screen and (min-width:651px)  and (max-width:850px){
.tit {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 800%;
    float: left;
    color: #DDDDDD;
    margin-right: 12%;
    width: 100%;
    font-weight: 400;
    text-align: center;
    line-height: 110px;
}
.tit_s {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 800%;
    float: left;
    color: #DDDDDD;
    margin-right: 12%;
    width: 100%;
    font-weight: 400;
    text-align: center;
    line-height: 110px;
}
.tit_acs {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 800%;
    float: left;
    color: #DDDDDD;
    margin-right: 12%;
    width: 100%;
    font-weight: 400;
    text-align: center;
    line-height: 110px;
}
.font_space {
	letter-spacing: -0.18em;
    color: #DDDDDD;	
}
.tit_access {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 800%;
    float: left;
    color: #DDDDDD;
    margin-right: 12%;
    width: 100%;
    font-weight: 400;
    text-align: center;
    line-height: 110px;
}
.tit_news {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 800%;
    float: left;
    color: #DDDDDD;
    margin-right: 12%;
    width: 100%;
    font-weight: 400;
    text-align: center;
    line-height: 110px;
}
.subtit {
    font-family: 'Noto Serif JP', serif;
    font-size: 170%;
    float: left;
    color: #555555;
    width: 100%;
    margin-top: -20px;
    font-weight: 700;
    text-align: center;
    margin-bottom: 50px;
}
.lead {
    font-size: 110%;
    margin-top: 0px;
    width: 100%;
    float: left;
    letter-spacing: 0.05em;
    margin-bottom: 120px;
    text-align: center;
}
}


@media only screen and (min-width:851px)  and (max-width:1200px){
.tit {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 800%;
    float: left;
    color: #DDDDDD;
    width: 100%;
    font-weight: 400;
    text-align: center;
    line-height: 110px;
}
.tit_acs {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 800%;
    float: left;
    color: #DDDDDD;
    width: 100%;
    font-weight: 400;
    text-align: center;
    line-height: 110px;
}
.font_space {
	letter-spacing: -0.18em;
    color: #DDDDDD;	
}
.tit_access {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 800%;
    float: left;
    color: #DDDDDD;
    width: 100%;
    font-weight: 400;
    text-align: center;
    line-height: 110px;
}
.tit_news {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 800%;
    float: left;
    color: #DDDDDD;
    width: 100%;
    font-weight: 400;
    text-align: center;
    line-height: 110px;
}
.subtit {
    font-family: 'Noto Serif JP', serif;
    font-size: 180%;
    float: left;
    color: #555555;
    margin-bottom: 50px;
    width: 100%;
    margin-top: -20px;
    font-weight: 700;
}
.lead {
    font-size: 110%;
    margin-top: 0px;
    width: 100%;
    float: left;
    letter-spacing: 0.05em;
    margin-bottom: 120px;
    text-align: center;
}
}


@media only screen and (min-width:1201px)  and (max-width:1400px){
.tit {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 800%;
    writing-mode: vertical-rl;
    color: #EBEBEB;
    width: auto;
    height: 1100px;
    font-weight: 100;
    float: left;
    line-height: 120px;
}
.tit_acs {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 800%;
    writing-mode: vertical-rl;
    color: #EBEBEB;
    width: auto;
    height: 900px;
    font-weight: 100;
    float: left;
    line-height: 120px;
}
.font_space {
	letter-spacing: -0.15em;
    color: #EBEBEB;	
}
.tit_access {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 800%;
    writing-mode: vertical-rl;
    color: #EBEBEB;
    width: auto;
    height: auto;
    font-weight: 100;
    float: left;
    line-height: 120px;
}
.tit_news {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 800%;
    writing-mode: vertical-rl;
    color: #EBEBEB;
    width: auto;
    font-weight: 100;
    float: left;
    line-height: 120px;
    height: 500px;
}
.subtit {
    font-family: 'Noto Serif JP', serif;
    font-size: 200%;
    writing-mode: vertical-rl;
    width: auto;
    float: left;
    letter-spacing: 0.05em;
    margin-top: 15px;
    margin-left: -10px;
    font-weight: 700;
}
.lead {
    font-size: 110%;
    writing-mode: vertical-rl;
    margin-top: 15px;
    float: left;
    letter-spacing: 0.05em;
    margin-left: 15px;
}
}


@media only screen and (min-width:1401px) {
.tit {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 1000%;
    writing-mode: vertical-rl;
    color: #EBEBEB;
    width: auto;
    height: 1100px;
    font-weight: 100;
    float: left;
    line-height: 120px;
}
.tit_acs {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 950%;
    writing-mode: vertical-rl;
    color: #EBEBEB;
    width: auto;
    height: 970px;
    font-weight: 100;
    float: left;
    line-height: 120px;
}
.font_space {
	letter-spacing: -0.15em;
    color: #EBEBEB;	
}
.tit_access {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 1000%;
    writing-mode: vertical-rl;
    color: #EBEBEB;
    width: auto;
    font-weight: 100;
    float: left;
    line-height: 120px;
}
.tit_news {
    font-family: 'Nothing You Could Do', cursive;
    font-size: 1000%;
    writing-mode: vertical-rl;
    color: #EBEBEB;
    width: auto;
    font-weight: 100;
    float: left;
    line-height: 120px;
    height: 500px;
}
.subtit {
    font-family: 'Noto Serif JP', serif;
    font-size: 210%;
    writing-mode: vertical-rl;
    width: auto;
    float: left;
    letter-spacing: 0.05em;
    margin-top: 15px;
    margin-left: -20px;
    font-weight: 700;
}
.lead {
    font-size: 110%;
    writing-mode: vertical-rl;
    margin-top: 15px;
    float: left;
    letter-spacing: 0.05em;
    margin-left: 15px;
}
}


 /* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　タイトル・サブタイトル・リード ここまで ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
 /* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　タイトル・サブタイトル・リード ここまで ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */
 /* ＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝　タイトル・サブタイトル・リード ここまで ＝＝＝＝＝＝＝＝＝＝＝＝＝＝ */