@charset "UTF-8";

@font-face {
	font-family: "TK-takumi-okiraku-marker";
	src: url("../fonts/TK-takumi-okiraku-marker.woff2") format("woff2"),
		url("../fonts/TK-takumi-okiraku-marker.woff") format("woff");
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}



/** -----------------------------------------------
　　共通
------------------------------------------------**/
body {
	/*下記のCSSはご自身のデザインに合わせて書き換えてください。*/
	font-size: 16px;
	line-height: 1.6;
	color: #0a1004;
	background-color:#fff;
	font-family: "Noto Sans JP", "游ゴシック", "YuGothic", "游ゴシック体", "Osaka", "Verdana", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	font-weight: 500;
}

img {
	/* 最大幅を100%に指定 */
	max-width: 100%;
	display: block;
}

a {
	/* デフォルトCSSを打ち消す */
	text-decoration: none;
	color: #333333;
}
ul {
	/* デフォルトCSSを打ち消す */
    list-style-type: none;
}



/** -----------------------------------
    レイアウト
-------------------------------------**/
#about, #service, #style, #works, #member,#cta {
	/* 各セクション、上下に160pxの内側余白をつける */
	padding: 160px 0;
}

.section-inner{
	max-width: 1200px;
	margin: 0 auto;
	padding: 0 40px;
	box-sizing: border-box;

}

.col-2{
	display: flex;
	justify-content: space-between;
}

.col-2 .item{
	width: calc((100% - 74px)/2);
}


/** -------- スマホ -------- **/
@media screen and (max-width: 640px) {

	.section-inner {
        padding: 0 24px;
        max-width: 550px;
	
}
}


/** -----------------------------------
    テキスト
-------------------------------------**/

h2.large {
	/* 文字の種類を指定 */
	font-family: 'Noto Sans JP', sans-serif;
	/* 文字の太さを指定 */
	font-weight: bold;
	/* 文字のサイズを指定 */
	font-size: 30px;
	/* 文字間を指定 */
	letter-spacing: 0.2em;
	/* 左右中央に配置 */
	text-align: left;
}

h3.medium {
	/* 文字の太さを指定 */
	font-weight: normal;
	/* 文字のサイズを指定 */
	font-size: 27px;
	/* 行間を指定*/
	line-height: 1.8;
	/* 文字間を指定 */
	letter-spacing: 0.7em;
	/* ★下に外側余白20pxを設定 */
	margin-bottom: 40px;
}
p.large{
	/* 文字のサイズを指定 */
	font-size: 15px;
	/* 行間を指定*/
	line-height: 2;
	/* 文字間を指定 */
	letter-spacing: 0.08em;
}

p.medium {
	/* 文字のサイズを指定 */
	font-size: 14px;
	/* 行間を指定*/
	line-height: 2;
	/* 文字間を指定 */
	letter-spacing: 0.1em;
}

p.small {
	/* 文字のサイズを指定 */
	font-size: 16px;
	/* 行間を指定*/
	line-height: 2;
	/* 文字間を指定 */
	letter-spacing: 0.08em;
}

.cards{
	margin: 0 auto;
	max-width: 1200px;
}

.card{
	position: relative; /* 基準を作る */
	margin-bottom: 36px;
}

.card.is-green{
	position: relative; /* 基準を作る */
	margin-bottom: 36px;
}

.card.is-pink{
	position: relative; /* 基準を作る */
	margin-bottom: 36px;
}

.card-head {
	display: flex;
	align-items: center;
	gap: 16px;
	position: absolute;
	top: 112px;
}

.card-number{
	font-size: 50px;
	font-weight: normal;
	color: #ecfa19;
}

.card.is-green .card-number{
	font-size: 50px;
	font-weight: normal;
	color: #6fb92c;	
}

.card.is-pink .card-number{
	font-size: 50px;
	font-weight: normal;
	color: #ed5a80;	
}


.card-title{
	/* 文字の太さを指定 */
	font-weight: normal;
	/* 文字のサイズを指定 */
	font-size: 25px;
	/* 行間を指定*/
	line-height: 1.8;
	/* 文字間を指定 */
	letter-spacing: 0.5em;
}

.card-desc {
	max-width: 490px;   /* ← この幅で折り返される */
	line-height: 2.5;
	margin-top: 75px;
	font-size: 14px;
}

.card-img {
	display: flex;
	justify-content: center; /* 横中央 */
	align-items: center;     /* 縦中央 */	
}

.card.is-green.card-desc{
	margin-right: 82px;
}


/** -------- スマホ -------- **/
@media screen and (max-width: 640px) {
	h3.large {
		/* フォントサイズ26px */
		font-size: 26px;
	}
	p.medium {
		/* フォントサイズ15px */
		font-size: 15px;
	}
}


/** -----------------------------------
    ボタン
-------------------------------------**/
.more-button {
	width: 280px;
	height: 66px;
	background-color: #ffffff;
	border: 1px solid #b0b0b0;
	border-radius: 33px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 24px;
	box-sizing: border-box;
	text-decoration: none;
		/* ドロップシャドウ */
	box-shadow: 0 6px 6px rgba(10, 16, 4, 0.06);
		/* ★基準 */
	position: relative;
	transition: transform 0.3s ease, box-shadow 0.3s ease;	
	margin: 60px auto 0;
}

.more-text {
	font-size: 20px;
	color: #0a1004;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 20px;
	color: #0a1004;
}

.more-icon {
	position: absolute;
	top: 50%;
	right: 24px;
	transform: translateY(-50%);
	width: 16px;
	height: auto;
}

.more-button:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 12px rgba(10, 16, 4, 0.1);
}


/** -----------------------------------
    見出し
-------------------------------------**/
.title-en{
	text-align: left;
}

.section-title{
	/* 横並び */
	display: flex;          
	/* 縦位置を揃える */
	align-items: center;    
	 /* アイコンと文字の間 */
	gap: 12px;     
}


/** -----------------------------------
    ヘッダー
-------------------------------------**/
#header{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 120px;

	background-color: rgba(255,255,255,0.7);
	backdrop-filter: blur(10px);

	z-index: 1000;
}

/* ヘッダー内部 */
.header-inner{
	max-width: 1400px;
	width: 100%;
	height: 100%;

	margin: 0 auto;
	padding: 0 40px;
	box-sizing: border-box;

	display: flex;
	align-items: center;
}

/* ===== ロゴエリア ===== */
.header-logo{
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

/* ロゴ画像 */
.header-logo a img{
	width: clamp(120px, 14vw, 180px);
	height: auto;
}

/* 採用サイト */
.label-box{
	padding: 8px 16px;
	font-size: clamp(11px, 1vw, 14px);
	color: #6fb92c;

	display: flex;
	align-items: center;
	justify-content: center;

	margin-left: 12px;

	white-space: nowrap;
}

/* ===== 右側全体 ===== */
.gnav-pc-wrap{
	display: flex;
	align-items: center;

	margin-left: auto;
}

/* ===== PCナビ ===== */
.gnav-pc{
	display: flex;
	align-items: center;
}

.gnav-pc li{
	margin-right: 40px;
}

.gnav-pc li:last-child{
	margin-right: 0;
}

.gnav-pc a{
	font-size: 14px;
	letter-spacing: 0.08em;
	color: #0a1004;
	transition: opacity 0.3s ease;
}

.gnav-pc a:hover{
	opacity: 0.7;
}

/* ===== ENTRYボタン ===== */
.entry-button{
	width: 170px;
	height: 60px;

	margin-left: 40px;

	background-color: #6fb92c;
	color: #ffffff;

	font-size: 20px;
	font-weight: 600;

	text-decoration: none;

	display: flex;
	align-items: center;
	justify-content: center;

	box-sizing: border-box;
	border-radius: 30px;

	transition: opacity 0.3s ease;
}

.entry-button:hover{
	opacity: 0.85;
}

/* ===== ハンバーガー（PCでは非表示） ===== */
#menu-button{
	display: none;
}



/* =========================================
    スマホ表示
========================================= */
@media screen and (max-width: 640px){

	/* ===== ヘッダー ===== */
	#header{
		height: 82px;
	}

	.header-inner{
		padding: 0 0 0 16px;
	}

	/* ===== ロゴ ===== */
	.header-logo{
		display: flex;
		flex-direction: column;
		align-items: flex-start;
	}

	.header-logo a img{
		width: 137px;
		height: auto;
	}

	.label-box{
		width: 78px;
		height: 30px;

		margin-left: 0;
		margin-top: 6px;

		font-size: 12px;

		display: flex;
		align-items: center;
		justify-content: center;

		box-sizing: border-box;
	}

	/* ===== PCナビ非表示 ===== */
	.gnav-pc{
		display: none;
	}

	/* ===== 右側 ===== */
	.gnav-pc-wrap{
		margin-left: auto;
		height: 100%;
	}

	/* ===== ENTRY ===== */
	.entry-button{
		width: 82px;
		height: 82px;

		margin-left: 0;

		border-radius: 0;

		font-size: 14px;
	}

	/* ===== ハンバーガー ===== */
	#menu-button{
		display: flex;

		width: 82px;
		height: 82px;

		background-color: #6b6b6b;

		align-items: center;
		justify-content: center;
	}

	.menu-button-inner{
		position: relative;
		width: 24px;
		height: 16px;
	}

	.menu-button-inner span{
		position: absolute;
		left: 0;

		width: 100%;
		height: 2px;

		background-color: #ffffff;
	}

	.menu-button-inner span:nth-child(1){
		top: 0;
	}

	.menu-button-inner span:nth-child(2){
		top: 0;
		bottom: 0;
		margin: auto;
	}

	.menu-button-inner span:nth-child(3){
		bottom: 0;
	}
}

/** -----------------------------------
    メインビジュアル
-------------------------------------**/

#mainvisual{

	width: 100%;
	max-width: 100vw;
	height: 100vh;

	background-image: url("../images/1381742_m.jpg");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	display: flex;
	align-items: center;

	position: relative;
}

.maincopy {
	/* 文字 */
	color: #0a1004;
	font-family: "Zen Maru Gothic", sans-serif;
	font-size: 40px;
	line-height: 1.8;
	letter-spacing: 0.16em;

	/* 配置 */
	position: absolute;
	bottom: 10%;

	/* section-inner と左端を揃える */
	left: max(40px, calc((100vw - 1200px) / 2 + 40px));

	/* 文字を見やすくする */
	text-shadow: 2px 2px 0 #fff;
}


/** -------- スマホ -------- **/
@media screen and (max-width: 640px) {

	#mainvisual{
		width:100vw;
		height:680px;
		background-image:url("../images/1381742_m.jpg");
	}

	.maincopy{
		font-size:22px;
		line-height:1.6;
		letter-spacing:0.08em;

		position:absolute;
		bottom:40px;
		left:24px;

		text-shadow:2px 2px 0 #fff;
	}

}
/** -----------------------------------
    わたしたちについて（PC）
-------------------------------------**/

#about{
    background:#fff;
}

#about .col-2{
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
}

#about .about-text-wrap{
    width:calc((100% - 74px) / 2);

    display:flex;
    flex-direction:column;
}

#about .about_img_wrap{
    width:calc((100% - 74px) / 2);
}

#about p.medium{
    margin-top:68px;
    line-height:2.5;
    letter-spacing:.23em;
}

/* PCでは左カラム内に配置 */
#about .more-button{
    margin:55px auto 0;
}

#about .about_img2{
    margin-top:40px;
    margin-left:auto;
}


/** -------- わたしたちについて（SP） -------- **/
@media screen and (max-width:640px){

    #about{
        padding:0;
    }

    #about h2.large{
        font-size:20px;
    }

    #about p.medium{
        font-size:13px;
        letter-spacing:.2em;
    }

    #about .col-2{
        flex-direction:column;
    }

    #about .about-text-wrap{
        width:100%;
    }

    #about .section-title{
        padding-top:70px;
    }

    #about .about_img_wrap{
        width:100%;
        display:flex;
        gap:12px;
        margin-top:32px;
    }

    #about .about_img{
        width:55%;
    }

    #about .about_img2{
        width:45%;
        margin-top:16px;
        margin-left:0;
    }
	#about .section-inner{
		margin-bottom: 70px;
	}

    /* SPだけ中央寄せ */
    #about .more-button{
        margin:40px auto 0;
    }

}
/** -----------------------------------
    事業内容
-------------------------------------**/

#service{
    background-color: #fffcf1;
    padding: 160px 0;
}

#service h2.large{
    text-align: left;
}

#service p.large{
    margin-top: 40px;
    margin-bottom: 60px;
    line-height: 2;
}

/* =====================================
   Swiper
===================================== */

.service-swiper{
    position: relative;
    overflow: visible;
    padding-bottom: 70px;
}

/* スライド */
.service-swiper .swiper-slide{
    height: auto;
}

/* カード */
.service-card{
    background-color: #ffffff;
    border-radius: 16px;
    padding: 32px;
    box-sizing: border-box;
    height: 100%;
}

/* 上部 */
.card-head{
    display: flex;
    align-items: center;
    gap: 16px;
    position: static;
}

/* 番号 */
.card-number{
    font-size: 42px;
    font-weight: 500;
    color: #ecfa19;
    line-height: 1;
}

.card-number.green{
    color: #6fb92c;
}

.card-number.pink{
    color: #ed5a80;
}

/* タイトル */
.card-title{
    font-size: 22px;
    letter-spacing: .15em;
}

/* 説明 */
.card-desc{
    margin-top: 24px;
    font-size: 14px;
    line-height: 2;
}

/* 画像 */
.card-img{
    margin-top: 24px;
}

.card-img img{
    width: 100%;
    display: block;
    border-radius: 12px;
}

/* ==========================
   矢印
========================== */

.service-swiper .swiper-button-next,
.service-swiper .swiper-button-prev{
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid #dddddd;
    box-shadow: 0 4px 12px rgba(0,0,0,.08);
}

.service-swiper .swiper-button-next::after,
.service-swiper .swiper-button-prev::after{
    font-size: 18px;
    font-weight: bold;
    color: #333333;
}

/* ==========================
   ページネーション
========================== */

.service-swiper .swiper-pagination{
    bottom: 0;
}

.service-swiper .swiper-pagination-bullet{
    width: 10px;
    height: 10px;
    opacity: 1;
    background: #d5d5d5;
}

.service-swiper .swiper-pagination-bullet-active{
    background: #6fb92c;
}

/* =====================================
   sp
===================================== */

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

    #service{
        padding:70px 0;
    }

    #service h2.large{
        font-size:20px;
    }

    #service p.large{
        font-size:13px;
        line-height:2.2;
        margin-bottom:40px;
    }

    .service-card{
        padding:24px;
    }

    .card-number{
        font-size:34px;
    }

    .card-title{
        font-size:18px;
    }

    .card-desc{
        font-size:13px;
    }

    /* Swiper */
    .service-swiper{
        padding-bottom:50px;
    }

    .service-swiper .swiper-pagination{
        position:relative;
        margin-top:24px;
        bottom:auto;
    }

    /* moreボタン */
    #service .more-button{
        margin:40px auto 0;
    }

}

/** -----------------------------------
    働く環境
-------------------------------------**/

#style{
	background-color: #ffffff;
	height: auto;
}

#style h2.large{
	text-align: left;	
}

#style p.large{
	text-align: left;
	margin-top: 61px;
}

/* ===== 働く環境：3カラム ===== */
#style .style-list {
	max-width: 1200px;
	margin: 80px auto 0;

	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

/* 各アイテム */
#style .style-item {
	text-align: center;
}

/* 画像 */
#style .style-item img {
	border-radius: 12px;
}

/* 小見出し */
#style .style-title {
	margin-top: 16px;
	font-size: 16px;
	letter-spacing: 0.08em;
}


/** ===== スマホ ===== */
@media screen and (max-width:640px){

    #style{
        padding:70px 0;
    }

    /* 見出し */
    #style h2.large{
        font-size:20px;
    }

    /* 説明文 */
    #style p.large{
        font-size:13px;
        line-height:2;
        margin-top:32px;
    }

    /* 3カラム → 縦並び */
    #style .style-list{
        display:flex;
        flex-direction:column;
        gap:32px;
        margin-top:40px;
    }

    /* カード */
    #style .style-item{
        width:100%;
        text-align:center;
    }

    /* 画像 */
    #style .style-item img{
        width:100%;
        height:auto;
        border-radius:12px;
        display:block;
    }

    /* タイトル */
    #style .style-title{
        margin-top:16px;
        font-size:16px;
        letter-spacing:.08em;
    }

    /* ボタン */
    #style .more-button{
        margin:40px auto 0;
    }

}

/** -----------------------------------
    募集職種
-------------------------------------**/

#works{
	background-color: #fffcf1;
	height: auto;
}

#works .section-title{
	margin-bottom: 62px;
}

#works h2.large{
	text-align: left;	
}

#works p.large{
	text-align: left;
	margin-bottom: 72px;
}

/* ===== 一覧（2カラム） ===== */
#works .works-list {
	display: grid;
	grid-template-columns: repeat(2, 532px);
	gap: 32px;
	justify-content: space-between;
	}

/* ===== カード ===== */
#works .works-card {
	width: 532px;
	height: 220px;
	background-color: #fff;
	display: flex;
	border-radius: 12px;
}

/* ===== 画像 ===== */
#works .works-thumb {
	width: 213px;
	height: 167px;
	margin: 27px 50px 0 28px;
	display: flex;
	align-items: center;
	justify-content: center;
}

#works .works-thumb img {
	width: 213px;
	height: 167px;
	object-fit: cover;
	border-radius: 8px;
}

/* ===== テキスト ===== */
#works .works-body {
	margin-top: 36px;
}

#works .works-title {
	font-size: 18px;
	margin-bottom: 12px;
	letter-spacing: 0.15em;
}

#works .works-tags li {
	font-size: 13px;
	line-height: 1.8;
	color: #666;
}

/* ==========================================
   募集職種（SP）
========================================== */
@media screen and (max-width:640px){

  /* セクション余白 */
  #works{
    padding:70px 0;
  }

  /* 見出し */
  #works h2.large{
    font-size:20px;
  }

  /* 説明文 */
  #works p.large{
    font-size:13px;
    line-height:2;
    margin-top:32px;
    margin-bottom:40px;
  }

  /* 一覧 */
  #works .works-list{
    display:flex;
    flex-direction:column;
    gap:16px;
    align-items:center;
  }

  /* カード */
  #works .works-card{
    width:335px;
    height:50px;
    background:#ffffff;
    border-radius:4px;

    display:flex;
    align-items:center;
    justify-content:space-between;

    padding:0 18px;
    box-sizing:border-box;
  }

  /* 写真は非表示 */
  #works .works-thumb{
    display:none;
  }

  /* タグは非表示 */
  #works .works-tags{
    display:none;
  }

  /* body */
  #works .works-body{
    margin:0;
    width:100%;
    display:flex;
    align-items:center;
    justify-content:space-between;
  }

  /* タイトル */
  #works .works-title{
    margin:0;
    font-size:16px;
    font-weight:500;
    letter-spacing:.08em;
    color:#222;
  }

  /* 三角アイコン */
  #works .works-body::after{
    content:"";
    width:12px;
    height:18px;
    background-image:url("../images/三角形　cta.png");
    background-repeat:no-repeat;
    background-position:center;
    background-size:contain;
    flex-shrink:0;
  }

  /* moreボタン */
  #works .more-button{
    margin:40px auto 0;
  }

}

/** -----------------------------------
    メンバー紹介
-------------------------------------**/

#member{
    background:#fff;
    padding:160px 0;
}

#member h2.large{
    text-align:left;
}

#member p.large{
    margin-top:40px;
    margin-bottom:60px;
}

/*==========================
PC
==========================*/

.member-swiper{
    overflow:hidden;
}

.member-swiper .swiper-wrapper{
    display:grid;
    grid-template-columns:repeat(2,1fr);
    gap:48px 40px;
}

.member-swiper .swiper-slide{
    width:auto !important;
}

.member-item{
    display:flex;
    flex-direction:column;
}

.member-image{
    position:relative;
}

.member-image img{
    width:100%;
    display:block;
}

.member-label{

    position:absolute;

    left:0;
    bottom:28px;

    width:190px;
    height:78px;

    background:#fff;

    padding:12px;

    box-sizing:border-box;
}

.member-case{
    font-size:12px;
    margin-bottom:4px;
}

.member-name{
    font-size:14px;
    font-weight:bold;
}

.member-info{

    text-align:center;

    margin-top:18px;
}

.member-role{

    font-size:14px;

    color:#555;
}

/* PCでは矢印・ドットを非表示 */
.member-prev,
.member-next,
.member-pagination{
    display: none;
}

/*==========================
SP
==========================*/

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

#member{

    padding:70px 0;
}

#member h2.large{
    font-size:20px;
}

#member p.large{

    margin-top:32px;
    margin-bottom:40px;

    font-size:13px;

    line-height:2;
}

.member-swiper{

    overflow:visible;

    position:relative;

    padding-bottom:0;
}

.member-swiper .swiper-wrapper{

    display:flex;

    gap:0;

    align-items:stretch;
}

.member-swiper .swiper-slide{

    width:auto;

    height:auto;
}

.member-item{

    background:#fff;

    display:flex;

    flex-direction:column;

    height:100%;
}

.member-image img{

    width:100%;

    aspect-ratio:4 / 3;

    object-fit:cover;

    display:block;
}

.member-label{

    width:190px;

    height:78px;
}

.member-info{

    margin-top:18px;

    text-align:center;

    margin-bottom:32px;
}

.member-role{

    font-size:14px;
}

/*==========================
矢印
==========================*/

.member-next,
.member-prev{

    display:flex;

    width:52px;

    height:52px;

    border-radius:50%;

    background:#fff;

    border:1px solid #ddd;

    box-shadow:0 4px 12px rgba(0,0,0,.08);
}

.member-next::after,
.member-prev::after{

    font-size:18px;

    color:#333;

    font-weight:bold;
}

/*==========================
ドット
==========================*/

.member-pagination{

    position:static !important;

    display:flex;

    justify-content:center;

    margin-top:8px;
}

.member-pagination .swiper-pagination-bullet{

    width:10px;

    height:10px;

    background:#d5d5d5;

    opacity:1;
}

.member-pagination .swiper-pagination-bullet-active{

    background:#6fb92c;
}

/* moreボタン */

#member .more-button{

    margin:40px auto 0;
}

}

/** -----------------------------------
    CTA
-------------------------------------**/

#cta{
	background-image: url("../images/cta背景.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	height: 330px;
}


#cta p.large{
	text-align: center;	
	font-size: 27px;
	margin-top: -85px;
}

#cta p.medium{
	text-align: center;
	margin-top: 36px;
}


/* ===== moreボタン ===== */
/* CTAボタン：幅を広げてテキスト1行に */
.cta-button {
	width: 340px;  /* ← ここを280pxから広げた */
	height: 66px;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	margin: 30px auto 0; /* 横中央 */
	background-color: #ffffff;
	border: 1px solid #b0b0b0;
	border-radius: 33px;
	box-shadow: 0 6px 6px rgba(10,16,4,0.06);
	text-decoration: none;
	transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.cta-button:hover {
	transform: translateY(-3px);
	box-shadow: 0 10px 12px rgba(10,16,4,0.1);
}

.cta-button .more-text {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-size: 20px;
	color: #0a1004;
	font-weight: 600;
	white-space: nowrap; /* ← これで改行防止 */
}

.cta-button .more-icon {
	position: absolute;
	top: 50%;
	right: 24px;
	transform: translateY(-50%);
	width: 16px;
	height: auto;
}

@media screen and (max-width:640px){
	#cta p.large{
		font-size: 20px;
	}
	#cta p.medium{
		font-size: 13px;
	}
}


/** -----------------------------------
    footer
-------------------------------------**/
.footer {
	background-color: #fbf7ee;
	padding: 40px 20px 24px;
	font-size: 14px;
	color: #222;
}

.footer-inner {
	max-width: 1200px;
	margin: 0 auto 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
}

/* 左側 */

.footer-left {
	display: flex;
	flex-direction: column; /* 上下に並べる */
	align-items: center;    /* 横方向中央揃え */
}

.footer-logo {
	font-size: 24px;
	font-weight: bold;
	letter-spacing: 0.08em;
	margin-bottom: 12px;
}

/* ロゴの下にアイコンを配置 */
.footer-sns {
	display: flex;
	gap: 19px;          /* アイコン間の距離 */
	margin-top: 24px;    /* ロゴからの距離 */
}

.footer-sns img {
	width: 20px;
	height: auto;
}

/* 右側ナビ */
.footer-nav {
	display: flex;
	gap: 32px;
}

.footer-nav a {
	color: #222;
	text-decoration: none;
	font-size: 14px;
}

.footer-nav a:hover {
	text-decoration: underline;
}

/* コピーライト */
.footer-copy {
	text-align: center;
	font-size: 12px;
	color: #555;
}


/** -----------------------------------------------
	PC :  画面の横幅が641px以上
------------------------------------------------**/

.example {
	font-size: 50px;
	color: #99293D;
}




/** -----------------------------------------------
	Smartphone : 画面の横幅が640pxまで
------------------------------------------------**/
@media screen and (max-width:640px){

	.example {
		font-size: 20px;
		color: #AD8651;
	}

	/* ==========================
	   footer
	========================== */

	.footer{
		padding:40px 24px 24px;
	}

	.footer-inner{
		display:flex;
		flex-direction:column;
		align-items:center;
		text-align:center;
		gap:32px;
		margin-bottom:24px;
	}

	/* 左側 */
	.footer-left{
		align-items:center;
	}

	.footer-sns{
		justify-content:center;
		margin-top:24px;
	}

	/* 右側ナビを縦並び */
	.footer-nav{
		display:flex;
		flex-direction:column;
		align-items:center;
		gap:16px;
	}

	.footer-nav a{
		display:block;
		font-size:14px;
		line-height:1.8;
	}

	/* コピーライト */
	.footer-copy{
		font-size:12px;
		text-align:center;
	}
}