@charset "utf-8";
/* CSS Document */

/* レイアウト */
*{
	margin: 0;
	padding: 0;
	text-decoration: none;
	list-style: none;
}

/* googleフォント */
body{
	font-family:  "Noto Sans JP", "Noto Sans", "Hiragino Sans", "Hiragino Kaku Gothic ProN","Yu Gothic", "Meiryo", sans-serif;
	font-style: normal;
	line-height: 2;
}

/* ヘッダー */
.header_inner{
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 24px;  /* 端末が狭い時に左右に余白が残る */
  display: flex;
  align-items: flex-end; /* ロゴと文字の縦位置が揃う */
  gap: 24px;
}

/* ロゴ */
.header_logo{
  margin: 0; 
}

/* ヘッダーロゴ */
.header_logo img{
  display: block;
  max-width: 180px;  
  width: 100%;
  height: auto;
}

/* ナビ */
.gnav{
  margin-left: auto;  
}

.gnav_list{
	font-size: 20px;
  display: flex;
  gap: 40px;
  align-items: center;
}

.gnav a{
	color: #000;
}

.gnav a:hover{
	text-decoration: underline;
}

.hero img{
	display: block;
	margin: 0 auto;
}

section{
  max-width: 1050px;
  width: 100%;
  margin: 0 auto;
  padding: 0 24px;
}

h2 {
	font-weight: 300;
	text-align: center;
	margin: 72px 0 32px;
	font-size: 37px;
	text-decoration: underline;
	text-underline-offset: 6px;
}

/* Worksカード */
.works{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.work{
	width: 31%;              
	margin-bottom: 40px;
	text-align: center;
	background-color: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 8px rgba(0,0,0,0.1);
	padding-top: 20px;
	padding-bottom: 20px;
}

.work_thumb{
	height: 180px;
	width: 270px;
	overflow: hidden;
	border: 1px solid #eee;
	background: #fafafa;
	margin: 0 auto;
}

.work_thumb img{
	width: 100%;
	height: auto;
	display: block;
}

.work_name{
	font-size: 20px;
	font-weight: 400;
}

.work_text{
	margin: 0 12px 12px;
	font-size: 17px;
}

.btn{
	border: 1px solid #8ac625;
	display: inline-block;
	margin-top: 16px;
	padding: 1px 16px;
	background-color: #8ac625;
	color: #fff;
	border-radius: 20px; 
	text-decoration: none; 
	font-weight: 400;
	font-size: 18px;
}

.btn:hover{
	background-color: #fff;
	border: 1px solid #8ac625;
	color: #8ac625;
}

/* About */
.about_inner{
	margin: 56px 0 40px 0;
	gap: 75px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

/* 左の丸画像 */
.about_img{
	width: 240px; 
	height: 240px;
	border-radius: 50%;
}

.about_img img{
	width: 100%;
}

/* 右テキスト */
.about_name{
	padding-bottom: 16px;
	font-size: 22px;
	font-weight: 400;
	line-height: 2;
}

.about_name span{
	font-size: 18px;
	font-weight: 400;
	line-height: 1.6;
}

.about_desc{
	font-size: 19px;
	font-weight: 300;
line-height: 1.8;
}

/* skills */
.skills {
	margin: 56px 0 40px 0;
	gap: 24px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}


.skill {
	width: 340px;
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

.skill_icon {
	flex-shrink: 0;
}

.skill_icon img {
	max-width: 100%;
}

.skill_title {
	font-size: 20px;
	font-weight: 400;
}

.skill_text {
	margin: 0;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.6;
}

/* フッター */
.footer_inner{
  max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 24px;  /* 端末が狭い時に左右に余白が残る */
  display: flex;
  align-items: flex-end; /* ロゴと文字の縦位置が揃う */
  gap: 24px;
}

/* ロゴ */
.footer_inner{
	margin-top: 100px;
}

.footer_logo{
  margin: 0; 
}

/* ヘッダーロゴ */
.footer_logo img{
  display: block;
  max-width: 180px;  
  width: 100%;
  height: auto;
}

/* ナビ */
.fnav{
  margin-left: auto;  
}

.fnav_list{
	font-size: 20px;
  display: flex;
  gap: 40px;
  align-items: center;
}

.fnav a{
	color: #000;
}

.fnav a:hover{
	text-decoration: underline;
}

.copyright{
	max-width: 1000px;
  width: 100%;
  margin: 0 auto;
  padding: 16px 24px;
  display: flex;
}

/* ここからイチゴパンケーキバナー */
.work1 {
	margin-bottom: 32px;
}

/* 緑タイトル帯 */
.work1-title {
	background: #6DBE00;
	text-align: center;
	padding: 6px 0;
	margin-top: 22px;
	margin-bottom: 40px;
}

.work1-title h1{
	color: #fff;
}
	
.work1-title h2 {
	color: #fff;
	margin: 0;
}

/* セクション見出し */
.work1-head {
	text-align: left;
	font-weight: 500px;
	font-size: 30px;
	width: 100%;
	text-decoration:none;
	border-bottom: 1px solid #333;
	margin-top: 10px;
	margin-bottom: 16px;
}

/* 概要テキスト */
.work1-box p {
	font-weight: 300;
	font-size: 18px;
	margin-bottom: 16px;
	line-height: 1.4;
}

/* 制作ポイント横並び */
.work1-body {
	margin-top: 40px;
	display: flex;
	gap: 40px;
	align-items: flex-start;
}

/* 左の四角 */
.work1-thumb {
	width: 800px;
	height: auto;
	background: #ddd;
}

/* 画像入れた時 */
.work1-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* 小見出し */
.work1-sub {
	font-weight: 400;
	display: block;
	width: 100%;
	border-bottom: 2px solid #6DBE00;
	margin-bottom: 8px;
	margin-top: 24px;
	font-size: 20px;
}

/* テキスト余白 */
.work1-text{
	margin-left: 20px;
}

.work1-text p {
	font-size: 18px;
	margin-bottom: 16px;
	line-height: 1.4;
}

/* 実際のサイトを見るボタン */

.site-link{
display: inline-block;
padding: 10px 20px;
background: #6DBE00;
color: #fff;
text-decoration: none;
border-radius: 4px;
margin-top: 16px;
}

.site-link:hover{
opacity: 0.8;
}


/* ここからホテルサイト */

.work2-topimg{
	margin: 20px 0;
}

.work2-topimg img{
	width: 100%;
	height: auto;
	border-radius: 16px;
}

.work2-title {
	line-height: 2;
	background: #76b900;
	color: #fff;
	text-align: center;
	padding: 12px 0;
	margin: 40px 0 20px;
}

.work2-head {
	font-size: 29px;
	font-weight: 300;
	border-bottom: 1px solid #333;
	margin: 30px 0 10px;
	padding-bottom: 5px;
}

.work2-box {
	background: #f5f5f5;
	padding: 20px;
	line-height: 1.8;
}

.work2-body {
	display: flex;
	gap: 20px;
	margin-bottom: 30px;
}

.work2-thumb {
	width: 50%;
}

.work2-thumb img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 8px;
}

.work2-text {
	line-height: 1.8;
}

.work2-sub {
	text-decoration: #76b900;
	font-size: 19px;
	font-weight: 400;
	margin-top: 15px;
}

.work2-sub p{
	font-size: 19px;
	font-weight: 300;
	line-height: 1.4;
}

/* SP版拡大 */
/* サムネイル並び */
.thumb-list {
display: flex;
gap: 16px;
}

.thumb-list img {
width: 100px;
cursor: pointer;
transition: 0.3s;
}

.thumb-list img:hover {
opacity: 0.7;
}


/* モーダル初期状態 */
.modal {
position: absolute;
width: 100%;
	max-width: 1100px;
inset: 0; 
background: rgba(0,0,0,0.8);

opacity: 0;
pointer-events: none;
transition: 0.3s;

/* スクロール*/
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}

/* 表示中 */
.modal:target {
opacity: 1;
pointer-events: auto;
}

/* 画像 */
.modal img {
width: min(92vw, 700px); 
height: auto;
display: block;
margin: 80px auto 40px; 
}

/* 閉じるボタン */
.close {
position: sticky;
top: 16px;
margin-left: auto;
display: block;
width: fit-content;
padding: 8px 12px;
color: #fff;
font-size: 32px;
text-decoration: none;
line-height: 1;
}


/* ここからlogo */
/* 横並び（左：画像 / 右：テキスト） */
.work3-body{
display: block;
gap: 24px;
margin-top: 18px;
margin-bottom: 22px;
}

/* 左の四角（画像） */
.work3-thumb{
width: 340px; /* 好きな幅でOK */
border: 1px solid #ddd; /* 枠欲しければ */
overflow: hidden;
}

/* 画像共通 */
.work3-thumb img{
width: 100%;
display: block;
object-fit: cover;
}

/* 右テキスト */
.work3-text{
flex: 1;
}

.work3-sub{
margin: 0 0 10px;
font-size: 16px;
}

.work3-text p{
margin: 0 0 10px;
line-height: 1.7;
}

/* ここからDM */
.work4-thumb {
	width: 600px;
	height: auto;
	
	
}

/* 画像入れた時 */
.work4-thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}


/* ここからロゴA/B/C案 */
.work {
padding: 30px 0 60px;
}

.work-inner {
max-width: 980px;
margin: 0 auto;
padding: 0 20px;
}

.work-title {
background: #63B300;
padding: 18px 20px;
margin: 0 auto 28px;
max-width: 980px;
}

.work-title h1 {
margin: 0;
text-align: center;
color: #fff;
font-size: 20px;
letter-spacing: .05em;
}

.work-head {
font-size: 16px;
margin: 0 0 10px;
padding-bottom: 10px;
border-bottom: 1px solid #333;
}

.work-box {
padding: 14px 0 6px;
line-height: 1.7;
}

.work-box p {
margin: 0 0 10px;
}

.work-body {
display: flex;
gap: 26px;
margin-top: 18px;
}

.work-item {
width: calc((100% - 52px) / 3);
}

.work-thumb {
width: 100%;
height: 140px;
}


.work-text {
margin-top: 10px;
font-size: 12px;
line-height: 1.6;
}

.work-sub {
margin: 0 0 6px;
font-size: 13px;
}


.thumb5-row {
display: flex;
gap: 24px;
}

.thumb5-col {
flex: 1;
}

.thumb5-col .thumb-img {
width: 100%;
height: auto;
display: block;
}

.work5-text{
	font-size: 17px;
	line-height: 1.8;
	font-weight: 300;
	padding-top: 8px;
}

.mockup {
margin-top: 40px;
}

.mockup-title {
font-size: 20px;
font-weight: bold;
margin-bottom: 8px;
}

.mockup-lead {
font-size: 14px;
margin-bottom: 16px;
}

.mockup-row {
display: flex;
justify-content: space-between;
gap: 24px; 
}

.mockup-card {
width: calc((100% - 48px) / 3); 
}

.mockup-name {
font-weight: bold;
margin-bottom: 8px;
}

.mockup-img {
width: 100%;
height: auto;
display: block;
}

.sp-list{
display: flex;
justify-content: space-between;
list-style: none;
padding: 0;
margin: 0;
}

.sp-item{
width: 23%;
}

.sp-thumb{
display: block;
position: relative;
border: 1px solid #e0e0e0;
background: #fafafa;
text-decoration: none;
}

.sp-thumb img{
width: 100%;
height: auto;
display: block;
}

/* タップで拡大 */
.sp-badge{
position: absolute;
left: 8px;
bottom: 8px;
background: rgba(0,0,0,0.6);
color: #fff;
font-size: 12px;
padding: 4px 8px;
border-radius: 4px;
}

.modal{
display: none;
}

.modal:target{
display: block;
}

.modal{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 9999;
}

/* 背景 */
.modal-bg{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,0.55);
}

/* スクロール */
.modal-box{
position: relative;
width: 300px;
height: 75vh; /* 縦の表示領域 */
margin: 8vh auto 0;
background: #fff;
overflow-y: auto; 
border-radius: 8px;
padding: 16px;
}

/* 中の画像 */
.modal-box img{
width: 100%;
height: auto;
display: block;
}

/* ×ボタン */
.modal-close{
position: fixed;
right: 20px;
top: 20px;
width: 44px;
height: 44px;
line-height: 44px;
text-align: center;
background: rgba(255,255,255,0.95);
border-radius: 22px;
text-decoration: none;
color: #333;
font-size: 28px;
z-index: 10000;
}