@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/

#top-column{
	padding-left:120px;
   }

#husen {
	font-size:24px;
    position: relative;
    display: flex; /* Flexboxを使用 */
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    width: 50vw; /* 背景の幅を100%に設定 */
    height: 10%; /* 背景の高さを100%に設定 */
    background-color: #2AA4BF; /* 背景の色 */
	margin-bottom:-70px;
		border-radius:5px;
}

#husen::after {
    content: '';
    position: absolute;
    bottom: -20px; /* 矢印の下方向の位置 */
    left: 50%; /* 矢印の水平方向の位置 */
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 20px solid transparent; /* 三角形の左辺 */
    border-right: 20px solid transparent; /* 三角形の右辺 */
    border-top: 20px solid #2A8ABF; /* 三角形の上辺 */
    z-index: 1; /* 三角形を四角形の上に配置 */
}

#top-h2{
	white-space:nowrap;
	width:100%;

}

/*---------- topの楕円3つ -----------*/
/*---------- topの楕円3つ -----------*/
#circle1 {
    position: relative; /* 要素を相対的に配置 */
    display: flex; /* Flexboxを使用 */
    /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    width: 200px; /* 円の直径 */
    height: 200px; /* 円の直径 */
    background: #f66; /* 背景色 */
    border-radius: 50% 50% 50% 70%/50% 50% 70% 60%; /* 円形の背景を作成 */
    
	
}

.circle1-content {
    text-align: center; /* 内容を中央揃え */
}

#circle1 #h3-circle {
    position: absolute; /* 要素を絶対位置に配置 */
    top: 20%; /* #circle の高さの中央に配置 */
    left: 50%; /* 横方向の中央に配置 */
    transform: translate(-50%, -50%); /* 横方向と縦方向の中央に配置 */
    display: flex; /* Flexboxを使用 */
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    width: auto; /* 幅をコンテンツのサイズに自動調整 */
    height: 14px; /* 高さを固定 */
    background-color: #FFFFFF; /* 赤色 */
    border-radius: 30px; /* 四角形にするため角のない四角を解除 */
    padding: 12px; /* テキストとの間隔を設定 */
    white-space: nowrap; /* テキストが改行されないように設定 */
    text-align: center; /* テキストを中央揃えにする */
}
#circle1 #h3-circle h3,
#circle1 #h3-circle p {
    margin: 0; /* マージンをリセットしてテキストがはみ出さないようにする */
}

#circle2 {
    position: relative; /* 要素を相対的に配置 */
    display: flex; /* Flexboxを使用 */
    /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    width: 200px; /* 円の直径 */
    height: 200px; /* 円の直径 */
    background: #f92; /* 背景色 */
    border-radius: 80% 30% 50% 50%/50%; /* 円形の背景を作成 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 影の追加 */
	
}

.circle2-content {
    text-align: center; /* 内容を中央揃え */
}

#circle2 #h3-circle {
    position: absolute; /* 要素を絶対位置に配置 */
    top: 20%; /* #circle の高さの中央に配置 */
    left: 50%; /* 横方向の中央に配置 */
    transform: translate(-50%, -50%); /* 横方向と縦方向の中央に配置 */
    display: flex; /* Flexboxを使用 */
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    width: auto; /* 幅をコンテンツのサイズに自動調整 */
    height: 14px; /* 高さを固定 */
    background-color: #FFFFFF; /* 赤色 */
    border-radius: 30px; /* 四角形にするため角のない四角を解除 */
    padding: 12px; /* テキストとの間隔を設定 */
    white-space: nowrap; /* テキストが改行されないように設定 */
    text-align: center; /* テキストを中央揃えにする */
}
#circle2 #h3-circle h3,
#circle2 #h3-circle p {
    margin: 0; /* マージンをリセットしてテキストがはみ出さないようにする */
}

#circle3 {
    position: relative; /* 要素を相対的に配置 */
    display: flex; /* Flexboxを使用 */
    /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    width: 200px; /* 円の直径 */
    height: 200px; /* 円の直径 */
    background: #fc2; /* 背景色 */
    border-radius: 40% 40% 50% 40%/30% 50% 50% 50%; /* 円形の背景を作成 */
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* 影の追加 */
	
}

.circle3-content {
    text-align: center; /* 内容を中央揃え */
}

#circle3 #h3-circle {
    position: absolute; /* 要素を絶対位置に配置 */
    top: 20%; /* #circle の高さの中央に配置 */
    left: 50%; /* 横方向の中央に配置 */
    transform: translate(-50%, -50%); /* 横方向と縦方向の中央に配置 */
    display: flex; /* Flexboxを使用 */
    justify-content: center; /* 横方向の中央揃え */
    align-items: center; /* 縦方向の中央揃え */
    width: auto; /* 幅をコンテンツのサイズに自動調整 */
    height: 14px; /* 高さを固定 */
    background-color: #FFFFFF; /* 赤色 */
    border-radius: 30px; /* 四角形にするため角のない四角を解除 */
    padding: 12px; /* テキストとの間隔を設定 */
    white-space: nowrap; /* テキストが改行されないように設定 */
    text-align: center; /* テキストを中央揃えにする */
}
#circle3 #h3-circle h3,
#circle3 #h3-circle p {
    margin: 0; /* マージンをリセットしてテキストがはみ出さないようにする */
}
/*---------- ↑topの楕円3つ ---------*/
/*----------↑ topの楕円3つ ---------*/

#top-img{
	margin-right:120px;
	position:absolute;
	top:10vh;
	display: block; /* PC表示時に表示 */
	
}

#muryo-p{
	top:-6vw;
}

#button1{
	top:-6vw;
}

@media screen and (max-width: 700px){

#circle1 ,#circle2 , #circle3 {
    position: absolute;
    align-items: center; /* 縦方向の中央揃え */
    width: 150px; /* 円の直径 */
    height: 150px; /* 円の直径 */
}
	#circle1{
		top:270px;
	}
	#circle2{
		top:385px
	}
	
	#circle3{
		top:500px;
	}
#husen {
	font-size:18px;
  position: absolute;
  width: 100%;
	margin-top:50px;
	padding:6px;
}

#husen::after {
    content: '';
    position: absolute;
    bottom: -14px; 
    border-left: 15px solid transparent; 
    border-right: 15px solid transparent;
    border-top: 15px solid #2A8ABF; 
}

#top-h2{
	position:relative;
	top:115px;
	font-size:12px
}
	#sp-top-p{
		position:relative;
		top:100px;
	}


}

@media screen and (min-width: 700px) and (max-width: 1024px) {

#circle1 ,#circle2 , #circle3 {
    position: absolute;
    align-items: center; /* 縦方向の中央揃え */
    width: 200px; /* 円の直径 */
    height: 200px; /* 円の直径 */
}
	#circle1{
		top:400px;
		left:10px;
	}
	#circle2{
		top:350px;
		left:215px;
	}
	
	#circle3{
		top:425px;
		left:420px;
	}
#husen {
	font-size:24px;
  position: absolute;
  width: 100%;
	margin-top:40px;
	padding:6px;
}

#husen::after {
    content: '';
    position: absolute;
    bottom: -14px; 
    border-left: 15px solid transparent; 
    border-right: 15px solid transparent;
    border-top: 15px solid #2A8ABF; 
}

#top-h2{
	position:relative;
	top:120px;
	font-size:18px
}
	#sp-top-p{
		position:relative;
		top:100px;
		width:40%;
	}


}