@charset "UTF-8";
/* CSS Document */
html {
  font-size: 62.5%;
  scroll-behavior: smooth;
	
	
}
body {
  font-family:
    "Yu Gothic", "游ゴシック", YuGothic, "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "MS Pゴシック", Helvetica, Arial, Verdana, sans-serif;
  font-size: 1.6rem;
  line-height: 2.1;
  color: #000;
}
a {
  text-decoration: none;
}
<link rel="stylesheet"href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw=="crossorigin="anonymous"referrerpolicy="no-referrer"/ > h1, h2, h3, h4, h5, h6 {
  font-weight: 900;
}
h2 {
  margin-bottom: 20px;
}
h3 {
  margin-bottom: 10px;
}
img {
  width: 100%;
}
.inner {
  /*	background: orange;*/
  width: 1280px;
  margin: 0 auto;
}
.flexbox {
  /*	background: pink;*/
  display: flex;
  justify-content: space-between;
}
.photo-row {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin-bottom: 20px;
}
.big {
  width: 250px;
}
.small {
  width: 150px;
}
.photo {
  height: auto;
}
.photo-area {
  display: flex;
  flex-wrap: wrap; /* 折り返しOK */
  gap: 20px;
  justify-content: center;
}
/* pタグが横並びの邪魔をするので調整 */
.photo-area p {
  margin: 0;
  text-align: center;
}
/* 共通 */
.photo-area .photo {
  height: auto;
  display: block;
}
/* 上の写真 */
.photo-area .big {
  width: 250px;
}
/* 下の写真 */
.photo-area .small {
  width: 150px;
}
/* headerエリア */
header {
  /*	background: red;*/
}
header .inner {
  display: flex;
  justify-content: space-between;
  /*
	padding-top: 50px;
	padding-bottom: 50px;
	*/
  padding: 30px 0;
}
.btn a {
  line-height: 48px;
  color: #fff;
  width: 220px;
  height: 50px;
  display: inline-block;
  background: #000;
  border-radius: 8px;
  transition: .8s;
}
.btn a:hover {
  opacity: 0.6;
}

.box {
  background: linear-gradient(to right, #F8F394, #FAD961);
}








header h1 {
  width: 200px;
}
header nav ul {
  display: flex;
  margin-top: 50px;
}
header nav ul li a {
  color: #333333;
  margin-left: 10px;
}
/*footerエリア*/
footer {
  /*	background: #F8E5EF;*/
  text-align: center;
  padding: 100px 0;
}
.flexbox {
  display: flex;
}
/* visualエリア */
#visual {
  height: 100vh;
  background: url("../images/pafe-main.png") no-repeat center top / cover;
  position: relative;
}
#visual .text {
  font-weight: 900;
  font-size: 1.8rem;
  position: absolute;
  bottom: 50px;
  left: 100px;
}
#visual .text h2 {
  font-weight: 900;
  font-size: 5rem;
}
#visual .text .menu-title {
  font-weight: 900;
  font-size: 3rem;
}
.box1 {
  width: 200px;
  background: blue;
  padding: 20px;
  position: absolute;
  top: 30px;
  left: 50px;
}
.box2 {
  width: 200px;
  background: red;
  padding: 20px;
  position: absolute;
  left: 100px;
  top: 80px;
}
.box {
  width: 300px;
  /*	background: red;*/
}
/* aboutエリア */
#about {
  /*	background: yellow;*/
  text-align: center;
  padding: 100px 0;
}
/* menuエリア */
#menu {
  /*	background: orange;*/
  text-align: center;
  padding: 100px 0;
}
#menu .flexbox .box {
  /*	background: yellow;*/
  width: 600px;
  margin-bottom: 20px;
}
/* introductionエリア */
#introduction {
  /*	background: blue;*/
  text-align: center;
  padding: 100px 0;
}
#introduction .main-s {
  position: relative;
  height: 700px;
  margin-bottom: 20px;
}
#introduction .main-s .photo01 {
  width: 800px;
  position: absolute;
  z-index: 2;
}
#introduction .main-s .text01 {
  height: 500px;
  background: #EB9B9733;
  border-radius: 50px;
  position: absolute;
  top: 100px;
  left: 500px;
  z-index: 1;
  padding-left: 300px;
  margin-left: 40px;
}
#introduction .main-s .photo02 {
  width: 800px;
  position: absolute;
  right: 0;
  z-index: 2;
}
#introduction .main-s .text02 {
  height: 500px;
  background: #1E346B33;
  border-radius: 50px;
  position: absolute;
  top: 100px;
  left: 0;
  padding-right: 300px;
  z-index: 1;
}
#introduction .main-s .photo03{
	width: 800px;
	position: absolute;
	left: 0;
	z-index: 2;
}

#introduction .main-s .text03{
	height: 500px;
	background: #CF903033;
	border-radius: 50px;
	position: absolute;
	top: 100px;
	left: auto;   /* ← 左指定を消す */
	right: 0;      /* ← 右寄せ */
	padding-left: 300px; /* 文字がはみ出ないよう余白調整 */
	z-index: 1;
}



#introduction .main-s .photo04 {
  width: 800px;
  position: absolute;
  right: 0; /* 右寄せ */
  z-index: 1;
}

#introduction .main-s .text04 {
  height: 500px;
  background: #A41F2433;
  border-radius: 50px;
  position: absolute;
  top: 100px;
  left: 0;
  padding-right: 400px;
  z-index: 1;
  text-align: center;
}




/* servicesエリア */
#services {
  
  text-align: center;
  padding: 100px 0;
}