@charset "utf-8";
/* CSS Document */

/* =======================================
	2023.04  No.196
    p08/Good Neighbors
======================================= */

/*---Text Head---*/
.titleArea h2{
    width:35.7%;
    margin:0 auto 2.5em;
}

.titleArea h3{
   width:31%;
    margin:0 auto;
}

div.presentArea h3{
    width:40%;
    margin:0 0 1em;
    text-align: left;
}

div.presentWrap h4{
  font-size:25px;
  letter-spacing: 0.1em;
    padding:0.5em 0;
    width:80%;
    line-height:1.5em;
    text-align: left;
    border-bottom:solid 3px #539D9C;
}

div.presentWrap h5{
    position:absolute;
    width:38%;
    top:-5.5em;
    left:29%;
}

div.infoArea h4{
    font-size:23px;
    width:32%;
    display:inline-block;
    vertical-align: top;
    margin:1em auto 1em;
}

div#snsArea h5{
    font-size:22px;
    line-height:32px;
    margin-bottom:1em;
}

/*---Text Para---*/
p{
  font-size:15px;
  line-height:2.2em;
  margin-bottom:2em; 
  letter-spacing: 0;
}

p span,h3 span,h4 span{
    display: inline-block;
    text-indent:0;
}

.titleArea p{
    font-size:0.9vw;
    line-height:1.7em;
    width:40%;
    position:absolute;
    left:61%;
    top:0%;
    text-align: left !important;
    display:block;
    animation-duration: 2s;
    text-indent:0;
}

@media screen and  (min-width:1400px) {
    .titleArea p{
        font-size:14px;
    }
}

div.column div.v_item p{
    text-indent:0;
    width:80%;
    margin:0 auto;
}

div.column div.v_item p.name{
    border-top:solid 3px #539D9C;
    padding-top:0.8em;
    margin-top:1em;
    text-align:center;
}

div.presentWrap p{
    width:55%;
    margin:1em 0 1em 0;
}

div.infoArea > div p{
    width:auto;
    text-align: center;
}

div#link_mjuk p,
div#link_sdh p,
div#snsArea p{
    font-size:15px;
    line-height:1.2em;
}

/*---Other---*/
br.pcdn{
    display:none;
}

a:link{
    color:#000;
    opacity:1;
}

a:hover { 
    text-decoration:underline; 
    color: #539D9C;
    opacity:0.5;
}

a.btn{
    background:#539D9C;
    border-radius:20px;
    padding:0.5em 2em;
    /*color:#000;*/
	color:#fff;
    text-decoration: none;
    transition:0.5s;
	font-family: "Shuei KakuGo Gin B";
    font-weight:bold;
}

a.btn:hover{
    opacity:0.6;
}

/* =======================================
	PC
======================================= */

/*---Layout---*/
#mainArea{
    background:#FCFAF8;
    position:relative;
    overflow-x: hidden;
}

#bg_circle {
    position:absolute;
    width:86%;
    height:98%;
    left:12%;
    top:2%;
    background: url("../img/bg_circle.png") repeat-y center top;
    background-size:100% auto;
}

.contArea{
    width:88%;
    max-width:1200px;
    margin:0 auto;
    padding:5em 0 3em;
    background: url("../img/gnb_bg.gif") no-repeat center top;
    background-size:55% auto;
}

.titleArea{
    width:100%;
    position:relative;
    background-size:100% auto;
    margin-bottom:3.5em;
}

.titleArea picture#pho01 img{
    width:100%;
}

.textArea{
    width:110%;
    position:relative;
    left:-5%;
    opacity:0;
    animation-delay: 0.5s;
    animation-fill-mode: forwards;
}

div.column{
    width:100%;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:3em;
    text-align: center;
}

/*Voices*/
div.column div.v_item{
    margin:0 0 3em;
    padding:1.7em 0 2em;
    background: #fff;
    border-radius:10px;
    box-shadow: 5px 5px 10px #999;
    display: flex;
    justify-content: center;
    align-items: center;
    width:280px;
    transition:4s;
}

div.column div.v_item p.pref img{
    width:92%;
    padding:0.7em;
    border-top:solid 3px #539D9C;
    border-bottom:solid 3px #539D9C;
}

/*PRESENTArea*/
div.presentArea{
    width:88%;
    max-width:1200px;
    min-width:640px;
    margin:0 auto;
}
div.presentWrap{
    position:relative;
    width:100%;
    min-width:700px;
    margin:6.5em auto 3em;
    padding:5em 0 2em;
    background: #fff;
    box-shadow: 5px 5px 10px #999;
    text-align: center;
}

div.presentWrap > div{
    width:86%;
    margin:0 auto;
    position:relative;
}

div.presentWrap div#p_pre{
    width:38%;
    max-width:350px;
    min-width:200px;
    position:absolute;
    right:0;
    top:0;
    z-index:10;
}

div.presentWrap div#p_pre img{
    width:100%;
    border-radius:8px;
}

div.presentWrap div#p_pre img#p_pre_top{
    position:absolute;
    left:0;
    top:0;
    z-index:1;
    opacity:0;
    animation-delay: 3s;
    animation-duration: 10s;
    animation-iteration-count: infinite;
    
}

div.presentWrap div#p_pre img#num_pre{
    width:25%;
    position:absolute;
    right:-1em;
    bottom:-2em;
    z-index:2;
}

div.presentWrap dl{
    width:86%;
    margin:3em auto 0;
    display:inline-block;
    position:relative;
    vertical-align: top;
font-size:17px;
  line-height:22px;
  font-weight: 500;
}

div.presentWrap dl >div{
    width:49%;
    margin:0;
    display:inline-block;
    vertical-align: top;
    text-align:left;
}

div.presentWrap dl div dt{
    width:28%;
    display:inline-block;
    vertical-align: top;
    text-align: left;
    letter-spacing: 0.1em;
    margin-bottom:1.5em;
    text-indent: -1em;
	font-family: "Shuei KakuGo Gin B";
}

div.presentWrap dl div dd{
    width:65%;
    display:inline-block;
    text-align: left;
    vertical-align: top;
    margin-bottom:1.5em;
}

div.presentWrap dl div dd a.btn{
    font-size:0.9em;
    display:inline-block;
    padding:0.3em 1em 0.3em;
}

/*INFOArea*/
div.infoArea{
    width:88%;
    max-width:1200px;
    min-width:640px;
    margin:0 auto 1.5em;
    text-align: center;
}

div.infoArea > div{
    width:65%;
    margin:0 auto;
    text-align: center;
}

div.infoArea a.btn{
    display:inline-block;
    width:30em;
    line-height:1.5em;
    padding:0.5em 0;
}

div#link_mjuk{
    width:16%;
    max-width:250px;
    margin:0 auto;
    padding:3.5em;
}

div#link_sdh{
    width:18%;
    max-width:250px;
    margin:0 auto;
    padding:3.5em 0 0;
}

div#link_presdh{
    width:33%;
    max-width:300px;
    margin:3.5em auto 0;
}

div#link_mjuk a:hover,
div#link_sdh a:hover,
div#link_presdh a:hover{
    text-decoration: none;
    color:#000;
}

div#link_mjuk img,
div#link_sdh img{
    width:100%;
    margin-bottom:0.5em;
}

div#link_presdh img{
    width:100%;
    margin-bottom:0.2em;
}

div#snsArea{
    width:24%;
    min-width:250px;
    margin:0 auto;
    padding:1em;
}

div#snsArea ul{
    width:100%;
    margin:0 auto 0.5em;
    position:relative;
}

div#snsArea ul li{
    display:inline-block;
    width:20%;
    margin:0 1.5%;
}

div#snsArea ul li img{
    width:100%;
}

div#snsArea ul li:first-child{
    margin-left:0;
}

div#snsArea ul li:last-child{
    margin-left:3%;
    margin-right:0;
}

/* =======================================
	DISPLAY LARGE
======================================= */
@media screen and  (min-width:1801px) {
    .textArea{
        width:132%;
        position:relative;
        left:-16%;
    }
}
@media screen and  (min-width:1400px) and ( max-width:1800px) {
    .textArea{
        width:116%;
        position:relative;
        left:-8%;
     }
}
/* =======================================
	TABLET
======================================= */
@media screen and  ( max-width:1399px) {
         div.presentWrap h4{
            width:62%;
        }
}
@media screen and  (min-width:641px) and ( max-width:1024px) {
        div.presentWrap img.num_pre{
            top:52%;
            bottom:auto;
        }

        div.presentWrap dl div dt,div.presentWrap dl div dd{
            font-size:0.8em;
        }
    
        br.pcdn{
            display:block;
        }
}
/* =======================================
	SMPH
======================================= */
@media screen and (max-width: 640px) {

            /*---SMPH Text Head---*/
            .titleArea h2{
                width:64%;
                position:relative;
                margin:0 auto 1em;
            }
            .titleArea h3{
               width:100%;
            }

            div.presentArea h3{
                width:100%;
                margin:0 0 0.5em;
                text-align: left;
            }
            div.presentWrap h4{
              font-size:20px;
                line-height:32px;
                padding:0.5em 0;
                margin-bottom:1em;
                border-bottom:solid 3px #539D9C;
                width:100%;
                text-align: center;
            }
            div.presentWrap h5{
                position:absolute;
                width:88%;
                top:-6em;
                left:6%;
            }

            div.infoArea h4{
                width:100%;
                display:block;
                font-size:20px;
            }

            /*---SMPH Text Para---*/
            p{
                font-size:16px;
                line-height:1.9em;
                letter-spacing:0.1em;
                text-indent:1em;
                margin-bottom:1.8em;  
            }

            .titleArea p{
                position:relative;
                display:block;
                width:100%;
                margin:0 auto 3em;
                left:auto;
                top:auto;
                font-size:15px;
                line-height:1.5em;
                text-align:center !important;
            }

            div.column div.v_item p{
                text-indent:0;
                width:80%;
                margin:0.5em auto 1em;
            } 

            div.presentWrap p{
                width:100%;
                margin:1em 0 1em 0;
            }

            div.infoArea > div p{
                width:auto;
                text-align: center;
                text-indent:0;
                font-size:15px;
                letter-spacing: 0;
            }

            /*---SMPH Layout---*/

            #mainArea{
                width:100%;
                }

            #bg_circle {
                position:absolute;
                width:100%;
                height:calc(100% - 15vh);
                left:0;
                top:15vh;
                background: url("../img/bg_circle.png") repeat-y center top;
                background-size:100% auto;
            }

            .contArea{
                width:90%;
                margin:0 auto;
                padding:2.5em 0 3em;
                background: url("../img/gnb_bg.gif") no-repeat top;
                background-size:80% auto;
            }

            .titleArea{
                width:100%;
                background:none;
                margin-bottom:2em;
            }

            .textArea{
                width:100%;
                position:relative;
                left:auto;
            }

            div.column{
                width:100%;
            }

            /*SMPH Voices*/
            div.column div.v_item{
                width:100%;
                margin:0 0 2em;
                padding:1.5em 0;
                background: #fff;
                border-radius:10px;
                box-shadow: 5px 5px 10px #999;
                display:inline-block;
            }

            div.column div.v_item img{
                image-rendering: -webkit-optimize-contrast;
            }

            /*SMPH PRESENTArea*/
            div.presentArea{
                width:100%;
                max-width:auto;
                min-width:auto;
            }
            div.presentWrap{
                position:relative;
                width:100%;
                min-width:200px;
                margin:6.5em auto 3em;
                padding:5em 0 2em;
            }

            div.presentWrap > div{
                width:86%;
                margin:0 auto;
                position:relative;
            }

            div.presentWrap div#p_pre{
                width:100%;
                margin-bottom:1.5em;
                max-width:auto;
                min-width:auto;
                position:relative;
            }
    
            div.presentWrap div#p_pre img#num_pre{
            width:25%;
            position:absolute;
            right:-1em;
            bottom:-0.5em;
            z-index:2;
             }

            div.presentWrap dl >div{
                width:100%;
                display:block;
                font-size:15px;
                margin-top:0;
            }

            div.presentWrap dl div dt{
                width:100%;
                display:block;
                vertical-align: top;
                text-align: center;
                letter-spacing: 0.1em;
                margin-bottom:0.5em;
                text-indent:0;
            }

            div.presentWrap dl div dd{
                width:100%;
                display:block;
                text-align: center;
                vertical-align: top;
                margin-bottom:2em;
            }

            div.presentWrap dl div dd a{
                display:inline-block;
            }

            /*SMPH INFOArea*/
            div.infoArea{
                width:88%;
                max-width:auto;
                min-width:auto;
                margin:0 auto 1.5em;
                text-align: center;
            }

            div.infoArea > div{
                width:100%;
            }

            div.infoArea a.btn{
                display:inline-block;
                width:100%;
                line-height:1.2em;
                margin:0 auto;
            }

            div#link_mjuk{
                width:50%;
                max-width:250px;
                padding:2em 0;
            }

            div#link_sdh{
                width:55%;
                max-width:auto;
                padding:2em 0 1em;
            }
    
            div#link_presdh{
                width:85%;
                margin:3.5em auto 0;
            }


            div#snsArea{
                width:90%;
                margin:0 auto;
                min-width:auto;
            }

            div#snsArea h5{
                font-size:22px;
                line-height:32px;
                margin-bottom:1em;
            }

            div#snsArea ul{
                margin:0 auto 0.5em;
                position:relative;
            }

            div#snsArea ul li{
                display:inline-block;
                width:18%;
                margin:0 3%;
            }

            div#snsArea ul li img{
                width:100%;
            }

            div#snsArea ul li:first-child{
                margin-left:0;
            }

            div#snsArea ul li:last-child{
                margin-left:4%;
                margin-right:0;
            }

            br.pcdn{
                display:block;
            } 
      
}

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

@-webkit-keyframes fadeInOut {
0% {
    opacity: 0;
  }
20% {
    opacity: 1;
  }
40% {
    opacity: 1;
  }
50% {
    opacity: 1;
  }
70% {
    opacity: 0;
  }
100% {
    opacity: 0;
  }
}

@keyframes fadeInOut {
0% {
    opacity: 0;
  }
20% {
    opacity: 1;
  }
40% {
    opacity: 1;
  }
50% {
    opacity: 1;
  }
70% {
    opacity: 0;
  }
100% {
    opacity: 0;
  }
}

.fadeInOut {
  -webkit-animation-name: fadeInOut;
  animation-name: fadeInOut;
}