/* ==================================================
   MAIN photo
================================================== */
#home #contents {
  margin: 71px 0 0;
}
.maintopphoto{
	background:url(https://syouhintourokudaikou.com/img/bg_main2610.jpg);
	background-size:cover;
	padding: 40px 0;
	position:relative;
	background-position-x: 90%;
}
.maintopphoto_inner{
	margin: 0 0 0 4vw;
	max-width: 80%;
}
.maintopphoto h2{
	font-size:8.3vw;
	color:#176099;
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	line-height:110%;
	font-family: 'Zen Old Mincho', serif;
font-weight: 750;
letter-spacing: 0.05em;
line-height: 100%;
}


.maintopphoto h2 span{
	line-height:110%;
	font-size:0.8em;
}
#maintopphoto01{
	font-size:inherit;
	color:#D8AE3E;
}
#maintopphoto02{
font-size: 1.8vw;
  margin: 15px 0 20px;
  background: #176199;
  padding: 5px 20px;
  width: max-content;
  color: #fff;
  line-height: 100%;
}
#maintopphoto03{
font-size: 1.8vw;
  margin: 20px 0 15px;
  line-height: 100%;
}
.maintopphoto_innerTxt_right{
width: 24vw;
margin: 2vw 0 0;
}
.maintopphoto_innerTxt{
max-width: 77vw;
display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
.maintopphoto_innerTxt ul{
margin: 0;
}
.maintopphoto_innerTxt ul li{

vertical-align: middle;
display: inline-block;
width: 32%;
}
.maintopphoto_innerTxt ul li img{
width: 7vw;
max-width: 130px;
}
.en100{
font-size: 5vw;
margin: 0 0 20px;
font-weight: bold;
text-shadow: 
    2px  2px 0 #fff,
   -2px  2px 0 #fff,
    2px -2px 0 #fff,
   -2px -2px 0 #fff,
    2px  0px 0 #fff,
   -2px  0px 0 #fff,
    0px  2px 0 #fff,
    0px -2px 0 #fff;
}
.en100 img{
vertical-align: middle;
padding: 0 15px 30px 0;
max-width: 158px;
display: inline-block;
}
.en100 span{
background: linear-gradient(transparent 80%, rgba(255, 255, 77, 0.7) 80%);
line-height: 100%;
}
#en100_txt01{
background: none;
font-size: 1.4em;
font-family: 'Zen Old Mincho', serif;
font-weight: 750;
}
#en100_txt02{
background: none;
  font-size: 2em;
  font-family: 'Zen Old Mincho', serif;
  font-weight: 900;
  color: #FF0000;
  letter-spacing: -5px;
}
#en100_txt03{
background: none;
  color: #FF0000;
}

.mainlogoarea{
width: 100%;
padding: 18px 4vw;
background: rgba(205,205,205,.4);

}

.mainlogoarea_inner{
display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
justify-content: space-between;
flex-wrap: wrap;
align-items: center;
}

.mainlogoarea_innerLeft{
width: 68.5%;
}
.mainlogoarea_innerLeft p{
font-size: 1.4vw;
margin: 0 0 15px 0;
}
.mainlogoarea_innerLeft ul{
display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
justify-content: flex-start;
}
.mainlogoarea_innerLeft ul li{
margin: 0 2.0vw 0 0;
}
.mainlogoarea_innerLeft img{
width: 100%;
max-width: 150px;
}
.mainlogoarea_innerRight{
width: 25.5%;
}

@media only screen and (max-width: 1065px) {
  #sec01 {
    padding: 0;
  }
  .mainlogoarea_innerLeft ul li {
  margin: 0 1.6vw 0 0;
}
}

/* ==================================================
   SMARTPHONE
================================================== */

@media screen and (max-width: 767px) {
#home #contents {
  margin: 0;
  padding-top: 11vw;
}
#sec01 {
    padding: 0;
  }
.maintopphoto{
    background: url(https://syouhintourokudaikou.com/img/bg_smp2610-2.jpg);
    background-position-x: 0%;
    background-position-y: 0%;
    background-size: auto;
    background-size: cover;
    padding: 30px 0;
    position: relative;
    background-position-x: 40%;
    background-position-y: bottom;

}
#maintopphoto02 {
  font-size: 3.8vw;
margin: 15px 0 15px;
}
.maintopphoto_inner {
  margin: 0;
  max-width: 100%;
  padding: 0 4vw;
}
.maintopphoto_innerTxt {
  max-width: 100%;
  display: block;
margin: 0 0 30px;
}
.maintopphoto_innerTxt ul li {
  width: auto;
  margin: 0 10px 0 0;
}
.maintopphoto h2 {
  font-size: 14vw;
}
#maintopphoto03 {
  font-size: 3.5vw;
  margin: 15px 0 15px;
}
.maintopphoto_innerTxt_right {
  width: 100%;
}
.maintopphoto_innerTxt ul li img {
  width: 18vw;
  max-width: 130px;
}
.en100 img {
  width: 26vw;
}
.en100 {
  font-size: 7.7vw;
}
#en100_txt02 {
  letter-spacing: 0;
}
.mainlogoarea_inner {
  display: block;
}
.mainlogoarea_innerLeft {
  width: 100%;
  margin: 0 0 20px;
}
.mainlogoarea_innerLeft p {
  font-size: 3.5vw;
}
.mainlogoarea_innerLeft ul {
  flex-wrap: wrap;
}
.mainlogoarea_innerLeft ul li {
  margin: 0 2.2vw 10px 0;
}
.mainlogoarea_innerRight {
  width: 70%;
  text-align: center;
  margin: auto;
}
.mainlogoarea_innerLeft img {
  width: 100%;
  max-width: 80px;
}
.mainlogoarea{
background: rgba(255,255,255,.6);

}

}




.submission_data{
margin: 0;
}
.mainphoto_txt04 {
  font-size: 5.5vw;
  font-weight: bold;
  text-align: left;
  padding: 0 0 0 8vw;
}
.mainphoto_txt04 img {
position: absolute;
  top: 15px;
  left: calc((100% - 68vw)/2);
  max-width: 167px;
  width: 8vw;
}
.mainphoto_txt04::after , .mainphoto_txt04::before{
	content: none;
}
#fukidashi{
position: absolute;
  top: -25px;
  left: calc((100% - -16vw)/2);
  max-width: 270px;
  width: 10vw;
}
#star01 {
  position: absolute;
  max-width: 30px;
  left: calc((100% - -6vw)/2);
  bottom: 12vw;
}
#star02 {
  position: absolute;
  max-width: 30px;
  right: calc((160% - 6vw)/2);
  bottom: 6vw;
}
.no1_area p {
  text-align: left;
  font-size: 1.6vw;
  background:none;
  border-radius: inherit;
  line-height: 120%;
  position: relative;
  border-left: 4px #003872 solid;
  padding: 0 20px;
  margin: 15px 0 0;
  color: #000;
}
.no1_area p span {
  color: #D8AD0C;
  font-weight:bold;
}

.mainphoto_btn{
	position:absolute;
	right:5vw;
	bottom:40px;
	 display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
justify-content: space-between;
width:30vw;
}

.mainphoto_btn dl:first-of-type{
	background:#00A395;
	text-align:center;
	color:#fff;
	padding:6px 20px;
	width:48%;
}
.mainphoto_btn dl:last-of-type{
	background:#01A0C9;
	text-align:center;
	color:#fff;
	padding:6px 20px;
	width:48%;
}
.mainphoto_btn dt{
	font-family: "游明朝", YuMincho, "Hiragino Mincho ProN W3", "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
	border-bottom:1px #fff solid;
	padding: 0 0 2px;
  font-size: 1.3vw;
  color: #fff;
  text-align: center;
  font-weight:bold;
}
.mainphoto_btn dd{
color: #fff;
  line-height: 125%;
  text-align: center;
  margin: 5px 0 0;
  font-weight:400;
  padding:0;
}




.point , .service_inner , .option{
  max-width: 1200px;
}
.option{
	display:block;
}
.option_left {
  width: auto;
  text-align: center;
  margin: auto;
}
.option_left h2 {
  letter-spacing: 0.1em;
  text-align: center;
}
.option_left h3 {
  font-size: 18px;
  font-weight: bold;
  margin: 0 0 50px;
  text-align: center;
}
.option_right {
  width: 100%;
}
/* ==================================================
   MAIN SLIDER
================================================== */

.main-slider {
    position: relative;
    width: 100%;
    overflow: hidden;
    background: #fff;
}


/* ==================================================
   SLIDER WRAPPER
================================================== */

.slider-wrapper {
    position: relative;
    width: 100%;

    /*
     * PC用画像
     * 1920 × 700 を想定
     */
    aspect-ratio: 1920 / 700;

    overflow: hidden;
}


/* ==================================================
   SLIDE
================================================== */

.slide {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: 0;
    visibility: hidden;

    /*
     * 次の画像は少し大きい状態からスタート
     */
    transform: scale(1.24);

    /*
     * 滑らかな動き
     */
    transition:
        opacity 0.65s ease-out,
        transform 0.65s cubic-bezier(0.22, 1, 0.36, 1);

    z-index: 1;
}


/* ==================================================
   ACTIVE SLIDE
================================================== */

.slide.active {
    opacity: 1;
    visibility: visible;

    transform: scale(1);

    z-index: 2;
}


/* ==================================================
   LEAVING SLIDE
   「ひゅんっ」と小さくなる部分
================================================== */

.slide.is-leaving {
    opacity: 0;

    transform: scale(0.90);

    visibility: visible;

    z-index: 3;

    transition:
        opacity 0.45s ease-out,
        transform 0.45s cubic-bezier(0.55, 0, 1, 0.45);
}


/* ==================================================
   IMAGE
================================================== */

.slide > a {
    display: block;

    width: 100%;
    height: 100%;
}


.slide img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;
}


/* ==================================================
   MOTIF
================================================== */

.motif {
    position: absolute;

    left: 8%;
    top: 50%;

    transform: translateY(-50%);

    opacity: 0;

    /*
     * 初期状態
     */
    visibility: hidden;

    z-index: 5;

    display: flex;
    flex-direction: column;
    align-items: flex-start;

    pointer-events: none;
}


/* ==================================================
   MOTIF ACTIVE
================================================== */

.slide.active .motif.onAnime {

    visibility: visible;
	animation:
        motifIn
        0.9s
        cubic-bezier(0.22, 1, 0.36, 1)
        0.15s
        forwards;
		background:rgba(255,255,255,.5);
		padding: 10px 25px;
}


/* ==================================================
   MOTIF ANIMATION
================================================== */

@keyframes motifIn {

    0% {

        opacity: 0;

        transform:
            translate(40px, -50%)
            scale(0.96);
    }


    65% {

        opacity: 1;

        transform:
            translate(-5px, -50%)
            scale(1.01);
    }


    100% {

        opacity: 1;

        transform:
            translate(0, -50%)
            scale(1);
    }

}


/* ==================================================
   MOTIF TEXT
================================================== */

.motif span {

    display: block;

    margin-bottom: 8px;

    font-size: clamp(18px, 2vw, 32px);

    font-weight: 600;

    color: #222;

    letter-spacing: 0.05em;
}


.motif strong {

    display: block;

    margin-bottom: 12px;

    font-size: clamp(30px, 4vw, 64px);

    line-height: 1.2;

    font-weight: 700;

    color: #0052B3;

    letter-spacing: 0.03em;
}


.motif small {

    display: block;

    font-size: clamp(13px, 1.2vw, 19px);

    line-height: 1.7;

    color: #333;

}


/* ==================================================
   ARROW
================================================== */

.slider-arrow {

    position: absolute;

    top: 50%;

    z-index: 20;

    display: flex;

    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.35);

    color: #fff;

    cursor: pointer;

    transform: translateY(-50%);

    transition:
        background 0.3s ease,
        transform 0.3s ease;
}


.slider-arrow span {

    font-family:
        Arial,
        sans-serif;

    font-size: 42px;

    font-weight: 200;

    line-height: 1;

}


.slider-arrow:hover {

    background: rgba(0, 0, 0, 0.65);

    transform:
        translateY(-50%)
        scale(1.08);
}


.slider-prev {
    left: 25px;
}


.slider-next {
    right: 25px;
}


/* ==================================================
   DOTS
================================================== */

.slider-dots {

    position: absolute;

    left: 50%;
    bottom: 20px;

    z-index: 20;

    display: flex;

    align-items: center;

    gap: 9px;

    transform: translateX(-50%);
}


.slider-dot {

    width: 10px;
    height: 10px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: rgba(255, 255, 255, 0.65);

    cursor: pointer;

    transition:
        width 0.3s ease,
        background 0.3s ease;
}


.slider-dot.active {

    width: 30px;

    border-radius: 10px;

    background: #fff;
}


/* ==================================================
   TABLET
================================================== */

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

    .motif {

        left: 6%;

    }


    .slider-arrow {

        width: 45px;
        height: 45px;

    }

}


/* ==================================================
   SMARTPHONE
================================================== */

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

    .slider-wrapper {

        /*
         * スマホ画像
         * 750 × 900 を想定
         */
        aspect-ratio: 750 / 900;

    }


    .slide.is-leaving {

        transform: scale(0.95);

    }
	.slide img {
  object-position: 80% center;
}
.slide.active .motif.onAnime {
  background: rgba(255,255,255,.8);
}


    .motif {

        left: 7%;

        top: auto;
        bottom: 14%;

        transform: none;

    }


    .slide.active .motif.onAnime {

        animation:
            motifInSP
            0.8s
            cubic-bezier(0.22, 1, 0.36, 1)
            0.15s
            forwards;

    }


    @keyframes motifInSP {

        0% {

            opacity: 0;

            transform:
                translateX(30px)
                scale(0.96);

        }


        70% {

            opacity: 1;

            transform:
                translateX(-4px)
                scale(1.01);

        }


        100% {

            opacity: 1;

            transform:
                translateX(0)
                scale(1);

        }

    }


    .motif span {

        margin-bottom: 5px;

        font-size: 16px;

    }


    .motif strong {

        margin-bottom: 8px;

        font-size: 28px;

    }


    .motif small {

        font-size: 12px;

        line-height: 1.6;

    }


    .slider-arrow {

        width: 38px;
        height: 38px;

    }


    .slider-arrow span {

        font-size: 30px;

    }


    .slider-prev {

        left: 10px;

    }


    .slider-next {

        right: 10px;

    }


    .slider-dots {

        bottom: 12px;

        gap: 7px;

    }


    .slider-dot {

        width: 8px;
        height: 8px;

    }


    .slider-dot.active {

        width: 22px;

    }

}


/* ==================================================
   アニメーションを減らす設定
================================================== */

@media (prefers-reduced-motion: reduce) {

    .slide,
    .slide.is-leaving,
    .motif {

        transition: none !important;
        animation: none !important;

    }

}