@charset "UTF-8";

/*-----------------------------------------------------*/
/* PC用 */
/*-----------------------------------------------------*/
@media only screen and (min-width: 1181px) {

.container{
    width: 80%;
    margin: 0 auto;
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
}

.header{
    width: 100%;
    display: flex;
}

.header1{
    width: 30%;
    padding-left: 10%;
    padding-top: 40px;
}

.header1 img{
    width: 100px;
}

.header2{
    width: 70%;
    margin-left: 500px;
    padding-top: 100px;
}

.header2 ul{
    display: flex;
    justify-content: space-around;

}

.header2 li{
    list-style: none;
}

.header2 a{
    text-decoration-line: none;
    color: black;
}

.header2 a:hover{
    color: gray;
}

.header2 img{
    width: 25px;
}

.top1{
    width: 100%;
    margin-top: 10px;
}

.top1 img{
    width: 100%;
}

.title1{
    width: 100%;
    text-align: center;
}

.title1 h1{
    font-size: 36px;
    padding-top: 10%;
}

.title1 p{
    font-size: 16px;
}

.title1 {
    opacity: 0; /* 初めは非表示 */
    transform: translateY(30px); /* 30px下からスライド */
    transition: opacity 1.5s ease-out, transform 1.5s ease-out; 
}

/* スクロールで表示されると適用 */
.title1.show {
    opacity: 1; /* 透明度を1にして表示 */
    transform: translateY(0); /* 元の位置に戻す */
}

.top2{
    width: 100%;
    display: flex;
}


.image-container {
	width: 50%;
    display: flex;
    gap: 20px; /* 画像の間隔 */
	padding-left: 10%;
	margin-top: 70px;
}

.image-container img {
    opacity: 0;
	width: 200px;
    transform: translateY(30px); /* 下から少し持ち上げる */
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

/* 順番に表示させるための遅延 */
.image-container img:nth-child(1) {
    transition-delay: 0.5s;
}

.image-container img:nth-child(2) {
    transition-delay: 0.8s;
}

.image-container img.show {
    opacity: 1;
    transform: translateY(0);
}

.message{
    width:40%;
    margin-top: 20px;
    padding-top: 50px;
    text-align: center;
}

.message1{
    width: 100%;
    padding-bottom: 20px;
}

.message1 p{
    font-size: 13px;
}

.message2{
    width: 100%;
}

.message2 p{
    font-size: 18px;
    line-height: 1.7;
}

.message3{
    width: 100%;
}

.message3 p{
    font-size: 13px;
}

.message {
    opacity: 0; /* 最初は非表示 */
    transform: translateX(50px); /* 右からスライド */
    transition: opacity 2s ease-out 0.5s, transform 2s ease-out 0.5s;
}

/* スクロール時に適用されるクラス */
.message.show {
    opacity: 1; /* 透明度を1にして表示 */
    transform: translateX(0); /* 元の位置に戻す */
}



.title2{
    width: 100%;
    text-align: center;
    padding-top: 15%;
    padding-bottom: 20px;
}

.title2 h2{
    font-size: 36px;
}

.animated-line {
    width: 0; /* 最初は見えない */
    height: 1px;
    background-color: black;
    transition: width 1s ease-out;
    margin-bottom: 5%;
}

/* JavaScriptでクラスを追加 */
.line-show {
    width: 80%; /* 伸びる */
    margin-left: 10%;
}

.menu{
    width: 100%;
}

.menu img{
    width: 200px;
}

.menu li{
    list-style: none;
    text-align: center;
}

.menu ul{
    display: flex;
    gap: 40px;

}

.menu1{
    width: 100%;
    padding-left: 120px;
}

.menu2{
    width: 100%;
    margin-top: 5%;
    padding-left: 120px;
}

.menu1 li, .menu2 li {
    transition: transform 0.3s ease-in-out; /* 変形のスムーズな遷移 */
}

.menu1 li:hover, .menu2 li:hover {
    transform: scale(1.1); /* カーソルを合わせたときに1.1倍に拡大 */
}

/* 画像を囲む枠線やシャドウが欲しい場合 */
.menu1 li img, .menu2 li img {
    transition: transform 0.3s ease-in-out; /* 画像のアニメーション */
}

.menu1 li:hover img, .menu2 li:hover img {
    transform: scale(1.1); /* 画像を少し拡大 */
}

.title3{
    width: 100%;
    text-align: center;
    padding-top: 15%;
    padding-bottom: 20px;
}

.title3 h2{
    font-size: 36px;
}

.about{
    width: 100%;
    display: flex;
}

.text{
    width: 100%;
    text-align: center;
    padding-top: 10%;
    padding-left: 10%;
}

.text1{
    width: 100%;
    font-size: 18px;
    padding-top: 20px;
}

.text2{
    width: 100%;
    font-size: 13px;
    padding-top: 20px;
}

.text {
    opacity: 0; /* 初期状態は透明 */
    transform: translateX(-100px); /* 左から開始 */
    transition: opacity 1.5s ease 0.5s, transform 1.5s ease-out 0.5s; /* アニメーション */
}

.text.visible {
    opacity: 2; /* 完全に表示 */
    transform: translateX(0); /* 元の位置に戻す */
}

.about1{
    width: 70%;
}

.about1 img{
    width: 300px;
}

/*==================================================
スライダーのためのcss
===================================*/
.slider{
    margin-top: 10%;
}

.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 10px;/*スライド左右の余白調整*/
}

.title4{
    width: 100%;
    font-size: 24px;
}

.access1{
    width: 100%;
    text-align: center;
    padding-top: 15%;
    padding-bottom: 20px;
}

.access1 h2{
    font-size: 36px;
}

.access{
    width: 100%;
    display: flex;
}

.access2{
    width: 50%;
    margin-left: 10%;
}

.fotter{
    width: 100%;
}

.fotter1{
    width: 50%;
    padding-top: 100px;
    margin-left: 25%;
    margin-top: 5%;
}

.fotter1 ul{
    display: flex;
    justify-content: space-around;

}

.fotter1 li{
    list-style: none;
}

.fotter1 a{
    text-decoration-line: none;
    color: black;
}

.fotter1 a:hover{
    color: gray;
}

.fotter1 img{
    width: 25px;
}


.copy{
    width: 100%;
    text-align: center;
    margin-top: 5%;
    margin-bottom: 2%;
}
}





























/*-----------------------------------------------------*/
/* タブレット用のCSS */
/*-----------------------------------------------------*/
@media only screen and (min-width:600px) and (max-width:1180px) {
.container{
    width: 80%;
    margin: 0 auto;
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
}

.header{
    width: 100%;
    display: flex;
}

.header1{
    width: 30%;
    padding-left: 10%;
    padding-top: 40px;
}

.header1 img{
    width: 100px;
}

.header2{
    width: 70%;
    margin-left: 500px;
    padding-top: 100px;
}

.header2 ul{
    display: flex;
    justify-content: space-around;

}

.header2 li{
    list-style: none;
}

.header2 a{
    text-decoration-line: none;
    color: black;
}

.header2 a:hover{
    color: gray;
}

.header2 img{
    width: 25px;
}

.top1{
    width: 100%;
    margin-top: 10px;
}

.top1 img{
    width: 100%;
}

.title1{
    width: 100%;
    text-align: center;
}

.title1 h1{
    font-size: 36px;
    padding-top: 10%;
}

.title1 p{
    font-size: 16px;
}

.title1 {
    opacity: 0; /* 初めは非表示 */
    transform: translateY(30px); /* 30px下からスライド */
    transition: opacity 1.5s ease-out, transform 1.5s ease-out; 
}

/* スクロールで表示されると適用 */
.title1.show {
    opacity: 1; /* 透明度を1にして表示 */
    transform: translateY(0); /* 元の位置に戻す */
}

.top2{
    width: 100%;
    display: flex;
}


.image-container {
	width: 50%;
    display: flex;
    gap: 20px; /* 画像の間隔 */
	padding-left: 10%;
	margin-top: 70px;
}

.image-container img {
    opacity: 0;
	width: 200px;
    transform: translateY(30px); /* 下から少し持ち上げる */
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

/* 順番に表示させるための遅延 */
.image-container img:nth-child(1) {
    transition-delay: 0.5s;
}

.image-container img:nth-child(2) {
    transition-delay: 0.8s;
}

.image-container img.show {
    opacity: 1;
    transform: translateY(0);
}

.message{
    width:40%;
    margin-top: 20px;
    padding-top: 60px;
    text-align: center;
    margin-left: 7%;
}

.message1{
    width: 100%;
    padding-bottom: 20px;
}

.message1 p{
    font-size: 13px;
}

.message2{
    width: 100%;
}

.message2 p{
    font-size: 18px;
    line-height: 1.7;
}

.message3{
    width: 100%;
}

.message3 p{
    font-size: 13px;
}

.message {
    opacity: 0; /* 最初は非表示 */
    transform: translateX(50px); /* 右からスライド */
    transition: opacity 2s ease-out 0.5s, transform 2s ease-out 0.5s;
}

/* スクロール時に適用されるクラス */
.message.show {
    opacity: 1; /* 透明度を1にして表示 */
    transform: translateX(0); /* 元の位置に戻す */
}



.title2{
    width: 100%;
    text-align: center;
    padding-top: 15%;
    padding-bottom: 20px;
}

.title2 h2{
    font-size: 36px;
}

.animated-line {
    width: 0; /* 最初は見えない */
    height: 1px;
    background-color: black;
    transition: width 1s ease-out;
    margin-bottom: 5%;
}

/* JavaScriptでクラスを追加 */
.line-show {
    width: 100%; /* 伸びる */
}

.menu{
    width: 100%;
}

.menu img{
    width: 200px;
}

.menu li{
    list-style: none;
    text-align: center;
}

.menu ul{
    display: flex;
    gap: 40px;

}

.menu1{
    width: 100%;
    padding-left: 10px;
}

.menu2{
    width: 100%;
    margin-top: 5%;
    padding-left: 10px;
}

.menu1 li, .menu2 li {
    transition: transform 0.3s ease-in-out; /* 変形のスムーズな遷移 */
}

.menu1 li:hover, .menu2 li:hover {
    transform: scale(1.1); /* カーソルを合わせたときに1.1倍に拡大 */
}

/* 画像を囲む枠線やシャドウが欲しい場合 */
.menu1 li img, .menu2 li img {
    transition: transform 0.3s ease-in-out; /* 画像のアニメーション */
}

.menu1 li:hover img, .menu2 li:hover img {
    transform: scale(1.1); /* 画像を少し拡大 */
}

.title3{
    width: 100%;
    text-align: center;
    padding-top: 15%;
    padding-bottom: 20px;
}

.title3 h2{
    font-size: 36px;
}

.about{
    width: 100%;
    display: flex;
}

.text{
    width: 100%;
    text-align: center;
    padding-top: 10%;
}

.text1{
    width: 100%;
    font-size: 18px;
    padding-top: 20px;
}

.text2{
    width: 100%;
    font-size: 13px;
    padding-top: 20px;
}

.text {
    opacity: 0; /* 初期状態は透明 */
    transform: translateX(-100px); /* 左から開始 */
    transition: opacity 1.5s ease 0.5s, transform 1.5s ease-out 0.5s; /* アニメーション */
}

.text.visible {
    opacity: 2; /* 完全に表示 */
    transform: translateX(0); /* 元の位置に戻す */
}


.about1{
    width: 70%;
}

.about1 img{
    width: 300px;
}

/*==================================================
スライダーのためのcss
===================================*/
.slider{
    margin-top: 10%;
}

.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 10px;/*スライド左右の余白調整*/
}

.title4{
    width: 100%;
    font-size: 24px;
}

.access1{
    width: 100%;
    text-align: center;
    padding-top: 15%;
    padding-bottom: 20px;
}

.access1 h2{
    font-size: 36px;
}

.access{
    width: 100%;
    display: flex;
}

.access2{
    width: 50%;
    margin-left: 10%;
}

.fotter{
    width: 100%;
}

.fotter1{
    width: 50%;
    padding-top: 100px;
    margin-left: 25%;
    margin-top: 5%;
}

.fotter1 ul{
    display: flex;
    justify-content: space-around;

}

.fotter1 li{
    list-style: none;
}

.fotter1 a{
    text-decoration-line: none;
    color: black;
}

.fotter1 a:hover{
    color: gray;
}

.fotter1 img{
    width: 25px;
}


.copy{
    width: 100%;
    text-align: center;
    margin-top: 5%;
    margin-bottom: 2%;
}
}





























/*-----------------------------------------------------*/
/* スマホ用のCSS */
/*-----------------------------------------------------*/
@media only screen and (max-width: 599px) {
.container{
    width: 80%;
    margin: 0 auto;
    font-family: "Noto Serif JP", serif;
    font-optical-sizing: auto;
}

.header{
    width: 100%;
}

.header1{
    width: 30%;
    padding-left: 7%;
    padding-top: 40px;
}

.header1 img{
    width: 50px;
}

.header2{
    width: 100%;
    padding-left: 20px;
}

.header2 ul{
    display: flex;
    justify-content: space-around;

}

.header2 li{
    list-style: none;
}

.header2 a{
    text-decoration-line: none;
    color: black;
    font-size: 10px;
}

.header2 a:hover{
    color: gray;
}

.header2 img{
    width: 25px;
}

.top1{
    margin-top: 20px;
}

.top1 img{
    width: 100%;
}

.title1{
    width: 100%;
    text-align: center;
}

.title1 h1{
    font-size: 20px;
    padding-top: 10%;
}

.title1 p{
    font-size: 10px;
}

.title1 {
    opacity: 0; /* 初めは非表示 */
    transform: translateY(30px); /* 30px下からスライド */
    transition: opacity 1.5s ease-out, transform 1.5s ease-out; 
}

/* スクロールで表示されると適用 */
.title1.show {
    opacity: 1; /* 透明度を1にして表示 */
    transform: translateY(0); /* 元の位置に戻す */
}

.top2{
    width: 100%;
}

.image-container {
	width: 50%;
    display: flex;
    gap: 20px; /* 画像の間隔 */
	padding-left: 16%;
	margin-top: 30px;
}

.image-container img {
    opacity: 0;
	width: 100px;
    transform: translateY(30px); /* 下から少し持ち上げる */
    transition: opacity 1.5s ease-out, transform 1.5s ease-out;
}

/* 順番に表示させるための遅延 */
.image-container img:nth-child(1) {
    transition-delay: 0.5s;
}

.image-container img:nth-child(2) {
    transition-delay: 0.8s;
}

.image-container img.show {
    opacity: 1;
    transform: translateY(0);
}

.message{
    width:100%;
    text-align: center;
    padding-top: 30px;
}

.message1{
    width: 100%;
    padding-bottom: 20px;
}

.message1 h3{
    font-size: 16px;
}

.message1 p{
    font-size: 10px;
}

.message2{
    width: 100%;
}

.message2 p{
    font-size: 13px;
    line-height: 1.7;
}

.message3{
    width: 100%;
}

.message3 p{
    font-size: 10px;
}

.message {
    opacity: 0; /* 最初は非表示 */
    transform: translateX(50px); /* 右からスライド */
    transition: opacity 2s ease-out 0.5s, transform 2s ease-out 0.5s;
}

/* スクロール時に適用されるクラス */
.message.show {
    opacity: 1; /* 透明度を1にして表示 */
    transform: translateX(0); /* 元の位置に戻す */
}

.title2{
    width: 100%;
    text-align: center;
    padding-top: 15%;
    padding-bottom: 20px;
}

.title2 h2{
    font-size: 24px;
}

.animated-line {
    width: 0; /* 最初は見えない */
    height: 1px;
    background-color: black;
    transition: width 1s ease-out;
    margin-bottom: 5%;
}

/* JavaScriptでクラスを追加 */
.line-show {
    width: 90%; /* 伸びる */
    margin-left: 5%;
}

.menu{
    width: 100%;
    margin-top: 10%;
}

.menu img{
    width: 50px;
}

.menu li{
    list-style: none;
    text-align: center;
    font-size: 8px;
}

.menu ul{
    display: flex;
    gap: 10px;
}

.menu1{
    width: 100%;
    margin-left: 9%;
}

.menu2{
    width: 100%;
    margin-top: 5%;
    margin-left: 9%;
}

.menu1 li, .menu2 li {
    transition: transform 0.3s ease-in-out; /* 変形のスムーズな遷移 */
}

.menu1 li:hover, .menu2 li:hover {
    transform: scale(1.1); /* カーソルを合わせたときに1.1倍に拡大 */
}

/* 画像を囲む枠線やシャドウが欲しい場合 */
.menu1 li img, .menu2 li img {
    transition: transform 0.3s ease-in-out; /* 画像のアニメーション */
}

.menu1 li:hover img, .menu2 li:hover img {
    transform: scale(1.1); /* 画像を少し拡大 */
}

.title3{
    width: 100%;
    text-align: center;
    padding-top: 15%;
    padding-bottom: 20px;
}

.title3 h2{
    font-size: 24px;
}

.about{
    width: 100%;
}

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

.title4 h2{
    font-size: 16px;
}

.text1{
    width: 100%;
    font-size: 13px;
    padding-top: 20px;
}

.text2{
    width: 100%;
    font-size: 13px;
    padding-top: 10px;
}

.text {
    opacity: 0; /* 初期状態は透明 */
    transform: translateX(-100px); /* 左から開始 */
    transition: opacity 1.5s ease 0.5s, transform 1.5s ease-out 0.5s; /* アニメーション */
}

.text.visible {
    opacity: 2; /* 完全に表示 */
    transform: translateX(0); /* 元の位置に戻す */
}


.about1{
    width: 100%;
    padding-top: 20px;
    padding-left: 28%;
}

.about1 img{
    width: 130px;
}

/*==================================================
スライダーのためのcss
===================================*/
.slider{
    margin-top: 10%;
}

.slider img {
    width:100%;/*スライダー内の画像を横幅100%に*/
    height:auto;
}

/*slickのJSで書かれるタグ内、スライド左右の余白調整*/

.slider .slick-slide {
    margin:0 10px;/*スライド左右の余白調整*/
}

.title4{
    width: 100%;
    font-size: 24px;
}

.access1{
    width: 100%;
    text-align: center;
    padding-top: 15%;
    padding-bottom: 20px;
}

.access1 h2{
    font-size: 24px;
}

.access{
    width: 100%;
    font-size: 13px;
}

.access2{
    width: 90%;
    margin-left: 10%;
}

.access iframe{
    width:100%;
    height: 80%;
    padding-top: 20px;
}

.fotter{
    display: none;
}

.copy{
    width: 100%;
    text-align: center;
    margin-top: 8%;
    margin-bottom: 5%;
}
}