@charset "UTF-8"; 

*{
    padding: 0;
    margin: 0;
}

.sawarabi-gothic-regular {
  font-family: "Sawarabi Gothic", sans-serif;
  font-style: normal;
}


main .nannana {
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10vw;
    white-space: pre-wrap;
    position: fixed;
    color: rgb(149, 233, 233);
}


.fixinfo {
    width: 10vw;
    height: 10vw;
    border-radius: 5vw;
    margin-left: auto;
    position: fixed;
    background-color:  rgb(149, 233, 233);
    margin-top: 22vw;
}


.fixinfo p {
    font-size: 1.5vw;
    font-weight: 800;
    line-height: 6;
    text-align: center;
    color: white;
}


.fixinfo  a {
    display: block;
    text-decoration: none;
    color: white;
}




/*  */

header{
    display: flex;
    height: 7vw;
    padding: 2%;
}


h1{
    width: 30%;
}


h1 img{
    width: 100%;
}



/* nav周り */
nav{
    width: 50%;
    margin-top: 2vw;
    margin-left: auto;
}


nav ul{
    display: flex;
    list-style: none;       
}


nav ul li{
    width: 25%;
}


nav ul li a{
    display: block;
    text-align: center;
    line-height: 3;
    text-decoration: none;
    color: #202020;
    font-size: 1.3vw;
    transition: 1s;
    border-radius: 1vw;
}

nav ul li a:hover{
    color: rgb(82, 141, 230);
    transition: 1s;
}

/* メイン//////////////////////////////// */

.main {
    width: 100%;
    height: 100vw;
}

/*  つむぐ想い、つながる心  */

.base01 {
    width: 100%;
    height: 58vw;
    background-image: url(../images/base04.jpg);
    background-size: 106%;
    background-repeat: no-repeat;
    background-position: 10vw  0vw;
}


.base01 h2 {
    text-align: center;
    font-size:3vw;
    padding-top: 30vw;
}


.base01 p {
    text-align: center;
    font-size:1.7vw;
    padding-top: 2vw;
    line-height: 2;
    white-space: pre-wrap;
}



/*////// 写真＋おせっかいは、心をつなぐ //////*/

.base02 {
    display: flex;
    width: 100%;
    height: 42vw;
    margin-top: 3vw;
    background-color: #D9F6FE;
}

/* 写真 */

.base02-ch01 {
    width: 50%;
}

.base02-ch01 img{
    width: 85%;
    margin-top: 6vw;
    vertical-align: bottom;
}

/* テキスト */

.base02-ch02 {
    width: 50%;
}


/* 共通 */

.base02 h3,.base03 h3 {
    width: 70%;
    margin-left: 15%;
    padding-top: 15%; 
    margin-bottom: 4%;
    line-height: 1.8;
    white-space: pre-wrap;
    font-size: 2.3vw;
}


.base02 p,.base03 p {
    width: 70%;
    font-size: 1.5vw;
    margin-left: 15%;
    line-height: 2;
    text-align: justify;
}


/*////// 私たちはこの場所から＋写真 //////*/

.base03 {
    display: flex;
    width: 100%;
    height: 42vw;
    background-color: #f3dcf2;
}

/* テキスト */

.base03-ch01 {
    width: 50%;
}


/* 写真 */
.base03-ch02 {
    width: 50%;
}

.base03-ch02 img {
    width: 85%;
    margin-top: 6vw;
    vertical-align: bottom;
}




/*////// 円が三点横並びの箇所 //////*/

.mission h4{
    text-align: center;
    padding-top: 4vw;
    font-size: 2.5vw;
}


.mission-txet {
    font-family: Arial, Helvetica, sans-serif;
    text-align: center;
    font-size: 1.5vw;
    font-weight: 400;
    white-space: pre-wrap;
    line-height: 2;
    margin-top: 2vw;
}


/*  */

.parent-box01 {
    display: flex;
    width: 90%;
    height: 30vw;
    margin-left: auto;
    margin-right: auto;
    margin-top: 3%;
    margin-bottom: 5%; 

}



/* 円形 */

.ch-box01 {
    width: 30%;
    height: 24vw;
    background-image: url(../images/maru01.jpg);
    background-size:100% 100%;
}


.ch-box02 {
    width: 30%;
    height: 24vw;
    background-image: url(../images/maru02.jpg);
    background-size:100% 100%;
    margin-left: 6%;
    margin-right: 4%;
}


.ch-box03 {
    width: 30%;
    height: 24vw;
    background-image: url(../images/maru03.jpg);
    background-size:100% 100%;
    margin-left: 5%;
    margin-right: 5%;
}


/* motreのアイコン */

 .img{
    width: 36%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 13%;
}

 .img img {
    width: 100%;
}



/* 円の上のテキスト */

.parent-box01 h4 {
     font-family: 'Courier New', Courier, monospace;
     font-size: 2.5vw;
     line-height: 2;
     margin-top: 5vw;
     text-align: center;
}

.parent-box01 p {
     font-family: 'Courier New', Courier, monospace;
     font-size: 1.2vw;
     line-height: 1.9;
     margin-top: 0.5vw;
     text-align: center;
     white-space: pre-wrap;
}

.parent-box01 a {
    display: block;
}


/* /////////マップ＋テキスト///////// */

.parent-box02 {
    display: flex;
    width: 100%;
    height: 40vw;
    margin-top: 7%; 
    background-color: #D9F6FE;
}

/* マップ */

.parent-box02 .box02-map {
    width: 40%;
}


.parent-box02 .box02-map img {
    width: 90%;
    height: 40vw;
}

/* テキスト */

.parent-box02 .box02-txet {
    width: 50%;
    margin-left: 10%;
}

.box02-txet h3 {
    white-space: pre-wrap;
    margin-bottom: 2vw;
    margin-top: 4vw;
    line-height: 2;
    font-size: 2.3vw;
}
 

.box02-txet p {
    width: 75%;
    font-size: 1.5vw;
    line-height: 2;
    text-align: justify;
}




/* //////////インフォメーション///////////// */

.info {
    width: 100%;
    height: 30vw; 
}

.info h4 {
    text-align: center;
    padding-top: 4vw;
    font-size: 1.8vw;
}


.info ul {
    width: 60%;
    margin-left: auto;
    margin-right: auto;
    margin-top: 2vw;
    text-decoration: none;
}

.info ul li {
    width: 100%;
    font-size: 1.5vw;
    line-height: 2.5;
    border-bottom: 0.5px dotted #202020;
    list-style-type: none;
}


.info ul li time {
    width: 30%;
    font-size: 1.5vw;
    line-height: 2.5;
    margin-left: 2vw;
    margin-right: 5vw;
}

/*  */



/* ///////////////フッター////////////// */

footer {
    width: 100%;
    height: 38vw;
    background-color:  #D9F6FE;
}


.footer-container {
    width: 70%;
    padding-top: 5vw;
    margin-left: auto;
    margin-right: auto;
}


.footer-container-top {
    display: flex;
    width: 100%;
    height: 10vw;

}


.footer-logobox {
    width: 40%;
}


.footer-logobox img {
    width: 100%;
}


.footer-txetbox {
    display: flex;
    width: 100%;
    margin-left: 10%;
}


.footer-txetbox .left  {
    width: 15%;
}


.footer-txetbox .center {
    width: 35%;
    margin-left: 9%;
    margin-right: 6%;
}

.footer-txetbox .right {
    width: 35%;
}

/*  */

.footer-txetbox ul {
    list-style-type: none;    
    text-decoration: none;
}



.footer-txetbox ul li{
    width: 100%;
}


.footer-txetbox ul li a{
    display: block;
    line-height: 2.2;
    text-decoration: none;
    color: #202020;
    font-size: 1.2vw;
    transition: 1s;
}


nav ul li a:hover{
    transition: 1s;
}



/*  */

.footer-container-bottom {
    display: flex;
    width: 100%;
    height: 35px;
    margin-top: 5vw;
    margin-bottom: 4vw;
    border-top: 0.4px dotted #202020;
    border-bottom: 0.4px dotted #202020;
}

.footer-container-bottom p:nth-of-type(1) {
    text-align: center;
    font-size: 1.5vw; 
    margin-left: 5vw;
    padding-top: 1vw;
    color: #202020;
}

.footer-container-bottom p:nth-of-type(2) {
    font-size: 2vw; 
    font-weight: 500;
    margin-left: auto;
    margin-right: auto;
    padding-top: 1vw;
    color: #202020;
}


.copy {
    width: 100%;
}

.copy {
    padding-top: 3%;
    padding-bottom: 3%;
    margin-top: 4%;
    font-size: 1.8vw;
    text-align: center;
    background-color: rgb(112, 201, 201);
    color: white;
}