/*ãƒªã‚»ãƒƒãƒˆCSS*/
html,
body,
div {
    margin: 0;
    padding: 0;
    border: 0;
    font: inherit;
    vertical-align: baseline;
}
button,
option,
select,
textarea,
input[type="button"],
input[type="search"],
input[type="submit"],
input[type="number"],
input[type="email"],
input[type="tel"],
input[type="text"],
input[type="select"],
input[type="option"],
input[type="checkbox"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    appearance: none;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    border-radius: 0;
    border: none;
    outline: 0;
    margin: 0;
    background: #fff;
}
/*ãƒªã‚»ãƒƒãƒˆCSS*/

html {
/*  ãƒ•ã‚©ãƒ³ãƒˆã‚µã‚¤ã‚º:10px  */
    font-size: 62.5%
}

body {
    background-color: #f2f2f2;
    line-height: 1.5;
	font-family: "ãƒ’ãƒ©ã‚®ãƒŽè§’ã‚´ ProN W3", "Hiragino Kaku Gothic ProN", "ãƒ¡ã‚¤ãƒªã‚ª", Meiryo, sans-serif;
}

a {
    text-decoration: none
}

button:hover {
    cursor: pointer
}

p {
    line-height: 1.6;
    margin-bottom: 1.8rem
}

h2{
	font-weight:normal;
}

.contents-wrap {
    background-color: #fff;
}

.recommend,
.experience {
    background-color: #f2f2f2;
}

.header-movie {
    max-height: 75vh;
    width: 100%;
    position: relative;
    overflow: hidden
}
.contents-wrap .pc {
    display: block
}

.contents-wrap .sp {
    display: none
}

 .pc {
    display: block
}

 .sp {
    display: none
}

.header-logo {
    position: absolute;
    top: 10px;
    left: 20%;
    z-index: 100;
}

.header-logo img {
    width: auto;
    height: 10%
}

@media (max-width: 767px) {

.header-logo {
    position: absolute;
    top: 10px;
    left: 5%;
    z-index: 100;
}

.header-logo img {
    width: auto;
    height: 8%
}

}


.header-text {
    width: 100%;
    position: absolute;
    top: 55%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 100;
    color: #fff;
    text-align: center;
    font-weight: 700;
    text-shadow: 2px 2px 3px rgba(106, 106, 106, 0.75), -1px -1px 3px rgba(106, 106, 106, 0.75);
    font-size: 4.8rem;
}

.header-text p {
    margin: 0;
    padding: 0
}

.lastp {
    width: 100%;
    position: absolute;
    top: 70%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 100;
    color: #fff;
    text-align: center;
    font-weight: 700;
    text-shadow: 2px 2px 3px rgba(106, 106, 106, 0.75), -1px -1px 3px rgba(106, 106, 106, 0.75);
    font-size: 2.6rem
}

.lastp p {
    margin: 0;
    padding: 0
}


@media (max-width: 767px) {
	
	.lastp {
    width: 100%;
    position: absolute;
    top: 75%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    z-index: 100;
    color: #fff;
    text-align: center;
    font-weight: 700;
    text-shadow: 2px 2px 3px rgba(106, 106, 106, 0.75), -1px -1px 3px rgba(106, 106, 106, 0.75);
    font-size: 2.2rem
}
}


.header-search {
    margin: -5rem auto 0;
    z-index: 100;
    width: 100%;
    z-index: 100;
    max-width: 1080px;
}

.header-search-form {
    margin: 0 auto;
    position: relative;
    width: 80%;
}

.header-search-form img {
    position: absolute;
    top: 3rem;
    left: 3rem;
    height: 5rem;
    width: 5rem
}

.header-search input {
    -webkit-appearance: textfield;
    background-color: #fff;
    border: 0;
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
    border-radius: 50px;
    -webkit-box-shadow: 0 2.5px 4px 0 rgba(208, 208, 208, 0.75);
    -moz-box-shadow: 0 2.5px 4px 0 rgba(208, 208, 208, 0.75);
    box-shadow: 0 2.5px 4px 0 rgba(208, 208, 208, 0.75);
    height: 10rem;
    padding-left: 100px;
    width: 100%;
    font-size: 2.4rem
}


.header-search form button {
    background-color: #7C7F80;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    border: none;
    color: #fff;
    font-size: 2.4rem;
    font-weight: bold;
    height: 6.8rem;
    width: 8.8rem;
    padding: 0 1.5rem;
    position: absolute;
    right: 2rem;
    top: 1.6rem;
}

.header-movie video {
    width: 100%;
    /*  å‹•ç”»ã‚’æš—ã  */
    -webkit-filter: brightness(0.7);
    filter: brightness(0.7);
}

.contents-wrap {
    margin: 0 auto;
   /* padding-bottom: 20px*/
}

section {
    padding:  4rem 0  8rem 0
}

section h2 {
    text-align: center;
    font-size: 3.6rem;
    color: #6d6d6d;
    margin-bottom: 5rem
}

section h2 span {
    color: #E78F8F
}

section h2 .diagonal {
    padding: 0 1.0rem
}

.post-wrap {
    margin: 0 auto;
    position: relative;
    max-width: 1080px;
    width: 100%
}

.post-card {
    display: inline-block;
    width: 32%;
    margin: 0 0.5%;
    height: 350px;
    background-color: #fff;
    vertical-align: top;
}

.cat {
    position: absolute;
    background-color: rgba(0, 0, 0, 0.6);
    padding: 5px 10px;
    color: #fff;
    font-size: 1.2rem;
}

.post-thumb {
    height: 60%;
    overflow: hidden
}

.post-thumb img {
    width: 100%;
    /*  ç”»åƒã‚µã‚¤ã‚ºåˆã‚ã›ã‚‹ãŸã‚ã«ã€‚å…ƒç”»åƒã®ã‚µã‚¤ã‚ºãŒåŒã˜ã§ã‚ã‚Œã°è§£é™¤  */
    height: 100%
}

.post-dis {
    margin: 1.0rem
}

@media (max-width: 767px) {
	
	section {
    padding: 3.0rem 0;
}

    .search{
		margin-bottom:20px;
	}
	.header-search input {
    height: 7rem;
    padding-left: 100px;
    width: 100%;
    font-size: 2rem;
}

.header-search form button {
    background-color: #7C7F80;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 20px;
    border: none;
    color: #fff;
    font-size: 1.8rem;
    font-weight: bold;
    height: 4rem;
    width: 6rem;
    padding: 0 1.5rem;
    /* position: absolute; */
    right: 0.8rem;
    top: 1.5rem;
}

.header-search {
    margin: -4rem auto 0;
}

}

.supple {
    font-size: 1.2rem;
    color: #c0c0c0;
    margin: 1.2rem 0;
    position: relative;
    width: 100%
}

.supple i,
.supple time,
.supple .diagonal,
.supple .update {
    font-weight: 700
}

span.views {
    right: 1%;
    position: absolute;
    width: 100%;
    text-align: right;
}

.post-dis h3 {
    font-weight: 700;
    font-size: 1.7rem;
    color: #6D6D6D
}



.search-wrap {
    width: 100%;
    max-width: 1080px;
    margin: 0 auto
}

.search-form {
    width: 90%;
    position: relative;
    margin: 0 auto;

}

.search-form input {
    background-color: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 2.5px 4px 0 rgba(208, 208, 208, 0.75);
    -moz-box-shadow: 0 2.5px 4px 0 rgba(208, 208, 208, 0.75);
    box-shadow: 0 2.5px 4px 0 rgba(208, 208, 208, 0.75);
    height: 8rem;
    padding-left: 2.0rem;
    width: 100%;
    border: 2px solid #7c7f80;
    font-size: 2rem
}

.search-form button {
    background-color: #7C7F80;
    -webkit-border-radius: 0 10px 10px 0;
    -moz-border-radius: 0 10px 10px 0;
    border-radius: 0 10px 10px 0;
    border: none;
    color: #fff;
    font-size: 2rem;
    font-weight: bold;
    height: 8rem;
    position: absolute;
    right: 0px;
    top: 0px;
    width: 10%
}

.banner {
    width: 100%;
    margin: 0 auto 50px auto;
	padding:5.0rem 0 5.0rem 0;
	background-color: #f2f2f2;
}

.banner img {
   max-width: 90%;
   display: inline-block;
	margin: 0 auto;
}

.media-policy {
    margin-top: 10rem;

    padding: 3.0rem 0rem 7rem;
    border: 3px solid #E78F8f;
    line-height: 2.0;
    position: relative;
    max-width: 1080px;
    width: 1000%;
    margin: 5rem auto;
    background-color: #fffcfc;
}



.media-policy p {
    padding: 0rem 22rem 1.5rem 22rem;
    font-size: 1.8rem;
    color: #4D4D4D;
	line-height:3.5rem;
}

p.policy-link {
    position: absolute;
    bottom: 20px;
    right: 5rem;
    border: 1px solid #B5B5B5;
	background-color:#ffffff;
    padding: 1rem 20px
}

policy-link:hover {
	background-color:#F90;
	color:#fff;
	border:none;
}

.salon {
    width: 100%;
    margin: 0 auto;
    background-image: url(../images/salon-bg.png);
    background-size: cover;
    background-repeat: no-repeat
}

.salon-banner {
    margin: 0 auto;
    width: 12%;
}



.salon-list {
    max-width: 1080px;
    margin: auto;
}

.button-wrap{
	 margin: 10px 0;
	     display: block;
}

.button {
    display: block;  
    
    background-color: #f3a9a9;
    height: 5rem;
    margin: auto;
    border: none;
    -webkit-border-radius: 8rem;
    -moz-border-radius: 8rem;
    border-radius: 8rem;
    color: #fff;
	font-size:1.6rem;
}

.button span{
	margin:0 50px;
}

footer {
    height: 300px;
    position: relative;
    background-color: #E78F8f;
}


.footer-line {
    width: 100%;
    height: 10px;
    background-color: #df7575;
    margin-bottom: -10px;
    box-shadow:5px 2px 5px rgba(202,202,202,0.25)
}

.footer-wrap {
    max-width: 1080px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: flex;
    margin: 0 auto;
    font-size: 1.6rem;
    color: #fff;
    position: relative;
    width: 100%;
    height: 100%;
}

.footer-wigets {
    width: 100%;
    margin-top: 3.5rem;

}

.footer-wigets ul {
    padding: 0;
    margin: 0 5px
}

.footer-wigets li {
    width: 24%;
    display: inline-block;
    margin: 0 0 1rem;
}

.footer-wigets li a {
    color: #fff
}

.footer-wigets li a:hover {
	text-decoration:underline;
}

.footer-logo {
    position: absolute;
    bottom: 15%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    -moz-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    -o-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.footer-logo img {
    height: 20%
}

.footer-box {
    background-color: #000;
    height: 50px;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0;
    line-height: 50px
}

.copyright {
    display: block;
    color: #fff;
    font-size: 1.4rem;
}

#page-top {
    right: 15%;
    bottom: 6rem;
    position: fixed;
    display: none;
    z-index: 9999;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    backface-visibility: hidden;
}

#page-top a {
    width: 4rem;
    height: 4rem;
    -webkit-border-radius: 4rem;
    -moz-border-radius: 4rem;
    border-radius: 4rem;
    padding: 1.5rem;
    font-size: 4rem;
    background-color: #F3A9A9;
    color: #fff;
    text-decoration: none;
    display: block;
    cursor: pointer;
    text-align: center;
    line-height: 0;
}


@media (max-width: 767px) {
    html {
        font-size: 65%;
    }

.contents-wrap .pc {
        display: none
    }

.contents-wrap .sp {
        display: block
    }
	
 .pc {
        display: none
    }

 .sp {
        display: block
    }

    .header-text {
        background-color: rgba(33, 33, 33, 0.5);
    }


    .header-search-form {
        width: 85%;
	    margin-bottom: -20px;
    }

.header-search-form img {
    height: 2rem;
    width: 2rem;
    top: 2.5rem;
    left: 1.2rem;
}

.header-search input {
    padding-left: 3.5rem;
    font-size: 1.8rem;
}
	    section h2 {
         font-size: 2.5rem;
		 margin-bottom: 1rem;
    }
	
	  

    section h2 span {
        color: #E78F8f;
		font-size: 3rem;
    }

    section h2 .diagonal {
        padding: 0 1rem
    }

    .cat {
        font-size: 1.6rem
    }

    .post-card {
        width: 94%;
        margin: 1% 3% 5% 3%;
/*        height: 50rem;*/
    }

    .post-thumb {
        height: 70%;
        overflow: hidden
    }

    .supple {
        font-size: 1.8rem;
		margin:  0;
    }

    .post-dis h3 {
        font-size: 2.4rem;
		margin-top:1rem;
    }

    .search-form {
        width: 90%;
    }

    .search-form button {
        font-size: 1.8rem;
        width: 20%
    }

    .banner {
        width: 100%;
    }

    .banner ig{
        width: 90%;
    }

    .media-policy {
        width: 87%;
        margin: 5rem auto;
        line-height: 1.2;
        padding: 1rem 1rem 7rem 1rem
    }

    .contents-wrap .media-policy h2 {
        font-size: 3rem;
        margin: 1.5rem 0rem 0rem 0rem;
		 line-height: 3.4rem;
    }
	
    .contents-wrap .media-policy h2 span {
    color: #E78F8f;
    font-size: 4rem;
    font-weight: normal;
}

	.media-policy p {
    padding:0 1.5rem;
    font-size: 2rem;
    color: #4D4D4D;
}

p.policy-link {
	    bottom: 10px;
	    right: 2rem;
	    padding: 10px;
}

    .salon {
        width: 100%;
	
    }
	
	.salon-list {
    margin: 15px;
}

    .salon::after {
        content: "";
        clear: both;
        display: block
    }

    .salon-banner {
        float: left;
        margin: 1%;
        width: 23%;
        width: -webkit-calc(92% / 4);
        width: -moz-calc(92% / 4);
        width: calc(92% / 4);
    }

.button {

}

    .footer-wigets {
         margin: 20% 2% 10% 2%;
		 font-size: 1.5rem;
		 z-index:2;
    }

    .footer-logo {
        position: absolute;
        top: 35%;
        left: 15%;
		z-index:1;
    }

    .footer-logo img {
        height: 20%
    }

    .footer-wigets li {
        width: 32%;
    }

    #page-top {
        right: 5%;
        bottom: 6rem;
    }
	.search-form input {
    background-color: #fff;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    -webkit-box-shadow: 0 2.5px 4px 0 rgba(208, 208, 208, 0.75);
    -moz-box-shadow: 0 2.5px 4px 0 rgba(208, 208, 208, 0.75);
    box-shadow: 0 2.5px 4px 0 rgba(208, 208, 208, 0.75);
    height: 6rem;
    /* padding-left: 2.0rem; */
    width: 100%;
    border: 2px solid #7c7f80;
    font-size: 1.8rem;
}
	.search-form button {
    font-size:1.8rem;
    height: 6rem;
}
	
}

@media (max-width: 480px) {
    html {
        font-size: 45%;
    }
	
}

@media (max-width: 320px) {
    html {
        font-size: 40%;
    }
}

.banner img:hover{
	opacity: 0.8;
}

.salon img:hover{
	opacity: 0.8;
}



.media_h202{
    font-size: 2.8rem;
    margin: 0rem 5rem 2rem 5rem;
    background: #none;
    border-top: none;
    color: #6D6D6D;
	  position: relative;
  display: inline-block;
  padding: 0 55px;
}

.media_h202:before, .media_h202:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 30px;
  height: 2px;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
}

.media_h202:before {
  left:0;
}
.media_h202:after {
  right: 0;
}


.cps-post-main ol {
  counter-reset: li;
  padding-left: 22rem;
  margin-top: 0em;
  margin-bottom: 1.5em;
}

.cps-post-main ol>li, .cps-post-main table ol:not([class]) li {
  position: relative;
  display: block;
  padding: 0em 0px 0em 30px;
  margin-bottom: 0em;
  font-size: 1.8rem;
}

.cps-post-main ol>li:after, .cps-post-main table ol:not([class]) li:after {
  counter-increment: li;
  content: counter(li);
  position: absolute;
  width: 20px;
  height: 20px;
  left: 0px;
  padding: 0;
  line-height: 0;
  color: #fff;
  text-align: center;
  font-size: 0.65em;
  letter-spacing: 0;
   margin-top: 6px;
}

@media (min-width: 768px) {
	


  .cps-post-main ol>li:after, .cps-post-main table ol:not([class]) li:after {
    top: 12px;
  }
}

@media (max-width: 767px) {
	
.media_h202 {
    font-size: 2.6rem;
    margin: 0rem 0.8rem 1rem 0.8rem;
    background: #none;
    border-top: none;
    line-height: 3rem;
    color: #6D6D6D;
    position: relative;
    display: inline-block;
    padding: 0 35px;
}

.media_h202:before, .media_h202:after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 25px;
  height: 2px;
  border-top: solid 1px black;
  border-bottom: solid 1px black;
}




  .cps-post-main ol>li:after, .cps-post-main table ol:not([class]) li:after {
    font-weight: 400;
    top: 5px;
  }
  


.media-policy p {
    padding: 0.5rem 0.8rem;
    font-size: 1.8rem;
    color: #4D4D4D;
    line-height: 2.5rem;
}



.cps-post-main ol {
    counter-reset: li;
    margin-top: 0em;
    margin-bottom: 0em;
	padding: 1rem 0.8rem;
}

.cps-post-main ol>li, .cps-post-main table ol:not([class]) li {
    position: relative;
    display: block;
    padding: 0em 0px 0em 25px;
    margin-bottom: 0em;
    font-size: 1.8rem;
	line-height:2.5rem;
}

}

.cps-post-main ol>li:before, .cps-post-main table ol:not([class]) li:before {
  position: absolute;
  content: "";
  left: 0px;
  height: 20px;
  width: 20px;
  border-radius: 10px;
  background: #000;
}

@media (min-width: 768px) {
	
  .cps-post-main ol>li:before, .cps-post-main table ol:not([class]) li:before {
    top: 7px;
  }
}

@media (max-width: 767px) {
  .cps-post-main ol>li:before, .cps-post-main table ol:not([class]) li:before {
    top: 0px;
  }
}

.cps-post-main div ul, .cps-post-main div ol {
  margin: 1em 0;
  padding-left: 26px;
}

@media (max-width: 767px) {
.cps-post-main div ul, .cps-post-main div ol {
  margin: 1em 0;
  padding-left: 10px;
}
}
.cps-post-main ul>li:before, .cps-post-main ol>li:before {
  background-color: #ffbb00;
}

.media-policy h2 {
    font-size: 3.4rem;
    text-align: center;
    color: #6D6D6D;
	font-weight:bold;
    margin-bottom: 0rem;
	line-height:3.5rem;
}

.media-policy h2 span{
	color:#E78F8f;
	 font-size: 4.5rem;
	 font-weight:normal;
}

.foot-bn{
	float:right;
}



.pic_news{
	width: 100%;
    margin: 0 auto ;
    background:url(https://arts-center.gr.jp/wp-content/uploads/news_bg.png);
    background-repeat: repeat;
	padding:50px 0;
	
}


.news_in{
	height:230px;
    margin-top: 10rem;
    padding: 3.0rem 0rem 5rem;
    border: none;
    line-height: 2.0;
    position: relative;
    max-width: 1080px;
    width: 100%;
    margin:0 auto;
	border-radius:10px;
    background-color: #fffcfc;
	overflow:scroll;
	overflow-x: hidden;
}

.news_ribbon {
    display: inline-block;
    position: relative;
    height: 65px;
    width: 93%;
    line-height: 60px;
    /* text-align: center; */
    padding: 7px 0;
    font-size: 230%;
    background: #8DC3E8;
    color: #FFF;
    box-sizing: border-box;
	margin: 0 40px;
}
.news_ribbon h3 {
  margin: 0;
  padding: 0 30px 0 80px;
/*  border-top: dashed 1px #FFF;
  border-bottom: dashed 1px #FFF;*/
  line-height: 55px;
  background-image:url(https://arts-center.gr.jp/wp-content/uploads/news_icon.png);
  background-repeat:no-repeat;
  background-position: left 18px bottom 3px;
}


.news_ribbon:after {
  position: absolute;
  content: '';
  z-index: 1;
  top: 0;
  right: 0;
  width: 0px;
  height: 0px;
  border-width: 30px 15px 30px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}

.news_box{
	margin:0 25px;
	font-size: 1.6rem;
	width: 100%;
}

.news_box a{
	color:#505050;
}

.news_box a:hover{
	text-decoration:underline;
}

.news_box .box_in{
    width: 29%;
    float: left;
    padding: 0 20px;
    border-right: 1px dotted #CCCCCC;
    margin-top: 20px;
	min-height:180px;
	max-height:180px;
	overflow:hidden;
}


.news_box .box_in_last{
    width: 28%;
    float: left;
    padding: 0 20px;
	border-right:none;
	margin-top: 20px;
	min-height:180px;
	max-height:180px;
	overflow:hidden;
}

.news_box p{
    margin: 0;
	font-size:90%;
}


.news_box span{
	font-size:90%;
	color:#EFA9A6;
	font-weight:bold;
	padding:0;
}

.news_box .title{
	font-size:110%;
	font-weight:bold;
	color:#505050;
	padding:0;
    margin: 5px 0;
}






@media (max-width: 767px) {
	
.news_ribbon {
    display: inline-block;
    position: relative;
    height: 50px;
    width: 93%;
    line-height: 60px;
    /* text-align: center; */
    padding: 5px 0;
    font-size: 200%;
    background: #8DC3E8;
    color: #FFF;
    box-sizing: border-box;
	margin: 10px 10px;
}
.news_ribbon h3 {
  margin: 0;
  padding: 0 30px 0 80px;
/*  border-top: dashed 1px #FFF;
  border-bottom: dashed 1px #FFF;*/
  line-height: 45px;
  background-image:url(https://arts-center.gr.jp/wp-content/uploads/news_icon.png);
  background-repeat:no-repeat;
  background-position: left 18px bottom -1px;
}

.news_ribbon:after {
  position: absolute;
  content: '';
  z-index: 1;
  top: 0;
  right: 0;
  width: 0px;
  height: 0px;
  border-width: 25px 15px 25px 0px;
  border-color: transparent #fff transparent transparent;
  border-style: solid;
}

	.news_in {
    height: 230px;
    margin-top: 10rem;
    padding: 0rem 0rem 1rem 0rem;
    border: none;
    line-height: 2.0;
    position: relative;
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
    border-radius: 10px;
    background-color: #fffcfc;
    overflow: scroll;
    overflow-x: hidden;
}

.pic_news{
	width: auto;
    margin: 0 auto ;
    background:url(https://arts-center.gr.jp/wp-content/uploads/news_bg.png);
    background-repeat: repeat;
	padding:20px;
	
}

.news_box {
    margin: 0 10px;
    font-size: 1.6rem;
    width: 100%;
}

.news_box .box_in{
    width: 95%;
    float: none;
    padding: 10px 0px;
	border-right: none;
    border-bottom: 1px dotted #CCCCCC;
    margin-top: 0px;
	min-height:auto;
	max-height:auto;
	overflow:auto;
}


.news_box .box_in_last{
    width: 95%;
    float: none;
    padding: 10px 0px;
	border-right: none;
    border-bottom: 1px dotted #CCCCCC;
    margin-top: 0px;
	min-height:auto;
	max-height:auto;
	overflow:auto;
}

.news_box .title {
    font-size: 130%;
	line-height:160%;
    font-weight: bold;
    color: #505050;
    padding: 0;
    margin: 5px 0;
}

.news_box p {
    margin: 0;
    font-size: 100%;
	line-height:180%;
}




}

.contents-wrap .link_r1 {
    font-weight: 700;
    font-size: 250%;
    text-align: right;
    margin: 10px 20px 0 0;
    color: #6D6D6D;
}


.contents-wrap .link_r1 a{
    color: #3d87c6;
}


.contents-wrap .link_r2 {
    font-weight: 700;
    font-size: 1.7rem;
    text-align: right;
    margin: 20px 10px 0 0;
    color: #6D6D6D;
}


.contents-wrap .link_r2 a{
    color: #3d87c6;
}

		/***************
		recommendのスライド
		****************/
		/* pc */
		
		.post-wrap {
			overflow-y: auto;
			white-space: nowrap;
			padding: 10px;
		}
		
		.post-dis h3 {
			white-space: normal;
		}
		
		.more_read_cat_pc,
		.more_read_cat_sp {
			font-size: 12px;
			position: absolute;
			border: solid 1px #aaa;
			background-color: #fff;
			padding: 5px;
			margin-left: 20px;
			margin-top: 13px;
		}
		
		.more_read_cat_pc a,
		.more_read_cat_pc a:hover,
		.more_read_cat_sp a,
		.more_read_cat_sp a:hover {
			color: #000;
		}
		/* pc */
		
		@media (min-width:768px) {
			.more_read_cat_sp {
				display: none;
			}
			/*
			.recommend .post-card {
				width: 25%;
				height: 295px;
			}
			.recommend .post-thumb img {
				height: 50%;
			}
			.recommend .post-thumb {
				height: initial;
			}
			*/
			
			.post-card {
				width: 25%;
				height: 310px;
			}
			.post-thumb img {
				height: 50%;
			}
			.post-thumb {
				height: initial;
			}
		}
		/*sp*/
		
		@media(max-width:767px) {
			.more_read_cat_pc {
				display: none;
			}
			.more_read_cat_sp {
				display: block;
				position: absolute;
				right: 0px;
				margin: 0 10px 0 0;
			}
			
			.recommend .post-wrap {
				height: 305px;
			}

			.post-wrap {
				height: 341px;
			}
			
			.post-wrap {
				width: auto;
			}
			
			.post-card {
				width: 80%;
				height: 270px;
			}
			.post-thumb img {
				height: 50%;
			}
			.post-thumb {
				height: initial;
			}
			.post-wrap::-webkit-scrollbar {
				overflow: hidden;
				height: 10px;
				background: #fafafa;
				border-radius: 5px;
			}
			.post-wrap::-webkit-scrollbar:horizontal {
				height: 1 px;
			}
			.post-wrap::-webkit-scrollbar-button {
				display: none;
			}
			.post-wrap::-webkit-scrollbar-piece {
				background: #eee;
			}
			.post-wrap::-webkit-scrollbar-piece:start {
				background: #eee;
			}
			.post-wrap::-webkit-scrollbar-thumb {
				background: #7c7f80;
				border-radius: 5px;
				height: 35px;
			}
			.post-wrap::-webkit-scrollbar-corner {
				background: #7c7f80;
			}
			.news_in::-webkit-scrollbar {
				overflow: hidden;
				width: 10px;
				background: #fafafa;
				border-radius: 5px;
			}
			.news_in::-webkit-scrollbar:horizontal {
				height: 1 px;
			}
			.news_in::-webkit-scrollbar-button {
				display: none;
			}
			.news_in::-webkit-scrollbar-piece {
				background: #eee;
			}
			.news_in::-webkit-scrollbar-piece:start {
				background: #eee;
			}
			.news_in::-webkit-scrollbar-thumb {
				background: #7c7f80;
				border-radius: 5px;
				height: 35px;
			}
			.news_in::-webkit-scrollbar-corner {
				background: #7c7f80;
			}
		}