/*
Theme Name:  手ぶら旅.jp 2025.04-
Theme URI:
Description:
Version: 1.0
Author: 
Author URI:
*/


body {
	font-family: "Zen Kaku Gothic Antique", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", "Meiryo", Osaka, "ＭＳ Ｐゴシック", "MS PGothic";
	color: #222;
	font-size: 17px;
	font-weight: 500;
  	font-style: normal;
	line-height:1.75;
	letter-spacing:0.03em;
	text-align:justify;
}
a {
	color: #931919;
	text-decoration: none;
	transition: 0.3s ease-out;
}
a:hover {
	color:#b2890e;
}

::selection{background-color:#b2890e; color: #FFF;}
::-moz-selection{background-color:#b2890e; color: #FFF;}

body , header , footer{
	min-width: 400px;
	max-width: 1920px;
	margin: auto;
}




/*============================================================================

	モーション　＊　文字が１文字ずつ出る

============================================================================*/
.eachTextAnime span{opacity: 0;}
.eachTextAnime.appeartext span{ animation:text_anime_on 2s ease-out forwards; }
@keyframes text_anime_on {
	0% {opacity:0;}
	100% {opacity:1;}
}




/*============================================================================

	#mainvisual　＊　下層のMV

============================================================================*/
#mainvisual {
	position: relative;
	width: 100%;
	height: 280px;
	margin:auto;
	background: url(images/bg_01.png) center bottom;
    background-size: cover;   
	display: flex;
    justify-content: center;
    align-items: flex-end;
}
#mainvisual h2 {
	margin-bottom: 85px;
    font-size: 28px;
    font-weight: 600;
}
@media screen and (max-width:640px) {
	#mainvisual {
		height: 200px;
	}
	#mainvisual h2 {
		margin-bottom: 50px;
		font-size: 24px;
	}
}





/*==================================================================

	main　＊　下層

==================================================================*/
main #wrapper {
	width: 90%;
	max-width: 1000px;
	margin: auto;
	padding: 60px 0 100px;
}





/*==================================================================

	 タイトル　＊　下層

==================================================================*/
main h2 {    
	margin-bottom: 20px;
    font-size: 22px;
    font-weight: 600;
}
@media screen and (max-width:640px) {
	main h2 {    
		font-size: 20px;
	}
}





/*==================================================================

	btn

==================================================================*/
.btn a {
	position: relative;
	padding: 15px 90px 15px 70px;
	background: #931919;
	color: #FFF;
	border-radius: 40px;
	font-family: "Oswald", sans-serif;
	font-size: 20px;
	transition: 0.3s ease-out;
}
.btn a::before {
	position: absolute; content: "";
	background: url("images/top_img08.png");
	background-size: 13px 13px;
	width: 13px; height: 13px;
	top: 50%; margin-top: -6px;
	right: 50px;
	transition: 0.3s ease-out;
}
.btn a:hover {
	background: #b2890e;
}
.btn a:hover::before {
	right: 40px;
}
@media screen and (max-width:640px) {
	.btn a {
		padding: 10px 90px 15px 70px;
		font-size: 18px;
	}
}