@charset "utf-8";
.pagetitle{
  background-image:url("../images/photo/topimage.jpg");
  background-position:center;
  background-size:cover;
  height:140px;
  position: relative;
}
.pagetitle::before{
    background-color:rgba(0,0,0,0.3);
    position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  content: ' ';
}
.pagetitle h2{
  margin:0 auto;
  position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
  color:#fff;
  font-size:2.0rem;
  font-weight:400;
  white-space:nowrap;
}

@media(min-width:1024px){
.p-background{
display:none;
}
.pagetitle{
  background-image:url("../images/photo/topimage.jpg");
  background-position:center;
  background-size:cover;
  height:250px;
  position: relative;
}
.pagetitle h2{
  font-size:3.0rem;
}
}
.introduction{
  padding:100px 55px;
  background-color:#f0f0f0;
}
.introduction h3{
  color:#1b4453;
  font-size:2.0rem;
  line-height:3.2rem;
  font-weight:500;
}
.blueline{
  width:40px;
  border-bottom:solid 2px #45839a;
  margin-bottom:30px;
  margin:20px auto 30px;
}
.i-flex{
  display:block;
}
.introduction img{
  min-width:220px;
  max-width:400px;
  width:100%;
  border-radius:30px;
  object-fit:cover;
}
.i-description{
  padding-top:30px;
  text-align:left;
}
.i-description h4{
  font-size:1.4rem;
  font-weight:300;
  line-height:3.0rem;
}
.i-description p{
  font-size:1.4rem;
  font-weight:300;
}
.pickup{
  color:#1b4453;
  font-size:1.8rem;
  font-weight:500;
  background: linear-gradient(transparent 60%, #f0ff00 60%);
}

@media(min-width:1024px){
.introduction{
  padding:170px 100px;
}
.introduction h3{
  font-size:3.0rem;
}
.blueline{
  width:70px;
  border-bottom:solid 4px #45839a;
  margin:35px auto 80px;
}
  .i-flex{
    display:flex;
  　margin:0 auto;
  } 
  .i-photo{
    flex:1;
    padding-left:120px;
    text-align:right;
  }
.introduction img{
  min-width:400px;
  max-width:570px;
  width:100%;
  object-fit:cover;
}
  .i-description{
  padding:100px 80px 90px 80px;
  flex:1;
}
.i-description h4{
  font-size:1.8rem;
  font-weight:300;
  line-height:4.4rem;
}
.i-description p{
  font-size:1.8rem;
  font-weight:300;
  line-height:2.8rem;
}
.pickup{
  font-size:3.0rem;
}
}

.penalties{
  padding:100px 40px;
  background-color:#fff;
}
.penalties h3{
  color:#1b4453;
  font-size:2.0rem;
  line-height:3.2rem;
  font-weight:500;
}
.mini{
  font-size:1.4rem;
  line-height:1.0rem;
}
.mini::before{
  content:"\A";
  white-space:pre;
  display:inline;
}
.js-scroll img{
  width:600px;
  margin:30px 0 40px;
}

@media(min-width:1024px){
  .penalties{
  padding:170px 100px;
}
.penalties h3{
  font-size:3.0rem;
}
.mini{
  font-size:1.8rem;
}
  .mini::before{
  white-space:nowrap;
  display: inline-block;
}
.js-scroll img{
  width:900px;
}
}

.public{
  padding:100px 20px;
  background-color:#f0f0f0;
}
.public h3{
  color:#1b4453;
  font-size:2.0rem;
  line-height:3.2rem;
  font-weight:500;
}
.p-description{
  padding:25px 0 50px;
}
.p-description p{
  text-align:center;
  font-size:1.4rem;
  font-weight:300;
}
.p-detail{
  text-align:left;
  padding:0 20px;
  max-width:600px;
  margin:0 auto;
}
.p-detail h4{
  font-size:1.6rem;
  font-weight:500;
  margin-bottom:10px;
}
.p-detail p{
  font-size:1.4rem;
  font-weight:300;
}
.p-break:after{
  white-space: nowrap;
  display: inline-block;
}
.public img{
  max-width:600px;
  min-width:340px;
  width:100%;
  margin:50px 0;
}
.accordion {
  border: 1px solid #275f74;
  margin:0 auto 10px;
  min-width:300px;
  max-width:600px;
}

.accordion-header {
  color:#FFF;
  font-size:1.4rem;
  font-weight:400;
  text-align:left;
  padding: 5px;
  background-color: #45839a;
  cursor: pointer;
  outline: none;
  position: relative;
  list-style: none;
  transition: background-color 0.3s; /* 背景色の変化にアニメーションを適用 */
}

.accordion-content {
  font-size:1.2rem;
  font-weight:300;
  text-align:left;
  line-height:2.0rem;
  padding: 15px;
  background-color: #fff;
}

.accordion-header::after {
  content: '▼';
  position: absolute;
  right: 20px;
  transition: transform 0.3s ease; 
}

.accordion[open] .accordion-header::after {
  transform: rotate(180deg);
}

.accordion-header:hover {
  background-color: #57a6c4; /* ホバー時の背景色 */
}

.accordion .accordion-header::-webkit-details-marker {
  display: none;
}



@media(min-width:1024px){
.public{
  padding:170px 100px;
}
.public h3{
  font-size:3.0rem;
}
.p-description{
  margin:0 auto;
  padding:10px 0 70px;
}
.p-description p{
  font-size:1.8rem;
}
  .p-detail{
    padding:0 100px;
    display:inline-block;
    max-width:900px;
  }
.p-detail h4{
  font-size:2.4rem;
  line-height:4.0rem;
}
.p-detail p{
  font-size:1.8rem;
  line-height:3.2rem;
}
   .p-break {
    white-space: pre-wrap;
  }
  .p-break:after{
  content:"\A　";
  white-space:pre;
    display:inline;
}
.public img{
  min-width:600px;
  max-width:930px;
  width:100%;
  margin:60px 0;
}
.accordion {
  min-width:500px;
  max-width:800px;
}

.accordion-header {
  font-size:1.8rem;
  padding:10px;
}

.accordion-content {
  font-size:1.6rem;
  line-height:2.8rem;
  padding: 15px;
}

.accordion-header::after {
  right: 30px;
}
}

.conclusion{
  padding:100px 20px 80px;
  background-color:#fff;
}
.conclusion h3{
    color:#1b4453;
  font-size:2.0rem;
  line-height:3.2rem;
  font-weight:500;
}
  .c-flex{
    display:block;
  }
.conclusion img{
  max-width:500px;
  min-width:335px;
  width:100%;
  height:320px;
  border-radius:30px;
  object-fit:cover;
  margin-bottom:40px;
}
.c-description p{
  font-size:1.4rem;
  font-weight:300;
  text-align:left;
}
  
@media(min-width:1024px){
.conclusion{
  padding:170px 50px 120px;
}
.conclusion h3{
  font-size:3.0rem;
}
  .c-flex{
    display:flex;
    flex-flow:row-reverse;
  }
  .c-photo{
    flex:1;
    padding-right:150px;
  }
.conclusion img{
  max-width:400px;
  width:100%;
}
  .c-description{
    flex:1;
    padding:30px 0 0 200px;
  }
.c-description p{
  font-size:1.8rem;
  line-height:3.2rem;
}
}