/* 全画面対応 */

/* 横スクロールチェック用*/
/* * {
    outline: 1px solid magenta;
} */


body{
    color: black;
    font-size: 12px;
    line-height: 1.5;
    font-family: Arial, Helvetica, sans-serif;
}

img{
    vertical-align: bottom;
    }
    
/* ハンバーガーメニュー */
.btnHamburger{
    position: fixed;
    top: 40px;
    right: 5px;
    width: 30px;
    height: 20px;
    cursor: pointer;
    z-index: 3;
}

.btnHamburger .line {
    position: absolute;
    top: 0;
    left: -10px;
    display: block;
    width: 30px; 
    height: 1px; 
    color: #000000;
    background:#000000;
    transition: 0.3s;   
}

.btnHamburger .line_01 { top: 0; }
.btnHamburger .line_02 { top: 8px; }
.btnHamburger .line_03 { top: 16px; }

/* ＃coverlayerクリック前 */
#coverlayer{
    position:fixed;
    top:0;
    right:0;
    bottom: 0;
    width:1px;
    background: rgb(189, 189, 189);
    opacity: 0;
    transition: 0.5s;
    z-index: 3;
}
nav{
    position:fixed;
    width:100%;
    text-align: left;
    top:60px;
    right:-100%;
    opacity:0;
    transition: 0.5s;
    z-index: 3;
}

/* .bubble{
    display: none;
}
 */
nav ul{
    text-align: left;
}

nav ul li a{
    font-weight: bold;
    text-decoration: none;
    color: rgb(0, 0, 0);
    font-size: 20px;
}

#nav1{
    line-height: 1;
}
#nav2{
    line-height: 3;
}

#nav3{
    line-height: 0;
}

#nav3 span{
    margin-bottom: 10%;
    font-size: 15px;
    display: block;
    line-height: 0.5;
    color: #fff;
}

#nav4{
    line-height: 0;
}

#nav4 span{
    margin-bottom: 10%;
    font-size: 15px;
    display: block;
    line-height: 0.5;
    color: #fff;
}

#sns{
    display: flex;
    height: auto;
    transform: translateX(-18%);
}

#sns a{
    height: 30px;
    width: 30px;
    margin: 0% 6%;
}

/* ハンバーガーメニュのクリック後 */
.btnHamburger.is-active .line_01 {
top: 8px;

-webkit-transform: rotate(45deg);
transform: rotate(45deg);
background: #000000;
}

.btnHamburger.is-active .line_02 {
opacity: 0;
}

.btnHamburger.is-active .line_03 {
top: 8px; 
-webkit-transform: rotate(135deg);
transform: rotate(135deg);
background: #000000;
}
/* ＃coverlayerクリック後 */
#coverlayer.is-active{
    width:100%;
    opacity: 0.8;
}

/* navクリック後*/
nav.is-active{
    right:-40%; 
    opacity: 1;
}
.bx-pager.bx-default-pager{
    display: none;
}

header{
    height: 55vh;
    background: #69D2FF;
    background-image: url(../images/top-main_s.png);
    background-size: cover;
    background-repeat: no-repeat;
}


.fade_off2 {
    transform: translatex(-100%);
    /* transition: 1s; */
    transition: 4s;
}

.fade_on2 {
    opacity: 1;
    transform: translatex(0);
}

/* SP版 */
#wrapper{
    width: 100%;
    overflow-x: hidden;
}

.sptb-none{
    display: none;
}

a{
position: relative;
}
  

h1{
    text-align: center;
    transform: translateY(30%);
}

h1 img{ 
    width: 90%;
}

h2{
    font-size: 25px;
    font-weight: bolder;
}
h2 span{
    font-size: 40px;
    color: #F56D6D;
}

.fade_off {/* 太陽と雲の動きの調整 */
    transform: translateY(100px);
    transition: 1s;
}

.fade_on {
    opacity: 1;
    transform: translateY(0);
}

#about{
    background: #69D2FF;
    text-align: center;
    position: relative;
}

#about h2{
    left: 20%;
    position: relative;
}

#about-logo{
    position: relative;
    left: 20%;
}

#about-logo img{
    width: 45%;
}

#sun-about{
    position: absolute;
    z-index: 2;
    top: -15%;
    right: 50%;
}

#sun-about img{
    width: 65%;
}

#cloud-about{
    position: absolute;
    top: -10%;
    left: -50%;
}

#cloud-about img{
    width: 30%;
    z-index: -1;
}

#cloud-about2 {
    display: none;
}

#about p{
    width: 51%;
    transform: translateX(90%);
}

#pic1-about{
    position: absolute;
    left: -35%;
    top: 50%;
}

#pic1-about img{
    width: 40%;
}

#more-about{
    position: relative;
    left: 30%;
    padding-top: 10%;
    display: none;
    /* ↑aboutセクションのmoreボタン非表示中 */
}

#vision{
    position:relative;
}

/* #vision figure{
    text-align: center;
} */

.more a{
    font-size: 20px;
    text-decoration: none;
    color: black;
    font-weight: bold;
}

.more img{
    vertical-align: middle;
}

#sun-holding{
    z-index: 2;
    position: relative;
    transform: rotate(-5deg)translateY(34%);
}

#sun-holding img{
    width: 25%;
}

#background-arch1{
    transform: translateX(-17%);
}

#background-arch1 img{
    width: 700px;
}

#savesmile-sptb{
    position: relative;
    z-index: 2;
    left: 22%;
}

.savesmile{
    width: 50%;
}

#sun-scope{
    position: relative;   
    left: 35%;
}

#sun-scope img{
    width: 30%;
}

#vision h2{
    transform: translateX(33%);
}

#cloud-vision1{
    position: absolute;
    top: 28%;
    left: 14%;
}

#cloud-vision1 img{
    width: 20%;
}

#vision p{
    width: 60%;
    transform: translateX(30%);
}

#pic-vision{
    margin-top:5%;
    position: relative;
    left: 20%;
}

#pic-vision img{
    width: 50%;
}

#more-vision{
    line-height: 5;
    position: relative;
    left: 50%;
    display: none;
    /* ↑visionセクションのmoreボタン非表示中 */
}

#sun-cry {
    position: absolute;
    transform: rotate(-12deg);
    top: 78%;
}

#sun-cry img{
    width: 25%;
}

#background-arch2{
    transform: translateX(-20%);
    margin: -1%;
}

#background-arch2 img{
    width: 140%;
}

#activity{
    background: #9BEDFF;
    text-align: center;
    position: relative;
}

#sun-hiro-activity{
    position: relative;
    z-index: 2;
    left: -26%;
    margin: 5% 0;
}

#activity p{
    padding: 5% 0;
    width: 60%;
    position: relative;
    left: 22%;
}



#sun-hiro-activity img{
    width: 40%;
}

#cloud-activity1{
    position: absolute;
    top: 16%;
    left: -15%;
}

#cloud-activity1 img{
    width: 35%;
}

#international ul{
    display:flex;
}

#international ul img{
    width: 50vw;
}


#activity h3{
    line-height: 2.5;
    font-size: 30px;
    font-weight: bold;
    text-align: left;
    position: relative;
    right: -5%;
}

#activity h3 img{
    width: 10%;
    vertical-align: baseline;
    transform: rotate(10deg);
}

#cloud-international1{
    position: relative;
    left: 20%;
    margin-bottom: 8%;
}

#cloud-international1 img{
    width: 30%;
}

#domestic ul{
    display:flex;
}

#more-international{
    position: relative;
    left: 20%;
}

#more-domestic{
    line-height: 3;
    position: relative;
    left: 20%;
}

#domestic img{
    width: 50vw;
}

#cloud-domestic1{
    position: relative;
}

#cloud-domestic1 img{
    width: 20%;
}

footer{
    background: #9BEDFF;
    background-image:url("../images/background-arch3.svg");
    background-size:auto;
    background-repeat: no-repeat;
    background-position-x: -10px;
    height: 18.5vh;
}

#flex-footer{
    display: flex;
}


footer #logo-footer img{
    width: 40%;
}

footer #sun-notice {
    transform: translate(-312%, 22%);
}

footer #sun-notice img{
    width: 50%;
}

#footer-content{
    transform: translate(4%, 50%);
}

footer small{
    font-size: 8px;
}



/* TB版 */
@media screen and (min-width:600px){


header{
    height: 68vh;
}

h2{
    font-size: 40px;
}

#about-logo img {
    width: 25%;
}

#adjust1{
    margin-bottom: -7%;
}

p{/* SP以降のpのサイズ */
    font-size: 17px;
    text-align: left;
}

#sns {
    transform: translateX(-13%);
}

#about p {
    width: 40%;
    transform: translateX(130%);
}

#pic1-about {
    top: 45%;
    left: 0%;
}

#pic1-about img {
    width: 59%;
}

#sun-holding {
    transform: rotate(5deg) translate(35%, 35%);
}

#background-arch1 img {
    width: 138%;
}

#savesmile-sptb{
    left: 28%;
}

#savesmile-sptb img{
    width: 40%;
}

#sun-scope {
    left: 37%;
}

#sun-scope img {
    width: 24%;
}

#vision h2 {
    transform: translateX(37%);
}

#cloud-vision1 {
    top: 20%;
    left: 5%;
}

#cloud-vision1 img {
    width: 40%;
}

#vision p {
    width: 59%;
}


#sun-cry {
    position: relative;
    transform: rotate(-12deg) translate(-35%, -20%);
    z-index: 2;
    left: 25%;
    width: 50%;
}

#background-arch1{
    margin: -1%;
}

#background-arch2 img{
    width: 140%;
}


#activity h3 {
    margin-top: 6%;
    text-align: center;
}

#activity p {
    position: relative;
    width: 36%;
    margin-bottom: 21%;
    left: 32%;
}


#sun-hiro-activity {
    position: absolute;
    top: 4%;
}

#sun-hiro-activity img {
    width: 25%;
}


#cloud-activity1 {
    top: 9%;
    left: -35%;
}

#cloud-activity1 img {
    width: 25%;
}

#international p{
    margin-bottom: 0%;
}

#domestic p{
    margin-bottom: 0%;
}


footer{
    background-position-x: 0px;
    height: 18vh;
    background-image: url(../images/background-arch3_tb.svg);
}


#flex-footer {
    width: 80%;
    margin-bottom: -1s%;
}

#footer-content {
    transform: translate(3%, 58%);
}

}


/* PC版 */
@media screen and (min-width:960px){


.pc-none{
    display: none;
    
}

.sptb-none{
    display: block;
}

#international-sptb{
    visibility:hidden;
}

#domestic-sptb{
    visibility:hidden;
}

a:after {
    content: "";
    position: absolute;
    top: 0em;
    left: -37px;
    display: inline;
    pointer-events: none;
    width: 40px;
    height: 30px;
} 

a:hover:after{
background: url(../images/bubble1_s.png); /* 表示する画像 */
background-size: contain; 
background-repeat: no-repeat;
background-position: center top;
}   

.bubble:hover {
    display: flex;
}


.btnHamburger{
    display: none;
}

header {
    height: 80vh;
    background-position: right 0% bottom 70%;
    background-size: auto;
    background-image: url(../images/top-main_m.png);
}

header h1{
    transform: translate(-32%, 0%);
}

h1 img {
    width: 30%;
}

nav{
    width: 20%;
    text-align: center;
    top: 25%;
    right: 75%;
    opacity: 1;
}

#sns{
    transform: translate(-6%, 30%);
}

nav ul li {
    line-height: 2.5;
}

nav ul li a{
    font-size: 25px;
}

.fade_off {/* 太陽と雲の動きの調整 */
    transform: translateY(-200px);
    transition: 1s;
}

.fade_on {
    opacity: 1;
    transform: translateY(0);
}

#cloud-about {
    position: absolute;
    top: 10%;
    left:-30%;
}

#cloud-about img{
    width: 20%;
}

#cloud-about2 {
    display: flex;
    position: absolute;
    top:45%;
    left: 80%;
}


#cloud-about2 img{
    width: 100%;
}

#about{
    background-image: url(../images/circle-white.svg);
    background-repeat: no-repeat;
    background-size: 50%;
    background-position-x: 33%;
    padding-bottom: 30%;
}

#sun-about {
    top: 0%;
    left: -22%;
}

#sun-about img {
    width: 20%;
}

#adjust1{
    margin-bottom: 0%;
}

#about h2 {
    padding-top: 2%;
    left: -10%;
}

#about-logo {
    position: relative;
    left: -10%;
    line-height: 6;
}

#about-logo img {
    width: 10%;
}

#about p {
    position: relative;
    width: 30%;
    left: -12%;
    padding-top: 4%;
}

#for-absolute-about {
    overflow-x: initial;
}

#pic1-about {
    top: 56%;
    left: 8%;
}

#pic1-about img {
    width: 80%;
}

#pic2-about {
    position: absolute;
    top: 10%;
    left: 55%;
}

#pic2-about img {
    width: 75%;
}

#more-about {
    position: absolute;
    top: 41%;
    left: 45%;
}

#vision{
    background: #69D2FF;
    background-image: url(../images/circle-white.svg);
    background-repeat: no-repeat;
    background-size: 50%;
    background-position-x: 88%;
}

#sun-scope {
    /* transform: translate(-18%, 10%); */
    z-index: 2;
    position: relative;
}

#sun-scope img {
    width: 15%;
}

#cloud-vision1 {
    transform: translate(0%, -77%);
}

#sun-holding {
    transform: rotate(21deg);
    position: absolute;
    left: 54%;
    top: 94%;
}

#savesmile_pc img{
    width: 15%;
}

#savesmile_pc {
    position: absolute;
    top: 12%;
    left: 59%;   
}

#savesmile_pc img{
    width: 60%;
}

#vision h2 {
    transform: translate(64%, -150%);
}

#vision p {
    width: 33%;
    position: relative;
    left: 44%;
}

#pic-vision {
    position: absolute;
    top: 50%;
    left: 43%;
    z-index: 2;
}

#pic-vision img {
    width: 60%;
}

#more-vision {
    position: absolute;
    top: 40%;
    left: 75%;
}

#cloud-vision2{
    position: relative;
    top: 0%;
    left: 80%;
}

#cloud-vision2 img{
    width:20%;
}

#sun-cry {
    transform: rotate(-6deg) translate(0%, 140%)
}


#background-arch2 {
    transform: translate(-20%, 86%);
}

#activity{
    padding-bottom: 15%;
    background-image: url(../images/circle-blue.svg);
    background-size: 75%;
    background-repeat: no-repeat;
    background-position: 120% 0%;
}

#activity h2{
    transform: translate(-12%, -130%);
}

#sun-hiro-activity {
    top: 0%;
    left: -3%;
}

#sun-hiro-activity img {
    width: 30%;
}

#cloud-activity1 {
    position: absolute;
    top: 25%;
}

#cloud-activity1 img {
    width: 20%;
}

#activity h3 {
    text-align: left;
    color: #fff;
}

#activity h3 img {
    display: none;
}

#international ul img {
    width: 15vw;
}

#domestic h3 {
    position: absolute;
    top: 50%;
    right: 15%;
}

#domestic p{
    position: absolute;
    color: #fff;
    top: 56%;
    left: 66%;
    width: 25%;
}

#domestic img {
    width: 15vw;
}

#line1-1{
    display: flex;
    position: absolute;
    top: 10%;
    left: 65%;
}
#line1-2{
    display: flex;
    position: absolute;
    top: 18%;
    left: 50%;
}

#international p {
    width: 25%;
    color: #fff;
    position: absolute;
    top: 9%;
    left: 38%;
}


#international h3 {
    position: absolute;
    top: 3%;
    left: 42%;
}

#cloud-international1 {
    position: absolute;
    top: 45%;
    left: 56%;
}

#more-international {
    position: absolute;
    top: 31%;
    left: 82%;
}

#domestic{
    margin-top: 65%;
    padding-bottom: 60%;
    background-image: url(../images/circle-orange.svg);
    background-repeat: no-repeat;
    background-size: contain;
    background-position-x: 78%;
}

#line2-1 {
    display: flex;
    position: absolute;
    top: 56%;
    left: 33%;
    list-style: none;
}

#line2-2 {
    display: flex;
    position: absolute;
    top: 64%;
    left: 33%;
    list-style: none;
}

#more-domestic {
    line-height: 0;
    position: absolute;
    top: 75%;
    left: 68%;
}

footer{
    padding-top: 10%;
    background-image: url(../images/background-arch4.svg);
}

#footer-content {
    transform: translate(25%, -50%);
}

#flex-footer {
    margin-bottom: -3%;
    width: 100%;
}

footer #sun-notice {
    transform: translate(-300%, 17%);
}

footer small{
    font-size: 10px;
    transform: translate(97px, 18px);
    display: inline-block;
}
}

@media screen and (min-width:1400px){

p{
    font-size: 20px;
}

#about p {
    padding-top: 7%;
}

#savesmile_pc{
    top: 17%;
    left: 60%;
}
}