@charset "UTF-8";
/* --------------------------------------------------
 common
--------------------------------------------------- */
html{ width: 100%; font-size: 62.5%;}
body{
    min-width: 1000px;
    background: #fff;
    color: #000;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5rem;
    font-family: 'Noto Sans JP', sans-serif;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

img{ width: 100%; vertical-align: bottom;}
i{ display: block;}
a{ color: #000; text-decoration: none;}
a:hover{ color: #000; text-decoration: none;}


@keyframes zoomIn1 {
    0% { opacity: 0; transform: scale(0.5);}
    100% { opacity: 1; transform: scale(1);}
}
 body{ min-width: 0; font-size: 1.3rem;}
#mainArea{ 
     width: 100%;
}
.lead {
     width: 90%;
     text-align: left;
     font-size: 1.2rem;
     margin: 0 auto;
}
.pc{ display: none;}
.sp{ display: block;}
#footer__ {
   background: #9099a0;
    padding: 12% 0;
}
#footer__ a {
   color: #fff !important;
   text-align: center;
    display: block;
    font-size: 1.8rem;
    font-family: futura-pt, sans-serif;
    font-weight: 400;
}
/* --------------------------------------------------
 contents
--------------------------------------------------- */
#mainArea{
  letter-spacing: 0;
  line-height: 2;
  overflow: hidden;
  margin: 0 auto;
}
.lead {
   width: 90%;
    font-size: 1.3rem;
     margin: 10% auto 0;
    text-align: left;
}
section {
   margin: 5em 0em;
}
.style_li {
    width: 49.3%;
    display: inline-block;
    vertical-align: top;
}
.blc {
  display: block;
}
.in-blc{
  display: inline-block;
}
.left{
  width: 84%;
    font-size: 1.3rem;
    margin: 10% auto 10%;
    text-align: left;
}
.center{
  text-align: center;
}
.f-12 {
  font-size: 1.2rem;
}
.po-r {
   position: relative;
}
h3 {
    font-size: 1.7rem;
    font-family: noto-sans-cjk-jp, sans-serif;
    font-weight: 700;
    font-style: normal;
    line-height: 1.7;
}
h4 {
    font-size: 1.2rem;
    font-family: futura-pt, sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.5;
}
.f-n {
	font-family: noto-sans-cjk-jp, sans-serif;
    font-weight: 400;
    font-style: normal;
}

.box__ {
        width: 100%;
	margin: 0 auto;
        border: solid 2px #222;
}
.style_img {
	width: 84% !important;
    display: block;
    vertical-align: middle;
    margin: 8% auto;
}
.style_text {
	width: 82%;
        display: block;
	margin: 7% auto 0;
	vertical-align: middle;
}
.title_ {
    display: block;
	border: solid 2px #222;
	margin: 5%;
        padding: 31% 0 32%;
}
.title_tx1 {
    display: block;
    font-family: futura-pt, sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 2.0rem;
	text-align: center;
	line-height: 1.2;
}
.title_tx2 {
    display: block;
    font-family: futura-pt, sans-serif;
    font-weight: 700;
    font-style: normal;
	font-size: 2.0rem;
	text-align: center;
	line-height: 1.2;
}
.icon_p {
       position: absolute;
       width: 16%;
       top: 2%;
       right: 3%;
}
.modal-content {
       position: relative;
}
/*////archive////*/
.archive {
	display: flex;
}
.archive div {
	padding: 5%;
}
.border_ {
	border: solid 1px #222;
        margin: 5em auto;
}
.border2_ {
        border: solid 1px #222;
        margin: 2em auto 1em;
}
/*///*/
.item-img {
	width: 84%;
        margin: 9% auto 0%;
}
.text-area {
	width: 75%;
        margin: 21% auto 0;
}
.caption {
	font-size: 1.2rem;
}
.main-img {
	width: 100%;
	display: inline-block;
	position: relative;
}
.item_img {
	width: 78%;
	margin: 6% auto 10%;
}
.credit-area {
	 width: 84%;
         margin: 15% auto;
}

/*///*/
.mb10 {
	margin-bottom: 10px;
}
.mb15 {
	margin-bottom: 15px;
}
.mb40 {
	margin-bottom: 40px;
}
.img-c img {
	width: 100%;
	-webkit-backface-visibility: hidden;
}
.item-text {
	width: 72%;
    margin: 9% auto 0;
}
/*////*/
.button_crdit {
	width: 70%;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.6;
}
.button_ {
    width: 88px;
    height: 38px;
    border: solid 2px #222;
    background: #222;
    text-align: center;
    transition: 1s;
    vertical-align: middle;
    display: inline-block;
}
.eff {
  text-decoration: none;
    line-height: 41px;
    color: #fff !important;
    font-size: 1.5rem;
    letter-spacing: 1px;
}
.button_:hover{
    background: #fff;
	border: solid 2px #222;
	color: #222 !important; 
	transition : .3s;
}
.eff:hover {
    color: #222 !important;
    background: #fff;
}
@media screen and (min-width: 768px) {
#mainArea{ position: relative; margin: 0 auto; width: 900px;}
.sp{ display: none;}
.pc{ display: block;}
.style_li {width: 24%;}
.bnr_ {width: 900px; margin: 0 auto;}
.lead {text-align: center; font-size: 1.3rem; margin: 5em auto 6em; padding: 0;}
.archive {width: 64%; margin: 0 auto;}
}