html
{
    -webkit-text-size-adjust:100%;
}

body{
    padding: 0;
    margin: 0;
    line-height: 1.5;
    font-size: 90%;
}

img{
    border: none;
    max-width: 100%;
    height: auto !important;
}

.aligncenter{
    display: block;
    margin: auto;
    text-align: center;
}
.alignright{
    display: block;
    margin:0 0 0 auto;
    text-align: right;
}
.alignleft{
    display: block;
    margin:0 auto 0 0 ;
    text-align: left;
}

a{
    text-decoration: none;
}

@media screen and (min-width: 700px) {
    a:hover{
        opacity: 0.5;
    }
}

h1{
    
    text-align: center;
   transform: rotate(0.05deg);
      font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
h1 span{
    display: inline-block;
  
}
h2{
    font-size: 160%;
    margin: 1.5em auto 1em auto;
    padding:0;
  
    max-width: 800px;
    box-sizing: border-box;
    line-height: 1.5;
      transform: rotate(0.05deg);
    font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
h2 span{
    display: inline-block;
}

h3{
    font-size: 120%;
      transform: rotate(0.05deg);
    font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

h3 span{
    display: inline-block;
}

small{
  color:#999;
  font-size:80%;
}
p{
    line-height: 2;
    text-align: justify;
    text-justify: distribute;
    margin: 2em 0;
}

hr {
    border-style: none;
    border-bottom-style: solid;
    border-width: 2px;
    margin: 2em 0;
}

p.discription{
    text-align: center;
    text-justify: none;
}

p span{
    display: inline-block;
}

ol{
    margin: 3em 0;
}
ol ul{
    margin: 3em 0;
}
.buttonbase{
    padding: 2em 0;
    margin: 1em 0;
    text-align: center;
}

button{
    font-size: 120%;
    border: none;
    background-color: #898989;
    color:#fff;
    padding: 0 1em 0 1.5em;
    margin: 0 0.5em;
    line-height: 2;
    letter-spacing: 0.5em;
}

button:hover{
    opacity:0.5;
}

.button{
    
    display: inline-block;
    font-size: 120%;
    border: none;
    background-color: #898989;
    color:#fff;
    padding: 0 1em 0 1.5em;
    margin: 0 0.5em;
    line-height: 2;
    letter-spacing: 0.5em;
}
.button:hover{
    opacity:0.5;
}

.button:disabled{
    opacity:0.3;
}

.siteopen {
  padding: 0.8em 5% 0.8em 5%;
  line-height: 1.4;
  letter-spacing: 0.2em;
}
.siteopen::before {
  margin: 0 0.3em 0 0;
  vertical-align: middle;
}


.emphasis{
    padding: 0 2em 0 2.5em;
    line-height: 3;
    letter-spacing: 0.5em;
}



section{
    padding: 1em 0 2em 0;
    margin: auto;
    width:96%;
    max-width: 800px;
    overflow:hidden;
   
}


#items section{
    width:auto;    
}




iframe{
	max-width:100%;
}



/*---------- ナビゲーション ---------------*/
#header{
    min-height: 50px;
    overflow: hidden;
}

#menu{
    /*position: fixed;*/
    z-index: 100;
    left: 0;
    top: 0;
    right:0;
    padding: 0 0;
    background-color: #fff;
    background-color: rgba(255,255,255,0.8);
    overflow: hidden;
    min-height:50px;
}



#menu .sitelogo{
    padding: 5px 0 0 0;
    margin: 0 0 0 5px;
    font-size: 40px;
    line-height: 1;
    float:left;
}


#menu .sitelogo a{
    color:#064583;
    text-decoration: none;
}

#menu div{
    display: inline;    
}

#menu ul{
    list-style: none;
    display: inline;
    float:right;
    padding:0.6em 0 0 0;
    margin: 0;
    font-weight: bold;
}

#menu li{
    list-style: none;
    display: inline;
    padding: 0;
    margin: 0;
}

#menu  ul a{
    list-style: none;
    display: inline-block;
    padding: 0.2em 0.2em;
    line-height: 1.8;
    margin: 0 0.5em 0 0;
    color:#064583;
    text-decoration: none;
    vertical-align: middle;
}
#menu ul a span:before {
  margin: 0 0.2em 0 0;
}

#menu li a i{
    margin: 0 0.2em 0 0;
    color:#064583;
    vertical-align: middle;
}



#menu #menuicon{
    display: none;
    background: none;
    border: 0;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    float:right;
    list-style: none;
    padding: 0.2em 0.2em;
    line-height: 1.8;
    margin: 0 0.5em;
    color:#064583;
    text-decoration: none;
    vertical-align: middle;
    font-size: 120%;
}

#menu .menu-global-container{
    display: block;
    margin: 0 0 0 180px;
}

#main{
    margin: auto;
  /*  max-width: 1200px;*/
}




#footer{
    margin: 4em 0 0 0;
   background-color: #064583;
   text-align: center; 
   color:#fff;
   padding:0;
   overflow:hidden;
}

#footer .tagline{
    margin: 0.8em auto 0.8em auto;
    padding: 0;
    line-height: 1.5;
    font-size: 110%;
    font-weight: bold;
    text-align: center;
    max-width: 800px;
    box-sizing: border-box;
    transform: rotate(0.05deg);
    font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

#footer a.contact{
   background-color: #fff;

    margin: 0 0.5em 1em 0;
    color:#064583;
    text-decoration: none;
    vertical-align: middle;
    
    display: inline-block;
    font-size: 120%;
    border: none;
    padding: 0 1em 0 1.5em;
    line-height: 2;
    letter-spacing: 0.2em;

    
     transform: rotate(0.05deg);

}







#footer .contents{
    background-color: #898989;
}

#footer .content{
    margin: 1em 0 0 0;
	 padding: 0 0 1em 0;
    border-bottom: 2px solid #aaa;
    text-align: center;
    overflow: hidden;
}
#footer .content  .info{
    margin: 0.5em 0;
}
#footer .content  .info a{
    color:#ccc;
}
#footer .content  .googleinfo{
    font-size:80%;
}


#footer ul{
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 0;
}
#footer li{
    list-style: none;
    display: inline;
    margin: 0;
    padding: 0;
    text-align: left;
}
#footernavi {
    font-size: 90%;
    padding: 1em 0;
}


#footernavi a span:before {
  margin: 0 0.3em 0 0;
  vertical-align: middle;
}


#footernavi li{
    float:left;
}

#footernavi li a{
    background-color: #fff;
    border: 1px solid #064583;
    display:block;
    padding: 0 0.3em;
    line-height: 1.8;
    margin: 0;
    color:#064583;
    font-weight: bold;
    box-sizing: border-box;
    min-width: 7em;
}

#footernavi li ul{
    display: block;
    margin: 0.5em;
}

#footernavi li li{
    float:none;
    display: block;
}

#footernavi li li a{
    
    background-color: transparent;
    border: none;
    display:inline;
    padding: 0;
    line-height: 1.8;
    margin: 0;
    color:#fff;
    font-weight: normal;

}







#footer .footernavi{
    margin: 1em 0;
}

#footer .footernavi ul{
    list-style: none;
    display: block;
    text-align: center;
    margin: 0;
    padding: 0;
}
#footer .footernavi ul li{
    display: inline;
    list-style: none;
    text-align: center;
    margin: 0 0.5em;
    padding: 0;
}
#footer .footernavi ul li a{
    display: inline-block;
      color:#fff;
}

#footer .footernavi ul li a:before{
    content:'>';
    margin: 0 0.2em 0 0;
}



#footer .sitemap{
    display:none;
}


.grecaptcha-badge { visibility: hidden; }


.lead{
}

.lead h2,
.lead h3{
    text-align: center;
}

.badge{
    float:left;
    padding: 0 0.5em 0 2em;
    display: inline-block;
    background-color: #fff;
    margin: 0.8em 0 0 0;
    font-weight: bold;
    font-family: serif;
    letter-spacing: 0.1em;

}

.label{
    display:block;
    margin: auto;

    font-weight: bold;
    font-family: serif;
    letter-spacing: 0.1em;

}


.hoption{
    display:block;
    margin: auto;

    font-weight: bold;
    font-family: serif;
    letter-spacing: 0.1em;

}


.header{
    position: relative;
    display: block;
    overflow: hidden;
    margin: auto;
    font-size: 140%;
    text-decoration: none;
}

.header a{
    text-decoration: none;
}


.header .logo{
    width:auto;
    height:auto;
    
    max-width: 90%;
    max-height:70%;
}


.header .content{
 /*   float:left;*/
    width:40%;
    display: block;
    text-align: center;
    padding: 1em 0;
}


.header .contentimage{
    display: block;
    position: absolute;
    left:40%;
    right:0;
    top:0;
    bottom:0;
    max-width: 1000px;
    margin: auto;
    background-color: #fff;
    background-size: cover;
    background-repeat: no-repeat;
  
  
}

.header .contentimage .logo{
    position: absolute;
    max-width:80%;
    max-height: 30%;
    width: auto;
    height:auto;
    right:2%;
    bottom:2%;
}

.banner{
    min-height: 120px;
    max-width: 740px;
    margin: 2em auto;
}

.banner .content{
    display: block;
    padding: 10px 0;
    width:40%;
}
.banner .badge{
    padding: 0.2em 0.4em 0.2em 1em;
    margin: 0 0 10px 0;
    font-size:100%;
    line-height: 1.1;
}

@media screen and (max-width: 700px) {
    .banner .badge{
        padding: 0.2em 0.2em 0.2em 0.2em;
        font-size:80%;
    }
    
    
    .header .content{
        width:auto;
    }
    
    .header .contentimage{
        position: static;
        max-width: none;
        padding-top:30%;
        text-align: center;
        
    }
    .header .contentimage .logo {
        position: static;
        max-width: 90%;
        max-height:120px;
        
    }

    
    
    
    
}


.banner .logo{
    clear: both;
    display: block;
    margin: auto;
    max-width: 90%;
    max-height:100px;
}

.banner .contentimage{
    display: block;
    position: absolute;
    left:40%;
    right:0;
    top:0;
    bottom:0;
}


#banner .content{
    position: relative;
    margin: 0;
    padding: 0 0 6% 0;
    width:50%;
    font-weight: normal;
    overflow: hidden;
    min-height: 8em;
}

#banner .title,
#banner h1{
	display:block;
    position: relative;
    clear: left;
	font-size:160%;
    margin: 0 0 0 0;
    padding: 6% 0 6% 0;
    width:100%;
    min-height: 1.5em;
    font-weight: normal;
    letter-spacing: 0.2em;
	    line-break: strict;
	text-align: center;
    transform: rotate(0.05deg);
    font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
#banner .logo{
    position: absolute;
    left:0;
    right:0;
    top:0;
    bottom:0;
    margin: auto;
    
}


#banner .contentimage{
   left:50%;
}

.simplepage #banner .content {
    padding: 0 0 1em 0;
    width: auto;
}

.simplepage #banner .hoption {
    clear: left;
    font-family: inherit;
    padding: 1em 0 0 0;
    margin: 0;
}

.simplepage #banner h1 {
    padding: 0 0 0.5em 0;
}

@media screen and (max-width: 700px) {
    #banner h1{
        font-size: 140%;
    }
   .banner .content{
        width:80%;
        
    }
    .banner .contentimage{
        left:80%;
    }
}



#topicpath{
    background-color: #c4c4c4;
    list-style: none;
    color:#fff;
    padding: 0.4em 1em;
    margin: 0;
    font-size: 95%;
    line-height: 1.2;
    overflow: hidden;
}


#topicpath ul{
    list-style: none;
    display: block;
    margin: 0;
    padding: 0;
}

#topicpath li{
    list-style: none;
    display: inline-block;
    margin: 0.1em;
    line-height: 1.3;
    padding: 0;
    
}

#topicpath li:after{
    content:'>';
    
    margin: 0 0 0 0.6em;
}
#topicpath li:last-child:after{
    content:'';
    
    margin: 0 0 0 0.6em;
}


#topicpath li a{
    color:#fff;
    text-decoration: none;
}

#topicpath li a:hover{
    color:#f30;
    text-decoration: none;
}

.pager{
   list-style: none;
    display: block;
   
    margin: 0;
    padding: 0.2em 1em;
    font-size: 90%;
    overflow: hidden;
    line-height: 2;
}
.pager li{
    list-style: none;
    display: inline-block;
    margin: 0 0.2em;
    padding: 0;
    
}
.pager .prev{
    float:left;
}
.pager .prev a:before{
    content: '<<<';
    margin: 0 0.5em 0 0;
}

.pager .next{
    float:right;
}
.pager .next a:after{
    content: '>>>';
    margin: 0 0 0 0.5em;
}
.pager a{
    color:#999;
    text-decoration: none;
}

.pager a:hover{
    color:#ED6B1A;
    text-decoration: none;
}

.navigation{
    overflow:hidden;
    margin: 1em 0;
}

.navigation .prev{
    float:left;
}
.navigation .next{
    float:right;
}


.body{
    
}

.body section{
    
    margin: 4em auto;
    padding:0;
}

.signature{
    padding: 0;
    margin: 3em 0;
   
    text-align: right;
}

.option{
    padding: 0;
    margin: 3em 0;
    overflow:   hidden;
    
}
 
.option ul{
    list-style: none;
    display: inline-block;
    text-align: left;
    padding: 0;
    margin: 10px;
    overflow: hidden;
}
.option li{
    list-style: none;
    display: block;
    margin: 0;
    padding: 0;
}

.option .name{
    font-size: 120%;
    margin: 0 0.5em;
}



.leader li.title{
    font-weight: bold;
}

 .leader li.name{
    font-size: 120%;
    font-weight: bold;
}
.leader li.info{
    margin-top:1em;
}


.leader{
    padding: 1em 0;
    margin: 0 0 3em 0;
    overflow:   hidden;
    
}
.leader figure{
    float:left;
    margin: 0;
}
 .leader img{
    float:left;
    margin: 10px;
}
 .leader ul{
    min-width: 16em;
    list-style: none;
    display: block;
    padding: 0;
    margin: 10px;
    overflow: hidden;
}
 .leader li{
    list-style: none;
    display: block;
    margin: 0;
    padding: 0;
}

.leader li.title{
    font-weight: bold;
}

.leader li.name{
    font-size: 120%;
    font-weight: bold;
}

.interview_banner{
	display:block;
	width:744px;
	max-width:100%;
	box-sizing:border-box;
	margin:auto;
	border:2px solid;
	position:relative;
}
.interview_banner img{
	display:block;
	margin:0;
	width:100%;
}
.interview_banner .comment{
	display:block;
	margin:2em;
}


.interview_banner .icon-dot{
	position:absolute;
	right:0.8em;
	bottom:0.8em;	
}
.interview_banner:hover{
	background-color:#f8f8f8;
}

.interview_banner:hover img{
	opacity:0.9;
}

.imagewrapper{
  	position: relative;
    display: block;
    overflow: hidden;
    text-align: center;
    max-width: 1600px;
    margin:4% auto;
}
.imagewrapper p{
    padding:0;
    margin: 0;
    display: block;
    overflow: hidden;
    text-align: center;
}

.imagewrapper .catchcopy{
  font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;

  font-size: 120%;
   background-color:#fff;
   padding:1em;
   position:absolute;
   margin:0;
   top:50%;
   right:48%;
  white-space:nowrap;
  font-weight:bold;
  text-align:left;
  transform: rotate(0.05deg);
}


.imagewrapperoverinner{
    min-width:125%;
    margin: 0 -12.5%;
}
.imagewrapperoverinner img{
    min-width:80%;
}
.imagewrapper .logo{
    
    max-width: 90%;
    max-height: 300px;
}
.imagewrapper .iblock{
  	position:relative;
    display:inline-block;
    
}
.imagewrapper small{
    position:absolute;
  right:0;
  bottom:0;
    
}
@media screen and (max-width: 700px) {
  .imagewrapper .catchcopy{
  	font-size: 100%;
    padding:0.5em 1em;
  }
}
@media screen and (max-width: 480px) {
  .imagewrapperoverinner{
        min-width:150%;
        margin: 0 -25%;
  }
  .imagewrapper .catchcopy{
    position:relative;
  	font-size: 100%;
  	margin:-0.5em 0 0 0 !important;
    color:#fff;
    left:auto !important;
    right:auto !important;
    top:auto !important;
    bottom:auto !important;
  }
  
}

.related{
    overflow: hidden;
    padding: 0;
    margin: 3em 0;
}

.related ul{
    float:right;
    display: inline;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: right;
}

.related li{ 
    list-style: none;
    display: block;
    padding: 0;
}
.related li a{ 
   line-height: 2;
    padding: 0;
    margin: 0;
    text-decoration: none;
}
.related li i{ 
    padding: 0 0 0 0.5em;
}




.others{
    padding: 0;
    margin: 6em auto;
    max-width: 700px;
    
}

.others ul{
    display: block;
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    overflow:hidden;
}

.others li{ 
    list-style: none;
    display: inline;
    width:32%;
    float:left;
    padding: 0;
    margin: 0 0 1% 1%;
    box-sizing: border-box;
}
.others li a{ 
    display: block;
    padding: 0;
    margin: 0;
}

.others img{ 
    max-width: 100%;
}

.accordion{
    margin: 1em 0;
    padding: 0;
       
}

.accordion > dt{
    cursor: pointer;
}


.accordion > dt .accordionicon {
    position: absolute;
    right: 1em;
    top: 0;
    bottom: 0;
    height: 1em;
    line-height: 1;
    margin: auto;
}

.accordion > dt .icon-slidedown {
    display: block;
}
.accordion > dt .icon-slideup {
    display: none;
}

.accordionopen > dt .icon-slidedown {
    display: none;
}
.accordionopen > dt .icon-slideup {
    display: block;
}
  


@media screen and (min-width: 700px) {
   .accordion > dt:hover{

        opacity: 0.5;
    }

  
}

.js .accordion > dd{
    display: none;
}







.marks{
    clear:left;
    list-style: none;
    margin: 1em 0;
    padding: 0;
}
.marks li{
    list-style: none;
    display: inline-block;
    margin: 0;
    padding: 1em;
    width:49%;
    box-sizing: border-box;
    vertical-align: top;
  
}

.marks li > a.inpagenav{
    display: block;
    margin: 0 0 0.5em 0;
    padding: 0;
    font-size: 120%;
    font-weight: bold;
    transform: rotate(0.05deg);
    font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.marks li img{
    margin:0 auto 0.3em auto;
    display: block;
}
.marks li p{
    margin: auto;
    display: inline-block;
    text-align: left;
    line-height: 1.5;
}

.marks li dl{
    margin: 0;
    padding: 0;
      text-align: center;
}

.marks li dt{
    font-size: 120%;
    display: block;
    margin: 0 0 0.5em 0;
    padding: 0;
    font-weight: bold;
   transform: rotate(0.05deg);
    font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.marks li dd{
    display: block;
    padding: 0;
    margin: 0;
    text-align: center;
    color:#000;
    text-align: left;
}

.columns2{
    clear:left;
    list-style: none;
    margin: 1em 0;
    padding: 0;
	display:flex;
}
.reverse{
	flex-direction:row-reverse;	
}

.columns2 li{
	box-sizing:border-box;
	width:50%;
	margin:0 1em;	
}


.columns3{
    clear:left;
    list-style: none;
    margin: 1em 0;
    padding: 0;
	display:flex;
}

.columns3 li{
	box-sizing:border-box;
	width:33%;
	margin:0 1em;	
}
.columnsreverse{
	flex-direction:row-reverse;	
}
.simplemarks li dd{
    text-align: center;
}
.tabnav ul{
    list-style: none;
    overflow: hidden;
    text-align: center;
    padding: 0;
    margin: 2em 0 1em 0;
    border-bottom: 1px solid;
    font-size: 120%;
}
.tabnav li{
    padding: 0;
    margin: 0;
    list-style: none;
    display: inline;
    text-align: center;
}

.tabnav li a{
    
    list-style: none;
    display: inline-block;
    line-height: 1.2;
    padding: 0.5em 1em;
    margin: 0 0.5% -1px 0.5%;
    box-sizing: border-box;
    border: 1px solid;
    min-width: 40%;
}

.tabnav4 li a{
    margin: 0 0.1% -1px 0.1%;
    min-width: 18%;
}

.tabtitle{
    font-size: 200%;
    text-align: center;
    font-weight: bold;
    margin: 1em 0;
   
}

@media screen and (max-width: 700px) {

    .tabnav4 ul{
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        font-size: 100%;
    }
    .tabnav4 li a{
        min-width: 0;
        padding: 0.5em 0.5em;
    }
    
}

.document{
	max-width:45em;
}


/*

ol.doc{
	line-height:1.5;
	margin:1em 0;
	padding:0;
}

ol.doc > li{
	margin:1em 0;
}



.doc > li{
    margin: 0 0 2em 0;
}

.doc > li il , 
.doc > li ol { 
    margin: 1em 0 1em 0;
}

.doc > li ul >li,
.doc > li ol >li{ 
    margin: 0 0 1em 0;
}
*/


.doc{
  line-height: 1.5;
}

.doc li{
  line-height: 1.5;
  margin: 1em 0;
}
.doc .str{
    font-size: 110%;
    font-weight: bold;
    color:#064583;
	line-height:1.3;
}

.doc p{
    margin: 1em 0 1em 0;
}

ol.doc {
  counter-reset: my-counter;
  list-style: none;
  padding: 0;
  margin: 1em 0;
}
ol.doc > li {
  margin: 1em 0 3em 0;
  padding:0 0 0 3em;
  position: relative;
}
ol.doc > li::before {
  font-size:100%;
  font-weight:bold;
  color:#064583;
  content: counter(my-counter) ".";
  counter-increment: my-counter;
  box-sizing: border-box;
  display: flex;
  justify-content: right;
  white-space:nowrap;
  width: 2em;
  line-height: 1.5;
  position: absolute;
  top: 0;
  left: 0;
}

.doc ul {
  list-style: none;
  padding: 0;
  margin: 1em 0 2em 0;
}

.doc ul > li {
  line-height: 1.5;
  margin: 1em 0;
  padding:0 0 0 1.3em;
  position: relative;
}
.doc ul > li::before {
  background-color:#064583;
  content: '';
  border-radius:50%;
  height: 0.3em;
  width: 0.3em;
  position: absolute;
  top: 0.6em;
  left: 0.3em;
}

ol.roundno {
  counter-reset: my-counter;
  list-style: none;
  padding: 0;
  margin: 0;
}
ol.roundno > li {
  line-height: 1.5;
  padding-left: 2em;
  position: relative;
}
ol.roundno > li::before {
font-size:85%;
  content: counter(my-counter);
  counter-increment: my-counter;
  border: 1px solid;
  border-radius: 50%;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 1.3em;
  width: 1.3em;
  line-height: 1.3;
  position: absolute;
  top: 0.2em;
  left: 0;
}





.category-news a:hover img{
    opacity:0.8;
}


#pagetop{
    position: fixed;
    background-color: #064583;
    color:#fff;
    
    width:4em;
    height:4em;
    text-align: center;
    line-height: 1.2em;
    padding: 0.9em 0 0 0;
    box-sizing: border-box;
    border-radius: 2em;
    text-decoration: none;
    right:1em;
    bottom:-5em;
}
@media print{
	#pagetop{
		display:none !important;
	}	
}





@media screen and (max-width: 700px) {
    #menu #menuicon{
        display: inline;
    }
    
    #menu .menu-global-container{
        display: block;
        margin: 0;
    }

    #menu ul{
        width:100%;
        margin: 0;
        padding: 0;
        
    }
    #menu li{
        display: block;
        background-color: rgba(255,255,255,0.8);
        overflow: hidden;
        height:0;
        visibility: hidden;
        transition: .2s ease-in-out;
        padding: 0;
        margin: 0;
    }
    #menu li a{
        display: block;
        border-top: 1px solid #ccc;
        height:3em;
        line-height: 3;
        box-sizing: border-box;
        margin: 0;
        padding: 0 0.5em;
    }
    
    #menu .showmenu{
        border-bottom: 1px solid #ccc;
    }
    
    #menu .showmenu li{
        height:3em;
        visibility: visible;
    }
    
    /*
    .header .content{
        width:55%;
    }
    .header .contentimage{
        left:55%;
    } */   
    /*
    #banner .content{
        width:70%;
    }
    #banner .contentimage{
        left:70%;
    } */   
    #banner .content{
        width:auto;
    }
    #banner .contentimage{
        display: none;
    }
    .others li{ 
        float:none;
        width:90%;
        display: block;
        margin: 0.5em auto;;
    }
    .others li a{ 
        display: block;
        margin:0 auto;
        
    }
    
    #footernavi li{
        width:50%;

    } 
    #footernavi li li{
        width:auto;

    } 
    
}




@media screen and (max-width: 700px) 
{
    
    #footernavi li{
        float:none;
        width:auto;
        display: block;
    } 

    
    .marks li{
        display: block;
        margin: auto;
        width:auto;
        text-align: left;
    }
    
    .marks li img{
        margin:0 0.5em 0 0;
        display: inline-block;
        height:2em;
        width:auto;
        vertical-align: middle;
    }
    .marks li dt{
        text-align: left;
		display: flex;
    align-items: center;
    }
	.marks li dt a{
        margin:0 0.5em 0 0;
    }
    
    .marks li dd{
        margin:0 0 0 2em;
        text-align: left;
    }

}

@media screen and (max-width:700px) 
{
	.columns2{
	    display:block;
    }

    .columns2 li{
	    width:auto;
    }
	.columns3{
	    display:block;
    }

    .columns3 li{
	    width:auto;
    }
}




.rowcolumn{
    display:flex;
    justify-content:center;
    align-items:center;
    flex-direction:row;
    margin:1em;
}

.is_sp{
    display:none;
}
.not_pc{
    display:block;
}

@media screen and (max-width:700px){

	.is_sp{
		display:block;
	}
	.not_pc{
		display:none;
	}


	.rowcolumn{
		flex-direction:column;
	}
}

.steplist{
	list-style:none;
	text-align:center;
	display:flex;
	align-items:center;
	justify-content: center;
	margin:4em auto;
	padding:0;
}
.steplist > li{
	position:relative;
	list-style:none;
	background-color:#ED6B1A;
	color:#fff;
	margin:0 0 0 2em;
	width:7em;
	height:7em;
	border-radius:3.5em;
	box-sizing:border-box;
	padding:0 1em;
	display:flex;
	line-height:1.2;
	align-items:center;
	text-align:center;
}
.steplist > li::after{
	position:absolute;
	left:-1.5em;
	top:3em;
	content:'';
	display:block;
	width:0;
	height:0;
	line-height:1;
	text-align:center;
	border-left:solid 1em #ccc;
	border-top:solid 0.7em transparent;
	border-bottom:solid 0.7em transparent;
	border-right:none;
	
}
.steplist > li:first-child{
	margin:0;
}
.steplist > li:first-child::after{
	display:none;
}
@media screen and (max-width:700px){
	.steplist {
		flex-direction:column;
		width:20em;
	}    
	.steplist > li{
		width:100%;
		height:auto;
		padding:0.8em;
		align-items:stretch;
		margin:2em 0 0 0;
		justify-content: center;
	}    
	.steplist > li::after{
		content:'';
		left:calc(50% - 0.7em);
		top:-1.5em;
		border-top:solid 1em #ccc;
	border-left:solid 0.7em transparent;
	border-right:solid 0.7em transparent;
	border-bottom:none;
	}
}






.project1{
    color: #ED6B1A;
}
.project1 a{
    color: #ED6B1A;
}

.project1 .frame p{
    color: #ED6B1A;
}

.project1 .header{
    color:#fff;
    background-color: #ED6B1A;
}
.project1 .badge{
    color: #ED6B1A;
}

.project1 .ball{
    background-color: #ED6B1A;
}

.project1 *{
    border-color: #ED6B1A;
}


.project1 .contentimage{
    background-image: url(./images/prj1_top.jpg);
    background-position: 35% 40%;
}
.project1  .fore{
 	color: #ED6B1A;
}
.project1  .fill{
    color:#fff;
    background-color: #ED6B1A;
}

.project1  .box{
    color:#fff;
    background-color: #ED6B1A;
   transform: rotate(0.05deg);
    font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.subproject1 > a{
    color:#fff !important;
    background-color: #ED6B1A !important;
   transform: rotate(0.05deg);
    font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.subproject1 ul{
       background-color: #ED6B1A;
   transform: rotate(0.05deg);
    font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.subproject1 ul a{
    color:#ED6B1A !important;
    background-color: #FFF !important;
}
.subproject1:after {
    border-color:#ED6B1A;
}

.project1 .switch .subproject1{
    display: none;
}

.project1 button,
.project1 .button{
    color:#fff;
    background-color: #ED6B1A;
}

@media screen and (max-width: 480px) 
{
  .project1 .reversecolor{
    	background-color: #ED6B1A;
    	color:#fff;
  } 
}




.project2{
    color:#82C872;
}
.project2  a{
    color: #82C872;
}

.project2  .frame p{
    color: #82C872;
}

.project2 .header{
    color:#fff;
    background-color: #82C872;
}
.project2 .badge{
    color: #82C872;
}

.project2 .ball{
    background-color: #82C872;
}

.project2 *{
    border-color: #82C872;
}


.project2 .contentimage{
    background-image: url(./images/prj2_top.jpg);
    background-position: 78% 36%;
}
.project2 .fore{
    color: #82C872;
}
.project2 .fill{
    color:#fff;
    background-color: #82C872;
}
.project2 .box{
    color:#fff;
    background-color: #82C872;
   transform: rotate(0.05deg);
    font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.subproject2 > a{
    color:#fff !important;
    background-color: #82C872 !important;
   transform: rotate(0.05deg);
    font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.subproject2 ul{
    background-color: #82C872;
   transform: rotate(0.05deg);
    font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}


.subproject2 ul a{
    color:#82C872 !important;
    background-color:#fff  !important;
}

.subproject2:after {
    border-color:#82C872;
}


.project2 .switch .subproject2{
    display: none;
}


.project2 button,
.project2 .button{
   color:#fff;
   background-color: #82C872;
}

@media screen and (max-width: 480px) 
{
  .project2 .reversecolor{
    	background-color: #82C872;
    	color:#fff;
  } 
}

.project3{
    color:#EF8FB9;
}
.project3  a{
    color: #EF8FB9;
}
.project3  .frame p{
    color: #EF8FB9;
}
.project3 .header{
    color:#fff;
    background-color:#EF8FB9;
}
.project3 .badge{
    color: #EF8FB9;
}

.project3 .ball{
    background-color: #EF8FB9;
}

.project3 *{
    border-color: #EF8FB9;
}



.project3 .contentimage{
   background-image: url(./images/prj3_top.jpg);
   background-position: 50% 50%;
}
.project3 .fore{
    color:#EF8FB9;
}
.project3 .fill{
    color:#fff;
    background-color:#EF8FB9;
}
.project3 .box{
    color:#fff;
    background-color:#EF8FB9;
   transform: rotate(0.05deg);
    font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.subproject3 > a{
    color:#fff !important;
    background-color:#EF8FB9 !important;
   transform: rotate(0.05deg);
    font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.subproject3 ul{
    background-color: #EF8FB9;
   transform: rotate(0.05deg);
    font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.subproject3 ul a{
    color:#EF8FB9 !important;
    background-color:#fff !important;
}
.subproject3:after {
    border-color:#EF8FB9;
}


.project3 .switch .subproject3{
    display: none;
}


.project3 button,
.project3 .button{
    color:#fff;
    background-color: #EF8FB9;
}



@media screen and (max-width: 480px) 
{
  .project3 .reversecolor{
    	background-color: #EF8FB9;
    	color:#fff;
  } 
}



.project4{
    color: #26BCEE;
}
.project4 a{
    color: #26BCEE;
}
.project4 .frame p{
    color: #26BCEE;
}
.project4 .header{
    color:#fff;
    background-color: #26BCEE;
}
.project4 .badge{
    color: #26BCEE;
}

.project4 .ball{
    background-color: #26BCEE;
}

.project4 *{
    border-color: #26BCEE;
}


.project4 .fore{
	color: #26BCEE;
}
.project4 .fill{
    color:#fff;
    background-color: #26BCEE;
}
.project4 .box{
    color:#fff;
    background-color: #26BCEE;
   transform: rotate(0.05deg);
    font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.subproject4 > a{
    color:#fff !important;
    background-color: #26BCEE !important;
   transform: rotate(0.05deg);
    font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.subproject4 ul{
    background-color: #26BCEE;
   transform: rotate(0.05deg);
    font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}

.subproject4 ul a{
    color:#26BCEE !important;
    background-color:#fff !important;
}
.subproject4:after {
    border-color: #26BCEE;
}


.project4 .switch .subproject4{
    display: none;
}


.project4 .contentimage{
    background-image: url(./images/prj4_top.jpg);
    background-position: 25% 50%;
}

.project4 button,
.project4 .button{
    color:#fff;
    background-color: #26BCEE;
}

@media screen and (max-width: 480px) 
{
  .project4 .reversecolor{
    	background-color: #26BCEE;
    	color:#fff;
  } 
}



.company{
    color: #333;
}

.company h2,.company h4,.company h3,.company dt{
    color: #064583;
}

.company a{
    color: #064583;
}

.company .header{
    color:#fff;
    background-color: #064583;
}

.company .header h2{
    color: #fff;
    font-weight: normal;
    letter-spacing: 0.2em;
 /*   font-family:'游明朝','Yu Mincho',YuMincho, serif;*/
    margin: 1em 0 0 0;
   
}

.company .badge{
    color: #064583;
}

.company .ball{
    background-color: #064583;
}

.company *{
    border-color: #064583;
}

.company .box{
    color:#fff;
    background-color:#064583;
}

.company #banner .contentimage{
    background-image: url(./images/company_top.jpg);
    background-position: 80% 50%;
}

.company button,
.company .button{
    color:#fff;
    background-color: #898989;
}


.header .ball{
    background-color: #fff;
}




.tablelist{
    border: 1px solid;
   
    border-collapse: collapse;   
    width: 100%;
}
.tablelist p{
    margin: 1em 0;
    line-height: 1.5;
    text-align: initial;
    text-justify: initial;
}
.tablelist th{
    border: 1px solid;
    min-width: 6em;
    padding: 1em 0;
}

.tablelist td{
    border: 1px solid;
    padding: 1em;
}


.tablelist dl{
    margin: 0.5em 0 1.5em 0;
}
.tablelist dl dt{
    padding: 0;
    margin: 0;
     transform: rotate(0.05deg);
      font-family: 游明朝, YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", HG明朝E, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.tablelist dl dd{
    padding: 0;
    margin: 0;
}

.tablelist .columntitle{
    display:none;
}



@media screen and (max-width: 700px) {
    .tablelist{
        border:none;
    }
    
    .tablelist,.tablelist tbody,.tablelist thead,.tablelist tr,.tablelist th,.tablelist td{
        display: block;        
    }
    .tablelist thead{
        display:none;
    }
    .tablelist .columntitle{
        display:block;
        margin: 1em 0 0 0;
        font-weight: bold;
    }
    .tablelist th{
        border: none;
        display: block;        
        border-bottom: 1px solid;
        text-align: left;
        padding: 1.5em 0 0.5em 0;
    }
    .tablelist td{
        border: none;
        display: block;        
    }
    
}


/*---------- アクセシビリティ対応 (JIS X 8341-3:2016 レベルA) ---------------*/

main{
    display: block;
}

/* 視覚的に非表示にしつつ支援技術には読ませるテキスト */
.visually-hidden{
    position: absolute !important;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    border: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* 本文へのスキップリンク: フォーカス時のみ表示 (2.4.1) */
.skip-link{
    position: absolute;
    left: 0;
    top: 0;
    z-index: 1000;
    transform: translateY(-200%);
    background-color: #064583;
    color: #fff;
    padding: 0.6em 1em;
    text-decoration: none;
}
.skip-link:focus{
    transform: none;
}

/* フォーカスの可視化 (2.4.7 は AA だが 1 行で済むため対応) */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible{
    outline: 2px solid #f30;
    outline-offset: 2px;
}

/* アコーディオン見出しをボタン化 (2.1.1 / 4.1.2) */
.accordion > dt .accordion-toggle{
    display: block;
    width: 100%;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    color: inherit;
    text-align: inherit;
    line-height: inherit;
    cursor: pointer;
}

/* アニメーション停止ボタン (2.2.2): 動きのあるページに JS で追加。目立たないよう小さく半透明にし、ホバー・フォーカス時だけはっきり表示する */
#motion-toggle{
    position: fixed;
    left: 1em;
    bottom: 1em;
    z-index: 1000;
    width: 2.2em;
    height: 2.2em;
    margin: 0;
    padding: 0;
    border: 1px solid #064583;
    border-radius: 50%;
    background-color: #fff;
    color: #064583;
    font-size: 12px;
    line-height: 2.2em;
    text-align: center;
    cursor: pointer;
    opacity: 0.45;
    transition: opacity 0.2s;
}
#motion-toggle:hover,
#motion-toggle:focus{
    opacity: 1;
}
#motion-toggle .motion-toggle-icon{
    display: inline-block;
    font-size: 9px;
    letter-spacing: -1px;
    vertical-align: middle;
}
#motion-toggle.is-paused .motion-toggle-icon{
    font-size: 11px;
    letter-spacing: 0;
    padding-left: 2px;
}
@media print{
    #motion-toggle{
        display: none !important;
    }
}

@media (prefers-reduced-motion: reduce){
    #pagetop{
        transition: none;
    }
}