@charset "utf-8";

/*トップ H2*/
h2.top_g01{
margin-bottom: 30px;
width: 840px;
height: auto;
}
/*トップ H2　移住者インタビュー*/
h2.top_g01.iview{
width: 1000px;
}
h2.top_g01 img{
display: block;
width: 100%;
height: auto;
}
@media screen and (max-width: 767px) {
h2.top_g01{
width: 85%;
margin-bottom: 20px;
margin-left: auto;
margin-right: auto;
}
/*トップ H2　移住者インタビュー*/
h2.top_g01.iview{
width: 100%;
}
}



/*左右中央配置 general*/
.g-wrap_C {
display: flex;
justify-content: center;
/*align-items: center;*/
}
.g-wrap_R,.g-wrap_RC {
display: flex;
justify-content: flex-end;
}
.g-wrap_L,.g-wrap_LC {
display: flex;
justify-content: flex-start;
}

@media screen and (max-width: 767px) {
.g-wrap_RC,.g-wrap_LC {
justify-content: center;
align-items: center;
}

}


/*general　ボタン*/
p.g_btn01 {
/*margin-right: auto;
margin-left: auto;*/
width: 300px;
transition: all 0.3s;
}
p.g_btn01.owner {
width: 100%;
}
p.g_btn01 a{
padding-top: 15px;
padding-bottom: 15px;
margin-right: auto;
margin-left: auto;
width: 100%;
text-align: center;
margin-bottom: 0px;
display: block;
transition: all 0.3s;
line-height: 1em;
font-size: 14px;
position: relative;
border-radius: 50px;
border: 1px solid #333333;
padding-left: 15px;
background-color: #FFFFFF;
}
/*arrow*/
p.g_btn01 a::after {
position   : absolute;
content    : "";
width: 13px;
height: 15px;
background-color: #333333;
clip-path: polygon(0 0, 100% 50%, 0 100%);
left: 32%;
top: 50%;
transform: translateY(-50%);
}
p.g_btn01 a:hover{
background-color: #F2F2F2;
}

@media(max-width: 820px){
p.g_btn01 a{
font-size: 12px;
}
}
@media(max-width: 767px){
p.g_btn01 {
max-width: initial;
margin-right: auto;
margin-left: auto;
width: 60%;
}
p.g_btn01 a::after {
left: 27%;
}
p.g_btn01 a{
font-size: 3.0vw;
}
}

/*松山市街並みイラスト*/
/*.cityscape_sub {
width: 100vw;
position: relative;
background-image: url('../parts/bg_city3.webp');
background-repeat: no-repeat;
background-position: center bottom;
background-size: cover;
}
@media screen and (max-width: 1500px) {
.cityscape_sub {
background-image: url('../parts/bg_city.svg');
}
}*/
.cityscape_sub {
background-color: #FAF2EB;
}
.cityscape_sub figure {
max-width: 700px;
margin-left: auto;
margin-right: auto;
position: relative;
z-index: 1;
}
.cityscape_sub figure img {
width: 100%;
height: auto;
display: block;
}
.cityscape_sub .bg-curve {
width: 100%;
height: auto;
display: none;
position: absolute;
bottom: 0;
left: 0;
z-index: 0;
}
@media screen and (max-width: 767px) {
.cityscape_sub {
width: 100vw;
position: relative;
background-image: url('../parts/bg_city3.webp');
background-repeat: no-repeat;
background-position: center bottom;
background-size: cover;
background-color: transparent;
}
.cityscape_sub .bg-curve {
display: block;
}
}



/*下層コンテンツ　タイトル*/
.sub_CT {
	position: relative;
	text-align: center;
	padding-bottom: 10px;
	padding-top: 130px;
	background-color: #FAF2EB;
}
.sub_CT h2 {
	font-size: 28px;
	font-weight: 600;
	color: #354E6F;
	position: relative;
	z-index: 2;
}
@media(max-width: 767px){
.sub_CT h2 {
font-size: 4.4vw;
}
}



/* ---------------------------------------------------------------- *
エフェクト
* ---------------------------------------------------------------- */
/*Fade in up down*/
.f_in{
opacity: 0;
animation: f_in 2s;
animation-fill-mode: forwards;
}
@keyframes f_in{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.f_up{
opacity: 0;
animation: f_up 1s;
animation-fill-mode: forwards;
}
@keyframes f_up{
0% {
opacity: 0;
transform: translateY(50px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}
.f_down{
opacity: 0;
animation: f_down 1s;
animation-fill-mode: forwards;
}
@keyframes f_down{
0% {
opacity: 0;
transform: translateY(-50px);
}
100% {
opacity: 1;
animation-fill-mode: forwards;
}
}


/* 4-1 ふわっ（下から） */

.fadeUp{
animation-name: fadeUpAnime;
animation-duration:0.7s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeUpAnime{
from {
opacity: 0;
transform: translateY(50px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

/* 4-1 ふわっ（上から）*/

.fadeDown{
animation-name: fadeDownAnime;
animation-duration:0.7s;
animation-fill-mode:forwards;
opacity:0;
}

@keyframes fadeDownAnime{
from {
opacity: 0;
transform: translateY(-50px);
}

to {
opacity: 1;
transform: translateY(0);
}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.fadeInTrigger,
.fadeUpTrigger,
.fadeDownTrigger{
opacity: 0;
}



/*バーガーメニュー*/


/*==================================================
3本線が回転して×に
===================================*/

/*ボタン外側*/
.openbtn{
position: fixed;
background-color: #354E6F;
top: 20px;
right: 30px;
z-index: 100;
cursor: pointer;
width: 52px;
height: 52px;
overflow: hidden;
-moz-border-radius: 50%;
-webkit-border-radius: 50%;
border-radius: 50%;
}
@media screen and (max-width: 767px) {
.openbtn{
top:25px;
right: 20px;    
}
}

/*ボタン内側*/
.openbtn span{
display: inline-block;
transition: all .4s;
position: absolute;
left: 15px;
height: 2px;
border-radius: 0px;
background: #FFF;
}


.openbtn span:nth-of-type(1) {
top:18px;	
width: 38%;
}

.openbtn span:nth-of-type(2) {
top:25px;
/*width: 35%;*/
width: 38%;
}

.openbtn span:nth-of-type(3) {
top:32px;
/*width: 20%;*/
width: 38%;
}

/*activeクラスが付与されると線が回転して×になる*/

.openbtn.active span:nth-of-type(1) {
top: 19px;
left: 17px;
transform: translateY(6px) rotate(-135deg);
width: 38%;
}

.openbtn.active span:nth-of-type(2) {
opacity: 0;
}

.openbtn.active span:nth-of-type(3){
top: 31px;
left: 17px;
transform: translateY(-6px) rotate(135deg);
width: 38%;
}



/*==================================================
クリックしたら円形背景が拡大（右上から）
===================================*/

/*アクティブになったエリア*/
#g-nav.panelactive{
/*position:fixed;にし、z-indexの数値を大きくして前面へ*/
position:fixed;
z-index: 10;
/*z-index: 999;*/
top: 0;
width:100%;
height: 100vh;
}

/*丸の拡大*/
.circle-bg{
position: fixed;
z-index: 5;
/*丸の形*/
width: 100px;
height: 100px;
border-radius: 50%;
background-color: #FAF2EB;
/*丸のスタート位置と形状*/
transform: scale(0);/*scaleをはじめは0に*/
right: -20px;
top: -20px;
transition: all .5s;/*0.6秒かけてアニメーション*/
}

.circle-bg.circleactive{
transform: scale(50);/*クラスが付与されたらscaleを拡大*/
}

/*ナビゲーションの縦スクロール*/
#g-nav-list{
display: none;/*はじめは表示なし*/
/*ナビの数が増えた場合縦スクロール*/
position: fixed;
z-index: 10;
/*z-index: 999;*/
width: 100%;
height: 100vh;
overflow: auto;
-webkit-overflow-scrolling: touch;
}

#g-nav.panelactive #g-nav-list{
display: block; /*クラスが付与されたら出現*/
}

/* 背景が出現後にナビゲーション li を表示※レイアウトによって調整してください。不必要なら削除*/
#g-nav.panelactive ul li{
animation-name:gnaviAnime;
animation-duration:1s;
animation-delay:.2s;/*0.2 秒遅らせて出現*/
animation-fill-mode:forwards;
opacity:0;
}
@keyframes gnaviAnime{
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}


/* ---------------------------------------------------------------- *
バーガーナビ
* ---------------------------------------------------------------- */

.nav-in {
	display: grid;
	gap: 30px;
	grid-template-columns: 1fr;
	z-index: 99;
	opacity: 0;
	margin-left: auto;
	margin-right: auto;
	max-width: 1000px;
	padding-bottom: 150px;
	padding-top: 100px;
}
#g-nav.panelactive .nav-in {
opacity:1;
}
@media screen and (max-width: 767px) {
.nav-in {
gap: 20px;
grid-template-columns: 1fr;
transform: translate(0%,0%);
max-width: initial;
width: 100%;
padding-top: 0px;
}
.nav-in .item02 {
width: 90%;
margin-left: auto;
margin-right: auto;
}

}


/* ナビアイコン */
.h_above2 {
	display: none;
}
@media screen and (max-width: 767px) {
.h_above2 {
display: grid;
gap: 10px;
grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
padding-right: 15px;
padding-left: 10px;
padding-top: 10px;
padding-bottom: 10px;
}
.h_above2 li.item img {
width: 100%;
height: auto;
display: block;
}
}



/*アコーディオン全体　バーガーメニュー*/
.acod-burger {
margin-top: 5px;
width: 90%;
margin-left: auto;
margin-right: auto;
}
@media screen and (max-width: 767px) {
.acod-burger {
width: 100%;
}
}
.acod-burger ul.menu{
list-style: none;
width: 100%;
margin:0 auto;
}
.acod-burger > li{
margin-right: 0;
margin-left: 0;
margin-bottom: 10px;
}
/*アコーディオンタイトル*/
.acod-burger .bgr_title {
position: relative;/*+マークの位置基準とするためrelative指定*/
cursor: pointer;
font-size: 13px;
line-height: 1.5em;
font-weight: bold;
padding-top: 10px;
padding-bottom: 10px;
transition: all .5s ease;
border-bottom: 1px solid #CCCCCC;
}
.acod-burger .bgr_title span {
font-size: 11px;
display: block;
font-weight: normal;
}

/*サブページなしのボタン*/
.acod-burger .gen_title a {
font-size: 17px;
line-height: 1.5em;
font-weight: bold;
cursor: pointer;
padding-top: 10px;
padding-bottom: 10px;
transition: all .5s ease;
border-bottom: 1px solid #CCCCCC;
color: #000000!important;
display: block;
/*border-top: 1px solid #CCCCCC;*/
position: relative;
}
.acod-burger .gen_title span {
font-size: 15px;
display: block;
font-weight: normal;
}
.acod-burger .gen_title a:hover {

}
.acod-burger .gen_title a::after {
display: block;
content: "";
position: absolute;
top: 50%;
right: 20px;
width: 8px;
height: 8px;
margin: -4px 0 0 0;
border-top: solid 2px #354E6F;
border-right: solid 2px #354E6F;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
transition: all 0.3s;
}


/*アイコンの＋と×*/
.acod-burger .bgr_title::before,
.acod-burger .bgr_title::after{
position: absolute;
content:'';
width: 15px;
height: 2px;
background-color: #354E6F;
}
.acod-burger .bgr_title::before{
top:48%;
right: 15px;
transform: rotate(0deg);
}
.acod-burger .bgr_title::after{    
top:48%;
right: 15px;
transform: rotate(90deg);
}
/*　closeというクラスがついたら形状変化　*/
.acod-burger .bgr_title.close::before{
transform: rotate(45deg);
}
.acod-burger .bgr_title.close::after{
transform: rotate(-45deg);
}


/*アコーディオンで現れるエリア*/
.acod-burger .bgr_box {
display: none;/*はじめは非表示*/
}
@media screen and (max-width: 767px) {
.acod-burger ul.menu{
width: 90%;
margin-left: auto;
margin-right: auto;
}
.acod-burger > li{

}
.acod-burger .bgr_title,.acod-burger .gen_title {
font-size: 3.3vw;
}

/*サブページなしのボタン*/
.acod-burger .gen_title a {
font-size: 3.6vw;
}
.acod-burger .gen_title span {
font-size: 3.0vw;
}
}

/*アコーディオン　2階層メニュー　オプション*/
ul.option {
	display: grid;
	gap: 10px;
	grid-template-columns: 1fr 1fr 1fr;
	list-style: none;
	margin-top: 10px;
}
ul.option li {
}
ul.option li a {
padding-top: 8px;
padding-bottom: 8px;
line-height: 1.8em;
font-size: 12px;
text-align: center;
display: block;
background-color: rgba(255,255,255,0.7);
transition: all 0.3s;
}
ul.option li a:link {
color: #354E6F;
}
ul.option li a:hover {

}
@media screen and (max-width: 767px) {
ul.option {
grid-template-columns: 1fr 1fr;
}
ul.option li a {
font-size: 2.5vw;
}
}



/*その他*/
.nav-in .item02 .someone{
width: 90%;
margin-left: auto;
margin-right: auto;
display: grid;
gap: 8px;
grid-template-columns: 1fr 1fr;
}
.nav-in .item02 .someone li.item a{
	padding-top: 12px;
	padding-bottom: 12px;
	line-height: 1.8em;
	font-size: 14px;
	text-align: center;
	display: block;
	background-color: rgba(255,255,255,0.5);
	transition: all 0.3s;
}
.nav-in .item02 .someone li.item a:hover{
background-color: #0085FF;
color: #FFFFFF;
}
@media screen and (max-width: 767px) {
.nav-in .item02 .someone{
width: 100%;
font-size: 3.3vw;
}
}


/*SNS*/
ul.n_below2 {
	display: none;
}
@media screen and (max-width: 767px) {
ul.n_below2 {
	display: grid;
	gap: 5px;
	grid-template-columns: 1fr 1fr 1fr;
	width: 90%;
	margin-left: auto;
	margin-right: auto;
}
ul.n_below2 li.item img {
width: 100%;
height: auto;
display: block;
}
}








/*padding*/
.pt00 { padding-top: 0   !important;}
.pt10 { padding-top:10px !important;}
.pt20 { padding-top:20px !important;}
.pt30 { padding-top:30px !important;}
.pt40 { padding-top:40px !important;}
.pt50 { padding-top:50px !important;}

.pb00 { padding-bottom: 0   !important;}
.pb10 { padding-bottom:10px !important;}
.pb20 { padding-bottom:20px !important;}
.pb30 { padding-bottom:30px !important;}
.pb40 { padding-bottom:40px !important;}
.pb50 { padding-bottom:50px !important;}

@media screen and (max-width: 767px) {
.pt10 { padding-top:5px !important;}
.pt20 { padding-top:10px !important;}
.pt30 { padding-top:15px !important;}
.pt40 { padding-top:20px !important;}
.pt50 { padding-top:25px !important;}

.pb10 { padding-bottom:5px !important;}
.pb20 { padding-bottom:10px !important;}
.pb30 { padding-bottom:15px !important;}
.pb40 { padding-bottom:20px !important;}
.pb50 { padding-bottom:25px !important;}
}

/*margin*/
.mt00 { margin-top: 0   !important;}
.mt05 { margin-top:5px !important;}
.mt10 { margin-top:10px !important;}
.mt15 { margin-top:15px !important;}
.mt20 { margin-top:20px !important;}
.mt30 { margin-top:30px !important;}
.mt40 { margin-top:40px !important;}
.mt50 { margin-top:50px !important;}
.mt60 { margin-top:60px !important;}
.mt70 { margin-top:70px !important;}
.mt80 { margin-top:80px !important;}
.mt90 { margin-top:90px !important;}
.mt100 { margin-top:100px !important;}
.mt150 { margin-top:150px !important;}

.mb00 { margin-bottom: 0   !important;}
.mb05 { margin-bottom:5px !important;}
.mb10 { margin-bottom:10px !important;}
.mb15 { margin-bottom:15px !important;}
.mb20 { margin-bottom:20px !important;}
.mb30 { margin-bottom:30px !important;}
.mb40 { margin-bottom:40px !important;}
.mb50 { margin-bottom:50px !important;}
.mb60 { margin-bottom:60px !important;}
.mb70 { margin-bottom:70px !important;}
.mb80 { margin-bottom:80px !important;}
.mb90 { margin-bottom:90px !important;}
.mb100 { margin-bottom:100px !important;}
.mb150 { margin-bottom:150px !important;}

@media screen and (max-width: 767px) {
.mt20 { margin-top:10px !important;}
.mt30 { margin-top:15px !important;}
.mt40 { margin-top:20px !important;}
.mt50 { margin-top:25px !important;}
.mt60 { margin-top:30px !important;}
.mt70 { margin-top:35px !important;}
.mt80 { margin-top:40px !important;}
.mt90 { margin-top:45px !important;}
.mt100 { margin-top:50px !important;}
.mt150 { margin-top:75px !important;}

.mb20 { margin-bottom:10px !important;}
.mb30 { margin-bottom:15px !important;}
.mb40 { margin-bottom:20px !important;}
.mb50 { margin-bottom:25px !important;}
.mb60 { margin-bottom:30px !important;}
.mb70 { margin-bottom:35px !important;}
.mb80 { margin-bottom:40px !important;}
.mb90 { margin-bottom:45px !important;}
.mb100 { margin-bottom:50px !important;}
.mb150 { margin-bottom:80px !important;}
}


/* アニメーションの開始を遅らせるCSS*/

.delay-time05{
animation-delay: 0.5s;
}
.delay-time1{
animation-delay: 1s;
}
.delay-time15{
animation-delay: 1.5s;
}
.delay-time2{
animation-delay: 2s;
}
.delay-time25{
animation-delay: 2.5s;
}
.delay-time3{
animation-delay: 3s;
}
.delay-time35{
animation-delay: 3.5s;
}
.delay-time4{
animation-delay: 4s;
}
.delay-time45{
animation-delay: 4.5s;
}
.delay-time5{
animation-delay: 5s;
}
.delay-time55{
animation-delay: 5.5s;
}