@charset "UTF-8";

* {
    margin: 0;
    padding: 0;
}

body {
    background-attachment: fixed;
    background-size: cover;
    background-image: url(../images/background.jpg);
}

header {
    display: flex;
    align-items: center;
    width: 100%;
    background-color: rgb(219,237,240,0.4);
}

h1 {
    width: 10%;
    margin-top: -3.8vw;
    padding: 0 4vw;
}

h1 img {
    width: 100%;
    vertical-align: bottom;
}

h1:hover {
    transform: scale(1.3);
    transition: transform 0.5s ease;
}

nav {
    width: 30%;
    padding: 0 2vw;
    margin-left: auto;
}

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

nav ul li {
    width: calc(100%/3);
}

nav ul li a {
    display: block;
    text-align: center;
    text-decoration: none;
    color: #202020;    
    font-family: "ten-mincho-text", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.5vw;
}

nav ul li a:hover {
    color: #f9e950;
    transform: scale(1.3);
    transition: transform 0.5s ease;
}

/* スライドする要素 */
.slider-container {
    position: relative; /* 親要素を基準に絶対配置する */
    width: 100%;        /* コンテナ幅を100%に */
    height: 40vw;
    overflow: hidden;   /* はみ出す部分は非表示 */
}

.content {
    position: absolute; /* 重ねて配置 */
    inset: 0;           /* 親要素内にフルサイズ配置 */
    opacity: 0;         /* 初期は非表示 */
    background-size: cover; /* 画像をコンテナ全体に拡大 */
    animation: fadeAnime 12s linear infinite; /* 12秒でループ */
}

/* スライドの表示/非表示タイミング */
@keyframes fadeAnime {
  0%, 40%, 100% {
    opacity: 0; /* 非表示 */
  }
  15%, 25% {
    opacity: 1; /* 表示 */
  }
}

.content:nth-child(1) {
    background-image: url(../images/first01.JPG);
    animation-delay: 0s;
}
.content:nth-child(2) {
    background-image: url(../images/first02.JPG);
    animation-delay: 3s;
}
.content:nth-child(3) {
    background-image: url(../images/first03.JPG);
    animation-delay: 6s;
}
.content:nth-child(4) {
    background-image: url(../images/first04.JPG);
    animation-delay: 9s;
}

.content-Text-Box {
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    line-height: 1.7;
}

.content-Text {
    -webkit-text-orientation: upright;
    text-orientation: upright;
    position: absolute;
    top: 9vw;
    left: 70vw;
    font-family: "ten-mincho-text", serif;
    font-weight: 600;
    font-style: normal;
    font-size: 2.3vw;
    color: #303030;
    text-shadow: 0.1vw 0.1vw 0 #FFF, -0.1vw -0.1vw 0 #FFF,
                -0.1vw 0.1vw 0 #FFF, 0.1vw -0.1vw 0 #FFF,
                0px 0.1vw 0 #FFF,  0-0.1vw 0 #FFF,
                -0.1vw 0 0 #FFF, 0.1vw 0 0 #FFF;
}

.Text-row {
    position: absolute;
    top: 39vw;
    left: 8vw;
    line-height: 1.7;
    font-family: "ten-mincho-text", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.7vw;
    color: #303030;
    text-shadow: 0.1vw 0.1vw 0 #FFF, -0.1vw -0.1vw 0 #FFF,
                -0.1vw 0.1vw 0 #FFF, 0.1vw -0.1vw 0 #FFF,
                0px 0.1vw 0 #FFF,  0-0.1vw 0 #FFF,
                -0.1vw 0 0 #FFF, 0.1vw 0 0 #FFF;    
}

#about {
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
    padding: 1vw 6vw;
    border-radius: 25px;
    font-family: "ten-mincho-text", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.8vw;
    color: #202020;
    background-color: #f9e950;
}

main {
    width: 100%;
    margin-top: 3vw;
    margin-left: auto;
    margin-right: auto;
}

main section:nth-of-type(1) {
    display: flex;
    width: 90%;
    margin: 3vw auto;
}

.face {
    width: 30%;
}

.face img {
    width: 100%;
}

.face img :hover {
    transform: rotateY(360deg);
    transition: 2s
}


.profile {
    width: 70%;
    background-color: rgb(219,237,240,0.4);
}

.profile h2 {
    margin-top: 2vw;
    margin-bottom: 2vw;
    text-align: center;
    font-size: 2.5vw;
    color: #202020;
}

.profile p {
    margin: 2vw;
    text-align: center;
    
    line-height: 1.7;
    font-size: 1.4vw;
    color: #202020;
}

/* ーーーーーーーー自己紹介　ここまでーーーーーーーー */

#works {
    width: fit-content;
    margin-bottom: 2vw;
    margin-left: auto;
    margin-right: auto;
    padding: 1vw 6vw;
    border-radius: 25px;
    font-family: "ten-mincho-text", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.8vw;
    color: #202020;
    background-color: #f9e950;
}

.title {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
  background-color: rgb(219,237,240,0.8);
}

.title h2 {
  display: inline-block;
  padding-left: 100%;
  font-size: 2.5vw;
  color: #303030;
  animation: marquee-animation 8s linear infinite;
}

@keyframes marquee-animation {
  0% {
    transform: translateX(0%);
  }
  40% { 
    transform: translateX(-50%); 
} /* 40% の時点で一時停止 */
  50% { 
    transform: translateX(-50%); animation-play-state: paused; 
} /* 50% で一時停止 */
  60% { 
    transform: translateX(-50%); animation-play-state: running; 
} /* 60% で再開 */
  100% {
    transform: translateX(-100%);
  }
}

.usagi-box {
    display: flex;
    width: 100%;
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
    padding: 2vw 0;
    background: linear-gradient(-20deg, #f9e950 0%, #24daf3 100%);
}

.meishi-omote {
    width: 40%;
    margin-left: 7.5%;
    margin-right: 2.5%;
    background-color: rgb(219,237,240,0.4);
}

.meishi-omote h2 {
    margin: 0.5vw;
    text-align: center;
    font-size: 2.2vw;
    color: #202020;
}

.meishi-omote img {
    width: 100%;
    vertical-align: bottom;
    transition: all .3s ease-in-out;
}

.meishi-omote img:hover {
  box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
}

.meishi-omote p {
    margin: 1vw;
    text-align: center;    
    line-height: 1.7;
    font-size: 1.3vw;
    color: #202020;
}

.meishi-ura {
    width: 40%;
    margin-right: 7.5%;
    margin-left: 2.5%;
    background-color: rgb(219,237,240,0.4);
}

.meishi-ura h2 {
    margin: 0.5vw;
    text-align: center;
    font-size: 2.2vw;
    color: #202020;
}

.meishi-ura img {
    width: 100%;
    vertical-align: bottom;
    transition: all .3s ease-in-out;
}

.meishi-ura img:hover {
  box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
}

.meishi-ura p {
    margin: 1vw;
    text-align: center;   
    line-height: 1.7;
    font-size: 1.3vw;
    color: #202020;
}

.logo-box {
    display: flex;
    width: 100%;
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
    padding: 2vw 0;
    background: linear-gradient(-20deg, #f9e950 0%, #24daf3 100%);
}

.logo {
    width: 40%;
    margin-left: 7.5%;
    margin-right: 2.5%;
    background-color: rgb(219,237,240,0.4);
}

.logo h2 {
    margin: 0.5vw;
    text-align: center;
    font-size: 2.2vw;
    color: #202020;
}

.logo img {
    width: 100%;
    vertical-align: bottom;
    transition: all .3s ease-in-out;
}

.logo img:hover {
  box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
}

.logo p {
    margin: 1vw;
    text-align: center;
    
    line-height: 1.7;
    font-size: 1.3vw;
    color: #202020;
}

.june {
    width: 40%;
    margin-left: 2.5%;
    margin-right: 7.5%;
    background-color: rgb(219,237,240,0.4);
}

.june h2 {
    margin: 0.5vw;
    text-align: center;
    font-size: 2.2vw;
    color: #202020;
}

.june img {
    width: 100%;
    vertical-align: bottom;
    transition: all .3s ease-in-out;
}

.june img:hover {
  box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
}

.june p {
    margin: 1vw;
    text-align: center;    
    line-height: 1.7;
    font-size: 1.3vw;
    color: #202020;
}

.hanabi-father-box {
    display: flex;
    width: 100%;
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
    padding: 2vw 0;
    background: linear-gradient(-20deg, #f9e950 0%, #24daf3 100%);
}

.hanabi {
    width: 40%;
    margin-right: 2.5%;
    margin-left: 7.5%;
    background-color: rgb(219,237,240,0.4);
}

.hanabi h2 {
    margin: 0.5vw;
    text-align: center;
    font-size: 2.2vw;
    color: #202020;
}

.hanabi img {
    width: 100%;
    vertical-align: bottom;
    transition: all .3s ease-in-out;
}

.hanabi img:hover {
  box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
}

.hanabi p {
    margin: 1vw;
    text-align: center;   
    line-height: 1.7;
    font-size: 1.3vw;
    color: #202020;
}

.father {
    width: 40%;
    margin-right: 7.5%;
    margin-left: 2.5%;
    background-color: rgb(219,237,240,0.4);
}

.father h2 {
    margin: 0.5vw;
    text-align: center;
    font-size: 2.2vw;
    color: #202020;
}

.father img {
    width: 100%;
    vertical-align: bottom;
    transition: all .3s ease-in-out;
}

.father img:hover {
  box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
}

.father p {
    margin: 1vw;
    text-align: center;    
    line-height: 1.7;
    font-size: 1.3vw;
    color: #202020;
}

/* ーーーーーーーーillustrator　ここまでーーーーーーーー */

.dog-box {
    display: flex;
    width: 100%;
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
    padding: 2vw 0;
    background: linear-gradient(-20deg, #f9e950 0%, #24daf3 100%);
}

.dog-imgbox {
    width: 50%;
    margin-left: 4%;
    margin-right: 2%;
    vertical-align: bottom;
}

.dog-imgbox img {
    width: 100%;
    vertical-align: bottom;
    transition: all .3s ease-in-out;
}

.dog-imgbox img:hover {
  box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
}

.dog {
    width: 40%;
    margin-right: 4%;
    background-color: rgb(219,237,240,0.4);
}

.dog h2 {
    margin: 0.5vw;
    margin-bottom: 2vw;
    text-align: center;
    font-size: 2.2vw;
    color: #202020;
}

.dog p {
    margin: 1vw;
    text-align: center;   
    line-height: 1.7;
    font-size: 1.3vw;
    color: #202020;
}

.rusutsu-box {
    display: flex;
    width: 100%;
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
    padding: 2vw 0;
    background: linear-gradient(-20deg, #f9e950 0%, #24daf3 100%);
}

.rusutsu {
    width: 40%;
    margin-left: 4%;
    background-color: rgb(219,237,240,0.4);
}

.rusutsu h2 {
    margin-top: 0.5vw;
    margin-bottom: 2vw;
    text-align: center;
    font-size: 2.2vw;
    color: #202020;
}

.rusutsu p {
    margin: 1vw;
    text-align: center;    
    line-height: 1.7;
    font-size: 1.3vw;
    color: #202020;
}

.rusutsu-imgbox {
    width: 50%;
    margin-left: 2%;
    margin-right: 4%;
}

.rusutsu-imgbox img {
    width: 100%;
    vertical-align: bottom;
    transition: all .3s ease-in-out;
}

.rusutsu-imgbox img:hover {
  box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
}

.travel-goldmusk-box {
    display: flex;
    width: 100%;
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
    padding: 2vw 0;
    background: linear-gradient(-20deg, #f9e950 0%, #24daf3 100%);
}

.travel {
    width: 40%;
    margin-right: 2.5%;
    margin-left: 7.5%;
    background-color: rgb(219,237,240,0.4);
}

.travel h2 {
    margin: 0.5vw;
    text-align: center;
    font-size: 2.2vw;
    color: #202020;
}

.travel img {
    width: 100%;
    vertical-align: bottom;
    transition: all .3s ease-in-out;
}

.travel img:hover {
  box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
}

.travel p {
    margin: 1vw;
    text-align: center;    
    line-height: 1.7;
    font-size: 1.3vw;
    color: #202020;
}

.goldmusk {
    width: 40%;
    margin-right: 7.5%;
    margin-left: 2.5%;
    background-color: rgb(219,237,240,0.4);
}

.goldmusk h2 {
    margin: 0.5vw;
    text-align: center;
    font-size: 2.2vw;
    color: #202020;
}

.goldmusk img {
    width: 100%;
    vertical-align: bottom;
    transition: all .3s ease-in-out;
}

.goldmusk img:hover {
  box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
}

.goldmusk p {
    margin: 1vw;
    text-align: center;    
    line-height: 1.7;
    font-size: 1.3vw;
    color: #202020;
}

/* ーーーーーーーーPhotoshop　ここまでーーーーーーーー */

.shinecity-box {
    display: flex;
    width: 100%;
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
    padding-top: 2vw;
    background: linear-gradient(-20deg, #f9e950 0%, #24daf3 100%);
}

.shinecity_mae {
    width: 40%;
    margin-right: 2.5%;
    margin-left: 7.5%;
    background-color: rgb(219,237,240,0.4);
}

.shinecity_mae h2 {
    margin: 0.5vw;
    text-align: center;
    font-size: 2.2vw;
    color: #202020;
}

.shinecity_mae img {
    width: 100%;
    vertical-align: bottom;
    transition: all .3s ease-in-out;
}

.shinecity_mae img:hover {
  box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
}

.shinecity_mae p {
    margin: 1vw;
    text-align: center;    
    line-height: 1.7;
    font-size: 1.3vw;
    color: #202020;
}

.shinecity_ato {
    width: 40%;
    margin-right: 7.5%;
    margin-left: 2.5%;
    background-color: rgb(219,237,240,0.4);
}

.shinecity_ato h2 {
    margin: 0.5vw;
    text-align: center;
    font-size: 2.2vw;
    color: #202020;
}

.shinecity_ato img {
    width: 100%;
    vertical-align: bottom;
    transition: all .3s ease-in-out;
}

.shinecity_ato img:hover {
  box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
}

.shinecity_ato p {
    margin: 1vw;
    text-align: center;   
    line-height: 1.7;
    font-size: 1.3vw;
    color: #202020;
}

.sea-box {
    display: flex;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    background: linear-gradient(-20deg, #f9e950 0%, #24daf3 100%);
}

.sea_mae {
    width: 40%;
    margin-right: 2.5%;
    margin-left: 7.5%;
    background-color: rgb(219,237,240,0.4);
}

.sea_mae img {
    width: 100%;
    vertical-align: bottom;
    transition: all .3s ease-in-out;
}

.sea_mae img:hover {
  box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
}

.sea_mae p {
    margin: 1vw;
    text-align: center;   
    line-height: 1.7;
    font-size: 1.3vw;
    color: #202020;
}

.sea_ato {
    width: 40%;
    margin-right: 7.5%;
    margin-left: 2.5%;
    background-color: rgb(219,237,240,0.4);
}

.sea_ato img {
    width: 100%;
    vertical-align: bottom;
    transition: all .3s ease-in-out;
}

.sea_ato img:hover {
  box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
}

.sea_ato p {
    margin: 1vw;
    text-align: center;   
    line-height: 1.7;
    font-size: 1.3vw;
    color: #202020;
}

.station-box {
    display: flex;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 2%;
    padding-bottom: 2vw;
    background: linear-gradient(-20deg, #f9e950 0%, #24daf3 100%);
}

.station_mae {
    width: 40%;
    margin-right: 2.5%;
    margin-left: 7.5%;
    background-color: rgb(219,237,240,0.4);
}

.station_mae img {
    width: 100%;
    vertical-align: bottom;
    transition: all .3s ease-in-out;
}

.station_mae img:hover {
  box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
}

.station_mae p {
    margin: 1vw;
    text-align: center;    
    line-height: 1.7;
    font-size: 1.3vw;
    color: #202020;

}

.station_ato {
    width: 40%;
    margin-right: 7.5%;
    margin-left: 2.5%;
    background-color: rgb(219,237,240,0.4);
}

.station_ato img {
    width: 100%;
    vertical-align: bottom;
    transition: all .3s ease-in-out;
}

.station_ato img:hover {
  box-shadow: 0px 0px 15px 2px rgba(0, 0, 0, 0.2);
  transform: scale(0.9);
}

.station_ato p {
    margin: 1vw;
    text-align: center;    
    line-height: 1.7;
    font-size: 1.3vw;
    color: #202020;

}

/* ーーーーーーーーレタッチ　ここまでーーーーーーーー */

.jugoya_hp-box {
    display: flex;
    width: 100%;
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
    padding: 2vw 0;
    background: linear-gradient(-20deg, #f9e950 0%, #24daf3 100%);
}

.jugoya_hp-imgbox {
    width: 55%;
    margin-left: 2%;
    margin-right: 2%;
    overflow: hidden;
}

.jugoya_hp-imgbox a{
    display: block;
    transition: all .4s ease-in-out;
    position: relative;
}
.jugoya_hp-imgbox a::before{
    content: "Read More";
    display: block;
    width: 100%;
    height: 100%;
    background: #dc5a45;
    font-size: 4.0vw;
    font-weight: bold;
    color: #FFF;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all .4s ease-in-out;
}

.jugoya_hp-imgbox a:hover{
    transform: scale(0.9);
}
.jugoya_hp-imgbox a:hover::before{
    opacity: .8;
}

.jugoya_hp-imgbox img {
    width: 100%;
    vertical-align: bottom;
}

.jugoya_hp {
    width: 39%;
    margin-right: 2%;
    background-color: rgb(219,237,240,0.4);
}

.jugoya_hp h2 {
    margin-top: 0.5vw;
    margin-bottom: 2vw;
    text-align: center;
    font-size: 2.2vw;
    color: #202020;

}

.jugoya_hp p {
    margin: 1vw;
    text-align: center;   
    line-height: 1.7;
    font-size: 1.3vw;
    color: #202020;

}

.koganeyu-box {
    display: flex;
    width: 100%;
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5%;
    padding: 2vw 0;
    background: linear-gradient(-20deg, #f9e950 0%, #24daf3 100%);
}

.koganeyu {
    width: 39%;
    margin-left: 2%;
    background-color: rgb(219,237,240,0.4);
}

.koganeyu h2 {
    margin-top: 0.5vw;
    margin-bottom: 2vw;
    text-align: center;
    font-size: 2.2vw;
    color: #202020;

}

.koganeyu p {
    margin: 1vw;
    text-align: center;    
    line-height: 1.7;
    font-size: 1.3vw;
    color: #202020;

}

.koganeyu-imgbox {
    width: 55%;
    margin-left: 2%;
    margin-right: 2%;
    overflow: hidden;
}

.koganeyu-imgbox a{
    display: block;
    transition: all .4s ease-in-out;
    position: relative;
}
.koganeyu-imgbox a::before{
    content: "Read More";
    display: block;
    width: 100%;
    height: 100%;
    background: #dc5a45;
    font-size: 4.0vw;
    font-weight: bold;
    color: #FFF;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all .4s ease-in-out;
}

.koganeyu-imgbox a:hover{
    transform: scale(0.9);
}
.koganeyu-imgbox a:hover::before{
    opacity: .8;
}

.koganeyu-imgbox img {
    width: 100%;
    margin-bottom: 2%;
    vertical-align: bottom;
}

.aquarium-box {
    display: flex;
    width: 100%;
    margin-top: 2%;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 1%;
    padding: 2vw 0;
    background: linear-gradient(-20deg, #f9e950 0%, #24daf3 100%);
}

.aquarium-imgbox {
    width: 55%;
    margin-left: 2%;
    margin-right: 2%;
    overflow: hidden;
}

.aquarium-imgbox a{
    display: block;
    transition: all .4s ease-in-out;
    position: relative;
}

.aquarium-imgbox a::before{
    content: "Read More";
    display: block;
    width: 100%;
    height: 100%;
    background: #dc5a45;
    font-size: 4.0vw;
    font-weight: bold;
    color: #FFF;
    position: absolute;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: all .4s ease-in-out;
}

.aquarium-imgbox a:hover{
    transform: scale(0.9);
}

.aquarium-imgbox a:hover::before{
    opacity: .8;
}

.aquarium-imgbox img {
    width: 100%;
    margin-bottom: 2%;
    vertical-align: bottom;
}

.aquarium {
    width: 39%;
    margin-right: 2%;
    background-color: rgb(219,237,240,0.4);
}

.aquarium h2 {
    margin-top: 0.5vw;
    margin-bottom: 2vw;
    text-align: center;
    font-size: 2.2vw;
    color: #202020;

}

.aquarium p {
    margin: 1vw;
    text-align: center;
    
    line-height: 1.7;
    font-size: 1.3vw;
    color: #202020;

}

.closing {
    width: 100%;
    padding: 2vw 0 0 0;
}

.closing p {
    text-align: center;
    font-family: "ten-mincho-text", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.8vw;
    color: #202020;
}

/* コーディング制作物　ここまで */

/* ↓上に戻るボタン↓ */

.page {
    position: relative;
    top: -3.7vw;
    width: 90%;
    text-align: right;
}

#pagetop a {
    display: block;
    text-decoration: none;
}

.page img {
    width: 5%;
}

/* ↑ここまで　上に戻るボタン */

.form {
    width: 100%;
    padding: 2vw 0 1vw 0;
    background-color: rgb(140,140,170);
}

#contact {
    width: fit-content;
    margin-bottom: 2vw;
    margin-left: auto;
    margin-right: auto;
    padding: 1vw 6vw;
    border-radius: 25px;
    font-family: "ten-mincho-text", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.8vw;
    color: #202020;
    background-color: #f9e950;
}

.question {
    text-align: center;
    margin: 2vw 0;
}

form {
    width: 100%;
    text-align: center;
}

input,textarea {
	margin-bottom: 1vw;
}

input[type="text"] {
    width: 20vw;
}

input[type="email"] {
    width: 20vw;
}

textarea {
	width: 32vw;
	height: 15vw;
	overflow-y: scroll;
}

.copy {
    margin: 2vw 0;
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 3;
    text-align: center;
    color: #000000;
    font-size: 1.2vw;
}

.sns-box {
    width: 5%;
    margin-left: 1%;
}

.sns-box a {
    line-height: 3;
    text-align: center;
    color: #000000;
}

.sns-box a i {
    font-size: 2vw;
}

/* footer　ここまで */