├── css
    ├── object
    │   ├── utility
    │   │   └── _utility.scss
    │   ├── project
    │   │   ├── _page.scss
    │   │   ├── _single.scss
    │   │   ├── _archive.scss
    │   │   ├── _contact.scss
    │   │   └── _project.scss
    │   └── component
    │   │   └── _component.scss
    ├── style.scss
    ├── foundation
    │   ├── _var.scss
    │   ├── _base.scss
    │   └── _reset.scss
    ├── layout
    │   ├── _main.scss
    │   ├── _footer.scss
    │   ├── _header.scss
    │   └── _top.scss
    └── style.css.map
├── favicon.ico
├── img
    ├── ogp.jpg
    ├── top.jpg
    ├── blog-bg.jpg
    ├── capsule.png
    ├── news-bg.jpg
    ├── page-bg.jpg
    ├── capsules.jpg
    ├── icon
    │   ├── line.png
    │   ├── instagram.png
    │   ├── arrow.svg
    │   ├── check.svg
    │   ├── blog.svg
    │   ├── mail.svg
    │   ├── contact.svg
    │   ├── pointer.svg
    │   └── calendar.svg
    ├── capsule-bg.png
    ├── capsules_sp.jpg
    ├── conditioning.jpg
    ├── contact-bg.jpg
    ├── capsule-exterior.png
    ├── capsule-interior.png
    ├── personal-training.jpg
    └── logo.svg
├── screenshot.png
├── favicon-96x96.png
├── apple-touch-icon.png
├── web-app-manifest-192x192.png
├── web-app-manifest-512x512.png
├── style.css
├── footer.php
├── site.webmanifest
├── 404.php
├── page.php
├── sidebar.php
├── README.md
├── header.php
├── inc
    ├── footer.php
    └── header.php
├── favicon.svg
├── js
    └── script.js
├── archive.php
├── single.php
├── functions.php
└── index.php


/css/object/utility/_utility.scss:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/000Jerry000/unico/HEAD/favicon.ico


--------------------------------------------------------------------------------
/img/ogp.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/000Jerry000/unico/HEAD/img/ogp.jpg


--------------------------------------------------------------------------------
/img/top.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/000Jerry000/unico/HEAD/img/top.jpg


--------------------------------------------------------------------------------
/img/blog-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/000Jerry000/unico/HEAD/img/blog-bg.jpg


--------------------------------------------------------------------------------
/img/capsule.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/000Jerry000/unico/HEAD/img/capsule.png


--------------------------------------------------------------------------------
/img/news-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/000Jerry000/unico/HEAD/img/news-bg.jpg


--------------------------------------------------------------------------------
/img/page-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/000Jerry000/unico/HEAD/img/page-bg.jpg


--------------------------------------------------------------------------------
/screenshot.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/000Jerry000/unico/HEAD/screenshot.png


--------------------------------------------------------------------------------
/favicon-96x96.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/000Jerry000/unico/HEAD/favicon-96x96.png


--------------------------------------------------------------------------------
/img/capsules.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/000Jerry000/unico/HEAD/img/capsules.jpg


--------------------------------------------------------------------------------
/img/icon/line.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/000Jerry000/unico/HEAD/img/icon/line.png


--------------------------------------------------------------------------------
/apple-touch-icon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/000Jerry000/unico/HEAD/apple-touch-icon.png


--------------------------------------------------------------------------------
/img/capsule-bg.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/000Jerry000/unico/HEAD/img/capsule-bg.png


--------------------------------------------------------------------------------
/img/capsules_sp.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/000Jerry000/unico/HEAD/img/capsules_sp.jpg


--------------------------------------------------------------------------------
/img/conditioning.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/000Jerry000/unico/HEAD/img/conditioning.jpg


--------------------------------------------------------------------------------
/img/contact-bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/000Jerry000/unico/HEAD/img/contact-bg.jpg


--------------------------------------------------------------------------------
/img/icon/instagram.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/000Jerry000/unico/HEAD/img/icon/instagram.png


--------------------------------------------------------------------------------
/img/capsule-exterior.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/000Jerry000/unico/HEAD/img/capsule-exterior.png


--------------------------------------------------------------------------------
/img/capsule-interior.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/000Jerry000/unico/HEAD/img/capsule-interior.png


--------------------------------------------------------------------------------
/img/personal-training.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/000Jerry000/unico/HEAD/img/personal-training.jpg


--------------------------------------------------------------------------------
/web-app-manifest-192x192.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/000Jerry000/unico/HEAD/web-app-manifest-192x192.png


--------------------------------------------------------------------------------
/web-app-manifest-512x512.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/000Jerry000/unico/HEAD/web-app-manifest-512x512.png


--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | /*
2 | Theme Name: Unico
3 | Author: Michael
4 | Author URI: https://color-piece.com/
5 | Description: Unico専用オリジナルテーマです。
6 | Version: 1.0
7 | */


--------------------------------------------------------------------------------
/img/icon/arrow.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><g transform="translate(-1254 -507)"><path d="M8,0,6.545,1.455l5.506,5.506H0V9.039H12.052L6.545,14.545,8,16l8-8Z" transform="translate(1254 507)" fill="#938980"/></g></svg>


--------------------------------------------------------------------------------
/footer.php:
--------------------------------------------------------------------------------
1 | <script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
2 | <script src="<?php echo esc_url(get_template_directory_uri()); ?>/js/script.js"></script>
3 | 
4 | <?php wp_footer(); ?>


--------------------------------------------------------------------------------
/img/icon/check.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><rect width="16" height="16" transform="translate(0)" fill="none"/><path d="M6.345,11.034,0,4.69,1.287,3.4,6.345,8.368,14.713,0,16,1.287Z" transform="translate(0 2)" fill="#98a6b5"/></svg>


--------------------------------------------------------------------------------
/css/object/project/_page.scss:
--------------------------------------------------------------------------------
 1 | @use "../../foundation/var";
 2 | 
 3 | .p-page {
 4 | 	padding: 7.6rem 4.6rem;
 5 | 	background-color: #FFF;
 6 | 	box-shadow: 0 3px 6px #00000029;
 7 | 	@include var.mq-max(800px) {
 8 | 		padding: 7.6rem 4.6rem 0;
 9 | 	}
10 | 	@include var.mq-max(600px) {
11 | 		padding: 3.6rem 2.4rem 0;
12 | 	}
13 | }
14 | 


--------------------------------------------------------------------------------
/site.webmanifest:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Unico",
 3 |   "short_name": "Unico",
 4 |   "icons": [
 5 |     {
 6 |       "src": "/web-app-manifest-192x192.png",
 7 |       "sizes": "192x192",
 8 |       "type": "image/png",
 9 |       "purpose": "maskable"
10 |     },
11 |     {
12 |       "src": "/web-app-manifest-512x512.png",
13 |       "sizes": "512x512",
14 |       "type": "image/png",
15 |       "purpose": "maskable"
16 |     }
17 |   ],
18 |   "theme_color": "#ffffff",
19 |   "background_color": "#ffffff",
20 |   "display": "standalone"
21 | }


--------------------------------------------------------------------------------
/css/style.scss:
--------------------------------------------------------------------------------
 1 | // Foundation
 2 | @use "foundation/reset";
 3 | @use "foundation/base";
 4 | 
 5 | // Layout
 6 | @use "layout/header";
 7 | @use "layout/top";
 8 | @use "layout/main";
 9 | @use "layout/footer";
10 | 
11 | // Object
12 | // component
13 | @use "object/component/component";
14 | 
15 | // project
16 | @use "object/project/project";
17 | @use "object/project/page";
18 | @use "object/project/single";
19 | @use "object/project/archive";
20 | @use "object/project/contact";
21 | 
22 | // utility
23 | @use "object/utility/utility";
24 | 


--------------------------------------------------------------------------------
/css/foundation/_var.scss:
--------------------------------------------------------------------------------
 1 | @mixin mq-max($width) {
 2 | 	@media (max-width: $width) {
 3 | 		@content;
 4 | 	}
 5 | }
 6 | @mixin mq-min($width) {
 7 | 	@media (min-width: $width) {
 8 | 		@content;
 9 | 	}
10 | }
11 | 
12 | $color-main: #F0F3F5;
13 | $color-letter: #333;
14 | $color-gray: #5D5D5D;
15 | $color-darkgray: #4F5357;
16 | $color-lightgray: #E4E4E4;
17 | $color-green: #9DC6C0;
18 | $color-yellow: #FFE51C;
19 | $color-pink: #DE8080;
20 | $color-lightpink: #F48585;
21 | $color-anchor: #00AEE0;
22 | $content-width: 1280px;
23 | $inner-top-content-width: 960px;
24 | $inner-page-content-width: 1100px;
25 | 


--------------------------------------------------------------------------------
/img/icon/blog.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 27.941 27.94">
 2 |   <defs>
 3 |     <clipPath id="clip-path">
 4 |       <rect width="27.941" height="27.94" fill="#5d5d5d"/>
 5 |     </clipPath>
 6 |   </defs>
 7 |   <g clip-path="url(#clip-path)">
 8 |     <path d="M26.612,3.355l0,0L26.6,3.344h0l-.011-.01L24.6,1.342l0,0a4.578,4.578,0,0,0-6.472,0L16.249,3.215l-.712.711L0,19.464V27.94H8.476L24.013,12.4l.712-.712L26.6,9.816a4.577,4.577,0,0,0,.013-6.459ZM7.453,25.47H2.471V20.488L17.284,5.674l4.982,4.982Zm17.4-17.4L23.69,9.233,18.708,4.25l1.163-1.163a2.106,2.106,0,0,1,2.978,0l2,2a2.107,2.107,0,0,1,0,2.979" transform="translate(0 0)" fill="#5d5d5d"/>
 9 |   </g>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/css/layout/_main.scss:
--------------------------------------------------------------------------------
 1 | @use "../foundation/var";
 2 | 
 3 | .l-main {
 4 | 	max-width: var.$content-width;
 5 | 	margin: 0 auto;
 6 | 	padding: 0 .8rem;
 7 | 
 8 | 	&--single {
 9 | 		background-color: #FFF;
10 | 		box-shadow: 0 0 0 100vmax #FFF;
11 | 		clip-path: inset(0 -100vmax -100vmax);
12 | 	}
13 | 	&--archive {
14 | 		background-color: #FFF;
15 | 		box-shadow: 0 0 0 100vmax #FFF;
16 | 		clip-path: inset(0 -100vmax -100vmax);
17 | 	}
18 | 
19 | 	&__section {
20 | 		margin: 0 auto 4.8rem;
21 | 		padding: 4.8rem 0;
22 | 
23 | 		&--top {
24 | 			max-width: var.$inner-top-content-width;
25 | 		}
26 | 		&--page {
27 | 			margin-top: -3.0rem;
28 | 			max-width: var.$inner-page-content-width;
29 | 			@include var.mq-max(600px) {
30 | 				margin-top: -1.5rem;
31 | 			}
32 | 		}
33 | 		&--single {
34 | 			max-width: var.$inner-page-content-width;
35 | 		}
36 | 		&--archive {
37 | 			max-width: var.$inner-page-content-width;
38 | 		}
39 | 	}
40 | }
41 | 


--------------------------------------------------------------------------------
/img/icon/mail.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 14 10.927"><defs><clipPath id="a"><rect width="14" height="10.927"/></clipPath></defs><g clip-path="url(#a)"><path d="M13.966,1.481a1.837,1.837,0,0,0-.381-.806,1.551,1.551,0,0,0-.124-.137A1.845,1.845,0,0,0,12.161,0H1.839a1.826,1.826,0,0,0-1.3.539A1.613,1.613,0,0,0,.414.677a1.815,1.815,0,0,0-.378.8A1.776,1.776,0,0,0,0,1.839v7.25a1.849,1.849,0,0,0,.539,1.3c.041.041.083.079.127.116a1.843,1.843,0,0,0,1.173.422H12.161a1.829,1.829,0,0,0,1.175-.425,1.592,1.592,0,0,0,.125-.113,1.828,1.828,0,0,0,.376-.543l.012-.029A1.813,1.813,0,0,0,14,9.089V1.839a1.884,1.884,0,0,0-.034-.357M.952,1.173a.865.865,0,0,1,.1-.12A1.1,1.1,0,0,1,1.839.728H12.161a1.1,1.1,0,0,1,.785.326,1.108,1.108,0,0,1,.1.117l.079.106-5.51,4.8a.937.937,0,0,1-1.231,0l-5.5-4.8ZM.732,9.153a.439.439,0,0,1,0-.064v-7.1L5,5.719.771,9.409Zm11.981.9a1.1,1.1,0,0,1-.551.146H1.839a1.1,1.1,0,0,1-.551-.146l-.173-.1L5.488,6.142l.479.417a1.573,1.573,0,0,0,2.067,0l.479-.417,4.372,3.812Zm.56-.964a.459.459,0,0,1,0,.063l-.038.259L9,5.721l4.275-3.73Z" transform="translate(0 0)"/></g></svg>


--------------------------------------------------------------------------------
/404.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ja">
 3 | <head prefix="og: https://ogp.me/ns#">
 4 | 	<?php get_header(); ?>
 5 | </head>
 6 | <body>
 7 | <header>
 8 | 	<?php get_template_part('inc/header'); ?>
 9 | </header>
10 | 
11 | <section class="l-top l-top--single" style="background: url(<?php echo esc_url(get_template_directory_uri()); ?>/img/blog-bg.jpg) no-repeat center/cover">
12 | 	<div class="c-pagetitle">
13 | 		<p class="c-pagetitle__main">404 ERROR</p>
14 | 		<p class="c-pagetitle__sub">404エラー</p>
15 | 	</div>
16 | </section>
17 | 
18 | <main class="l-main l-main--single">
19 | 	<section class="l-main__section l-main__section--single p-single">
20 | 		<div class="c-breadcrumb"><?php breadcrumb(); ?></div>
21 | 
22 | 		<div class="p-single__wrap">
23 | 			<div class="p-single__wrap-content">
24 | 				<h1 class="p-single__wrap-content-title">404ページ</h1>
25 | 				<div class="p-single__wrap-content-body">
26 | 					<p>お探しのページは見つかりませんでした。</p>
27 | 				</div>
28 | 			</div>
29 | 		</div>
30 | 	</section>
31 | </main>
32 | 
33 | <footer>
34 | 	<?php get_template_part('inc/footer'); ?>
35 | </footer>
36 | 
37 | <?php get_footer(); ?>
38 | </body>
39 | </html>


--------------------------------------------------------------------------------
/img/icon/contact.svg:
--------------------------------------------------------------------------------
 1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 23.49 18.334">
 2 |   <defs>
 3 |     <clipPath id="clip-path">
 4 |       <rect width="23.49" height="18.334" fill="#9dc6c0"/>
 5 |     </clipPath>
 6 |   </defs>
 7 |   <g clip-path="url(#clip-path)">
 8 |     <path d="M23.432,2.485a3.082,3.082,0,0,0-.639-1.352A2.6,2.6,0,0,0,22.585.9,3.1,3.1,0,0,0,20.4,0H3.085A3.064,3.064,0,0,0,.9.9a2.707,2.707,0,0,0-.21.232A3.046,3.046,0,0,0,.06,2.487a2.98,2.98,0,0,0-.06.6V15.249A3.1,3.1,0,0,0,.9,17.43c.07.069.139.133.212.2a3.093,3.093,0,0,0,1.969.709H20.4a3.069,3.069,0,0,0,1.971-.714,2.672,2.672,0,0,0,.21-.19,3.068,3.068,0,0,0,.632-.911l.02-.048a3.042,3.042,0,0,0,.252-1.222V3.085a3.161,3.161,0,0,0-.058-.6M1.6,1.969a1.451,1.451,0,0,1,.17-.2,1.852,1.852,0,0,1,1.317-.547H20.4a1.838,1.838,0,0,1,1.318.547,1.859,1.859,0,0,1,.168.2l.132.178L12.778,10.2a1.572,1.572,0,0,1-2.066,0L1.477,2.145Zm-.37,13.388a.736.736,0,0,1-.006-.107V3.337L8.4,9.6l-7.1,6.192Zm20.1,1.511a1.851,1.851,0,0,1-.924.245H3.085a1.85,1.85,0,0,1-.924-.245l-.29-.168L9.208,10.3l.8.7a2.639,2.639,0,0,0,3.468,0l.8-.7,7.335,6.4Zm.939-1.618a.77.77,0,0,1-.005.106l-.064.435L15.095,9.6,22.268,3.34Z" transform="translate(0 0)" fill="#9dc6c0"/>
 9 |   </g>
10 | </svg>
11 | 


--------------------------------------------------------------------------------
/page.php:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="ja">
 3 | <head prefix="og: https://ogp.me/ns#">
 4 | 	<?php get_header(); ?>
 5 | </head>
 6 | <body>
 7 | <header>
 8 | 	<?php get_template_part('inc/header'); ?>
 9 | </header>
10 | 
11 | <?php
12 | 	if (have_posts()) {
13 | 		while (have_posts()) {
14 | 			the_post();
15 | 			$img = wp_get_attachment_image_src(get_post_thumbnail_id());
16 | 			if (empty($img)) {
17 | 				$img = [get_template_directory_uri().'/img/blog-bg.jpg'];
18 | 			}
19 | ?>
20 | 
21 | <section class="l-top l-top--page" style="background: url(<?php echo esc_html($img[0]); ?>) no-repeat center/cover">
22 | 	<div class="c-pagetitle">
23 | 		<h1 class="c-pagetitle__main"><?php the_title(); ?></h1>
24 | 		<p class="c-pagetitle__sub"><?php echo esc_html(get_post_meta($post->ID, 'title_sub', true)); ?></p>
25 | 	</div>
26 | </section>
27 | 
28 | <main class="l-main">
29 | 	<section class="l-main__section l-main__section--page p-page">
30 | 		<div class="c-breadcrumb"><?php breadcrumb(); ?></div>
31 | 
32 | 		<div class="p-page__content">
33 | 			<?php the_content(); ?>
34 | 		</div>
35 | 	</section>
36 | </main>
37 | 
38 | <?php
39 | 		}
40 | 	}
41 | ?>
42 | 
43 | <footer>
44 | 	<?php get_template_part('inc/footer'); ?>
45 | </footer>
46 | 
47 | <?php get_footer(); ?>
48 | </body>
49 | </html>


--------------------------------------------------------------------------------
/sidebar.php:
--------------------------------------------------------------------------------
 1 | <?php $post_type = get_post_type(); ?>
 2 | <div class="c-sidebar-group c-sidebar-group--archive">
 3 | 	<p class="c-sidebar-group-header">カテゴリー</p>
 4 | 	<ul>
 5 | 		<?php
 6 | 		if ($post_type == 'blog') {
 7 | 			$categories = get_terms('blog_category');
 8 | 		} else if ($post_type == 'news') {
 9 | 			$categories = get_terms('news_category');
10 | 		}
11 | 		foreach ($categories as $category) {
12 | 		?>
13 | 		<li><a href="<?php echo esc_url(get_term_link($category->term_id)); ?>"><?php echo esc_html($category->name); ?></a></li>
14 | 		<?php
15 | 		}
16 | 		?>
17 | 	</ul>
18 | 	<ul>
19 | 		<li class="u-all"><a href="<?php echo esc_url(get_post_type_archive_link($post_type)); ?>">すべて</a></li>
20 | 	</ul>
21 | </div>
22 | 
23 | <?php if ($post_type == 'blog') { ?>
24 | <div class="c-sidebar-group c-sidebar-group--archive">
25 | 	<p class="c-sidebar-group-header">キーワード</p>
26 | 	<ul>
27 | 		<?php
28 | 		$tags = get_terms('blog_tag');
29 | 		foreach ($tags as $tag) {
30 | 		?>
31 | 		<li><a href="<?php echo esc_url(get_category_link($tag->term_id)); ?>"><?php echo esc_html($tag->name); ?></a></li>
32 | 		<?php
33 | 		}
34 | 		?>
35 | 	</ul>
36 | 	<ul>
37 | 		<li class="u-all"><a href="<?php echo esc_url(get_post_type_archive_link($post_type)); ?>">すべて</a></li>
38 | 	</ul>
39 | </div>
40 | <?php } ?>
41 | 


--------------------------------------------------------------------------------
/img/icon/pointer.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 26.728 34.083"><defs><clipPath id="a"><rect width="26.728" height="34.083" fill="none"/></clipPath></defs><g clip-path="url(#a)"><path d="M37.366,35.626a1.376,1.376,0,0,1,.8.259L54.149,47.427a1.361,1.361,0,0,1-.044,2.241l-3.638,2.419L54.9,58.761a1.369,1.369,0,0,1-.382,1.892l-1.974,1.312a1.366,1.366,0,0,1-1.892-.382L46.19,54.866l-3.613,2.466a1.361,1.361,0,0,1-2.083-.826L36.037,37.3a1.348,1.348,0,0,1,.255-1.151A1.383,1.383,0,0,1,37.366,35.626ZM52.781,48.521l-14.9-10.76,4.169,17.96,3.509-2.4a1.365,1.365,0,0,1,1.891.38l4.466,6.717,1.413-.99-4.442-6.681a1.367,1.367,0,0,1,.38-1.891Z" transform="translate(-28.404 -28.11)" fill="#333"/><path d="M-.97.933a.843.843,0,0,1-.7-.373L-3.856-2.685a.844.844,0,0,1,.228-1.171.844.844,0,0,1,1.171.228L-.271-.383A.844.844,0,0,1-.5.789.84.84,0,0,1-.97.933Z" transform="translate(7.262 4.566)" fill="#333"/><path d="M.334-1.958a.853.853,0,0,1-.086,0l-3.49-.354A.844.844,0,0,1-4-3.242.844.844,0,0,1-3.071-4l3.49.354a.844.844,0,0,1,.754.925A.844.844,0,0,1,.334-1.958Z" transform="translate(4 11.117)" fill="#333"/><path d="M-3.156,1.057a.844.844,0,0,1-.236-.034A.844.844,0,0,1-3.967-.023l.981-3.369A.844.844,0,0,1-1.94-3.967a.844.844,0,0,1,.574,1.046L-2.347.449A.844.844,0,0,1-3.156,1.057Z" transform="translate(13.578 4.001)" fill="#333"/></g></svg>


--------------------------------------------------------------------------------
/css/foundation/_base.scss:
--------------------------------------------------------------------------------
 1 | @use "var";
 2 | 
 3 | html {
 4 | 	font-size: 62.5%;
 5 | }
 6 | 
 7 | body {
 8 | 	margin: 0 auto;
 9 | 	background-color: var.$color-main;
10 | 	color: var.$color-letter;
11 | 	font-family: "Helvetica Neue", Helvetica, Arial, "游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
12 | 	font-weight: 500;
13 | 	font-size: 1.5rem;
14 | 	letter-spacing: .1em;
15 | 	line-height: 1.5;
16 | 	position: relative;
17 | }
18 | 
19 | // For page and single
20 | .p-single__wrap-content-body, .p-page__content {
21 | 	h2 {
22 | 		margin: 3.0rem 0 2.4rem;
23 | 		font-size: 2.0rem;
24 | 		font-weight: bold;
25 | 	}
26 | 
27 | 	h3 {
28 | 		margin: 2.4rem 0 2.0rem;
29 | 		font-size: 1.8rem;
30 | 		font-weight: bold;
31 | 	}
32 | 
33 | 	h4 {
34 | 		margin: 2.0rem 0 1.8rem;
35 | 		font-size: 1.6rem;
36 | 		font-weight: bold;
37 | 	}
38 | 
39 | 	p {
40 | 		margin-bottom: 1.8rem;
41 | 	}
42 | 
43 | 	img {
44 | 		margin-bottom: 1.8rem;
45 | 	}
46 | 
47 | 	a {
48 | 		color: var.$color-anchor;
49 | 		&:hover {
50 | 			text-decoration: underline;
51 | 		}
52 | 	}
53 | 
54 | 	img {
55 | 		max-width: 100%;
56 | 	}
57 | 
58 | 	ol {
59 | 		margin-bottom: 1.8rem;
60 | 		list-style: decimal inside;
61 | 
62 | 		li {
63 | 			padding: .3rem 1.6rem .3rem 0;
64 | 		}
65 | 	}
66 | 
67 | 	ul {
68 | 		margin-bottom: 1.8rem;
69 | 		list-style: disc inside;
70 | 
71 | 		li {
72 | 			padding: .3rem 1.6rem .3rem 0;
73 | 		}
74 | 	}
75 | 
76 | 	pre {
77 | 		white-space: pre-wrap;
78 | 	}
79 | }


--------------------------------------------------------------------------------
/img/icon/calendar.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" width="25.483" height="26.207" viewBox="0 0 25.483 26.207"><g transform="translate(-7.073)"><path d="M121.7,5.3a1.483,1.483,0,0,0,1.483-1.483V1.483a1.483,1.483,0,0,0-2.966,0V3.816A1.483,1.483,0,0,0,121.7,5.3Z" transform="translate(-107.356)" fill="#cdd6de"/><path d="M335.326,5.3a1.483,1.483,0,0,0,1.483-1.483V1.483a1.483,1.483,0,0,0-2.965,0V3.816A1.483,1.483,0,0,0,335.326,5.3Z" transform="translate(-310.044)" fill="#cdd6de"/><path d="M28.985,41.287h-.917v1.7a2.786,2.786,0,1,1-5.572,0v-1.7H17.133v1.7a2.786,2.786,0,1,1-5.572,0v-1.7h-.917a3.571,3.571,0,0,0-3.571,3.571V61.81a3.571,3.571,0,0,0,3.571,3.571H28.985a3.571,3.571,0,0,0,3.571-3.571V44.858A3.571,3.571,0,0,0,28.985,41.287Zm.761,19.9a1.657,1.657,0,0,1-1.655,1.655H11.538a1.657,1.657,0,0,1-1.655-1.655V47.92H29.745V61.183Z" transform="translate(0 -39.174)" fill="#cdd6de"/><rect width="2.62" height="2.62" transform="translate(16.473 19.029)" fill="#cdd6de"/><rect width="2.62" height="2.62" transform="translate(16.473 14.967)" fill="#cdd6de"/><rect width="2.62" height="2.62" transform="translate(12.412 19.029)" fill="#cdd6de"/><rect width="2.62" height="2.62" transform="translate(12.412 14.967)" fill="#cdd6de"/><rect width="2.62" height="2.62" transform="translate(24.596 10.906)" fill="#cdd6de"/><rect width="2.621" height="2.62" transform="translate(20.535 10.906)" fill="#cdd6de"/><rect width="2.621" height="2.62" transform="translate(20.535 14.967)" fill="#cdd6de"/><rect width="2.62" height="2.62" transform="translate(24.596 19.029)" fill="#cdd6de"/><rect width="2.62" height="2.62" transform="translate(24.596 14.967)" fill="#cdd6de"/><rect width="2.621" height="2.62" transform="translate(20.535 19.029)" fill="#cdd6de"/><rect width="2.62" height="2.62" transform="translate(16.473 10.906)" fill="#cdd6de"/><rect width="2.62" height="2.62" transform="translate(12.412 10.906)" fill="#cdd6de"/></g></svg>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # unico
 2 | This website built using Wordpress、HTML5, CSS3, JavaScript.
 3 | 
 4 | <a href="https://unicobodymake.com/" target="_blank">**Visit Now** 🚀</a>
 5 | 
 6 | 
 7 | ## 📌 Tech Stack
 8 | [![WORDPRESS](https://img.shields.io/badge/wordpress-0083b9?style=for-the-badge&logo=wordpress&logoColor=fff)](https://github.com/000jerry000/Portfolio-Website/search?l=php)&nbsp;
 9 | [![HTML](https://img.shields.io/badge/html5%20-%23E34F26.svg?&style=for-the-badge&logo=html5&logoColor=white)](https://github.com/000jerry000/Portfolio-Website/search?l=html)&nbsp;
10 | [![CSS](https://img.shields.io/badge/css3%20-%231572B6.svg?&style=for-the-badge&logo=css3&logoColor=white)](https://github.com/000jerry000/Portfolio-Website/search?l=css)&nbsp;
11 | [![JS](https://img.shields.io/badge/javascript%20-%23323330.svg?&style=for-the-badge&logo=javascript&logoColor=%23F7DF1E)](https://github.com/000jerry000/Portfolio-Website/search?l=javascript)
12 | 
13 | 
14 | ### Extras : 
15 | Particle.js, Typed.js, Tilt.js, Scroll Reveal, Tawk.to, Font Awesome and JSON
16 | 
17 | ## 📌 Sneak Peek of Main Page 🙈 :
18 | ![mockup720](https://github.com/000Jerry000/portfolio/blob/main/assets/images/projects/unico.jpg)
19 | 
20 | 
21 | <h2>📬 Contact</h2>
22 | 
23 | Feel free to reach me through the below handles if you'd like to contact me.
24 | 
25 | [![telegram](https://img.shields.io/badge/telegram-139bd5?style=for-the-badge&logo=telegram&logoColor=fff)](https://t.me/tomjerry1024)
26 | [![discord](https://img.shields.io/badge/discord-6854eb?style=for-the-badge&logo=discord&logoColor=white)](https://discord.gg/SpCY5Tvy)
27 | [![slack](https://img.shields.io/badge/slack-521e4e?style=for-the-badge&logo=slack&logoColor=white)](https://jerry-2qp9506.slack.com/archives/C08QNMUKU6S)
28 | [![chatwork](https://img.shields.io/badge/chatwork-131f2e?style=for-the-badge&logo=chatwork&logoColor=white)](https://www.chatwork.com/Web_coding)
29 | [![gmail](https://img.shields.io/badge/gmail-bfe5fd?style=for-the-badge&logo=gmail&logoColor=f44a3c)](https://mail.google.com/mail/u/0/?ogbl#search/in%3Asent+whitewolf961024%40gmail.com)
30 | 


--------------------------------------------------------------------------------
/css/foundation/_reset.scss:
--------------------------------------------------------------------------------
1 | *,::before,::after{box-sizing:border-box;border-style:solid;border-width:0;}html{line-height:1.15;-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:transparent;}body{margin:0;}main{display:block;}p,table,blockquote,address,pre,iframe,form,figure,dl{margin:0;}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;margin:0;}ul,ol{margin:0;padding:0;list-style:none;}dt{font-weight:bold;}dd{margin-left:0;}hr{box-sizing:content-box;height:0;overflow:visible;border-top-width:1px;margin:0;clear:both;color:inherit;}pre{font-family:monospace,monospace;font-size:inherit;}address{font-style:inherit;}a{background-color:transparent;text-decoration:none;color:inherit;}abbr[title]{text-decoration:underlinedotted;}b,strong{font-weight:bolder;}code,kbd,samp{font-family:monospace,monospace;font-size:inherit;}small{font-size:80%;}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;}sub{bottom:-0.25em;}sup{top:-0.5em;}svg,img,embed,object,iframe{vertical-align:bottom;}button,input,optgroup,select,textarea{-webkit-appearance:none;appearance:none;vertical-align:middle;color:inherit;font:inherit;background:transparent;padding:0;margin:0;border-radius:0;text-align:inherit;text-transform:inherit;}[type="checkbox"]{-webkit-appearance:checkbox;appearance:checkbox;}[type="radio"]{-webkit-appearance:radio;appearance:radio;}button,[type="button"],[type="reset"],[type="submit"]{cursor:pointer;}button:disabled,[type="button"]:disabled,[type="reset"]:disabled,[type="submit"]:disabled{cursor:default;}:-moz-focusring{outline:auto;}select:disabled{opacity:inherit;}option{padding:0;}fieldset{margin:0;padding:0;min-width:0;}legend{padding:0;}progress{vertical-align:baseline;}textarea{overflow:auto;}[type="number"]::-webkit-inner-spin-button,[type="number"]::-webkit-outer-spin-button{height:auto;}[type="search"]{outline-offset:-2px;}[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit;}label[for]{cursor:pointer;}details{display:block;}summary{display:list-item;}[contenteditable]:focus{outline:auto;}table{border-color:inherit;border-collapse:collapse;}caption{text-align:left;}td,th{vertical-align:top;padding:0;}th{text-align:left;font-weight:bold;}


--------------------------------------------------------------------------------
/header.php:
--------------------------------------------------------------------------------
 1 | <meta charset="utf-8">
 2 | <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 3 | <meta name="title" content="<?php wp_title('|', true, 'right');bloginfo('name'); ?>">
 4 | <meta name="description" content="<?php echo esc_html(meta_description()); ?>">
 5 | 
 6 | <meta property="og:site_name" content="<?php bloginfo('name'); ?>">
 7 | <?php if(is_home() || is_front_page()) { ?>
 8 | <meta property="og:type" content="website">
 9 | <?php } else { ?>
10 | <meta property="og:type" content="article">
11 | <?php } ?>
12 | <meta property="og:url" content="<?php echo (empty($_SERVER["HTTPS"]) ? "http://" : "https://") . $_SERVER["HTTP_HOST"] . $_SERVER["REQUEST_URI"]; ?>">
13 | <meta property="og:title" content="<?php wp_title('|', true, 'right');bloginfo('name'); ?>">
14 | <meta property="og:description" content="<?php echo esc_html(meta_description()); ?>">
15 | <meta property="og:image" content="<?php
16 | if (is_page() || is_single()) {
17 | 	if(has_post_thumbnail()) {
18 | 		$img = wp_get_attachment_image_src(get_post_thumbnail_id());
19 | 		echo esc_url($img[0]);
20 | 	} else {
21 | 		echo esc_url(get_template_directory_uri()); ?>/img/ogp.jpg <?php
22 | 	}
23 | } else {
24 | 	echo esc_url(get_template_directory_uri()); ?>/img/ogp.jpg
25 | <?php } ?>">
26 | 
27 | <link rel="icon" type="image/png" href="<?php echo esc_url(get_template_directory_uri()); ?>/favicon-96x96.png" sizes="96x96" />
28 | <link rel="icon" type="image/svg+xml" href="<?php echo esc_url(get_template_directory_uri()); ?>/favicon.svg" />
29 | <link rel="shortcut icon" href="<?php echo esc_url(get_template_directory_uri()); ?>/favicon.ico" />
30 | <link rel="apple-touch-icon" sizes="180x180" href="<?php echo esc_url(get_template_directory_uri()); ?>/apple-touch-icon.png" />
31 | <meta name="apple-mobile-web-app-title" content="Unico" />
32 | <link rel="manifest" href="<?php echo esc_url(get_template_directory_uri()); ?>/site.webmanifest" />
33 | 
34 | <link rel="stylesheet" href="<?php echo esc_url(get_template_directory_uri()); ?>/css/style.css">
35 | 
36 | <!-- Scroll Hint CDN -->
37 | <link rel="stylesheet" href="https://unpkg.com/scroll-hint@latest/css/scroll-hint.css">
38 | <script src="https://unpkg.com/scroll-hint@latest/js/scroll-hint.min.js"></script>
39 | 
40 | <?php wp_head(); ?>


--------------------------------------------------------------------------------
/inc/footer.php:
--------------------------------------------------------------------------------
 1 | <div class="l-footer">
 2 | 	<div class="l-footer__bg l-footer__bg--pink"></div>
 3 | 	<div class="l-footer__bg l-footer__bg--gray"></div>
 4 | 	<div class="l-footer__inner">
 5 | 		<div class="l-footer__inner-contact">
 6 | 			<button class="l-footer__inner-contact-button">
 7 | 				<a href="<?php echo esc_url(get_the_permalink(7)); ?>" class="l-footer__inner-contact-button-inner">無料体験申し込み<br><span class="l-footer__inner-contact-button-inner-marker">お問い合わせはコチラ</span></a>
 8 | 			</button>
 9 | 		</div>
10 | 		<div class="l-footer__inner-company">
11 | 			<a href="<?php echo esc_url(home_url('/')); ?>" class="l-footer__inner-company-logo"><img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/logo.svg" class="l-footer__inner-company-logo-img" alt="Unico"></a>
12 | 			<!-- <p class="l-footer__inner-company-name">UNICO</p> -->
13 | 			<!-- <p class="l-footer__inner-company-address">&#12306;634-0063 <br class="u-spbr">奈良県橿原市久米町708<br>コレツィオーネ1F北</p> -->
14 | 		</div>
15 | 		<div class="l-footer__inner-sns">
16 | 			<a href="https://lin.ee/x5e9egE" target=”_blank” class="l-footer__inner-sns-icon"><img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/icon/line.png" alt="LINE" class="l-footer__inner-sns-icon-img"></a>
17 | 			<a href="https://www.instagram.com/unico_personal.gym/?utm_source=ig_web_button_share_sheet" target=”_blank” class="l-footer__inner-sns-icon"><img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/icon/instagram.png" alt="Instagram" class="l-footer__inner-sns-icon-img"></a>
18 | 		</div>
19 | 		<div class="l-footer__inner-privacy">
20 | 			<a href="<?php echo esc_url(get_the_permalink(3)); ?>" class="l-footer__inner-privacy-link">PRIVACY POLICY</a>
21 | 		</div>
22 | 		<div class="l-footer__inner-copyright">
23 | 			<p class="l-footer__inner-copyright-text">2025&copy;unico all rights reserved.</p>
24 | 		</div>
25 | 	</div>
26 | </div>
27 | 
28 | <div class="c-pagebtn c-pagebtn--footer">
29 | 	<a href="<?php echo esc_url(get_post_type_archive_link('blog')); ?>" class="c-pagebtn__button c-pagebtn__button--blog">
30 | 		<span class="c-pagebtn__button-icon"><img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/icon/blog.svg" class="c-pagebtn__button-icon-img"></span>
31 | 		<span class="c-pagebtn__button-text">BLOG</span>
32 | 	</a>
33 | 	<a href="<?php echo esc_url(get_the_permalink(7)); ?>" class="c-pagebtn__button c-pagebtn__button--contact">
34 | 		<span class="c-pagebtn__button-icon"><img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/icon/contact.svg" class="c-pagebtn__button-icon-img"></span>
35 | 		<span class="c-pagebtn__button-text">無料体験申込<br>お問い合わせ</span>
36 | 	</a>
37 | </div>


--------------------------------------------------------------------------------
/css/object/project/_single.scss:
--------------------------------------------------------------------------------
  1 | @use "../../foundation/var";
  2 | 
  3 | .p-single {
  4 | 	padding: 7.6rem 4.6rem;
  5 | 	@include var.mq-max(800px) {
  6 | 		padding: 7.6rem 4.6rem 0;
  7 | 	}
  8 | 	@include var.mq-max(600px) {
  9 | 		padding: 3.6rem 2.4rem 0;
 10 | 	}
 11 | 
 12 | 	&__wrap {
 13 | 		display: flex;
 14 | 		gap: 3.6rem;
 15 | 		@include var.mq-max(800px) {
 16 | 			flex-direction: column;
 17 | 			align-items: center;
 18 | 		}
 19 | 
 20 | 		&-content {
 21 | 			width: 100%;
 22 | 
 23 | 			&-date {
 24 | 				margin-bottom: 2.0rem;
 25 | 				font-size: 1.2rem;
 26 | 				font-weight: bold;
 27 | 				@include var.mq-max(600px) {
 28 | 					margin-bottom: 1.0rem;
 29 | 				}
 30 | 			}
 31 | 
 32 | 			&-tax {
 33 | 				margin-bottom: 2.4rem;
 34 | 				display: flex;
 35 | 				align-items: center;
 36 | 				flex-wrap: wrap;
 37 | 				gap: 1.2rem 3.2rem;
 38 | 				@include var.mq-max(600px) {
 39 | 					margin-bottom: 1.5rem;
 40 | 				}
 41 | 
 42 | 				&-category {
 43 | 					color: #FFF;
 44 | 					&-link {
 45 | 						margin-right: 1.2rem;
 46 | 						padding: .2rem 2.4rem;
 47 | 						font-size: 1.2rem;
 48 | 						font-weight: bold;
 49 | 						&:last-child {
 50 | 							margin-right: 0;
 51 | 						}
 52 | 					}
 53 | 				}
 54 | 
 55 | 				&-tag {
 56 | 					@include var.mq-max(600px) {
 57 | 						display: none;
 58 | 					}
 59 | 
 60 | 					a {
 61 | 						margin-right: 1.2rem;
 62 | 						padding: 0 0 .2rem .6rem;
 63 | 						font-size: .8rem;
 64 | 						font-weight: bold;
 65 | 						position: relative;
 66 | 
 67 | 						&::before {
 68 | 							content: '#';
 69 | 							position: absolute;
 70 | 							top: 0;
 71 | 							left: 0;
 72 | 						}
 73 | 					}
 74 | 				}
 75 | 			}
 76 | 
 77 | 			&-title {
 78 | 				margin-bottom: 2.8rem;
 79 | 				padding: 0 .6rem 1.6rem;
 80 | 				border-bottom: 1px solid #707070;
 81 | 				@include var.mq-max(600px) {
 82 | 					margin-bottom: 2.0rem;
 83 | 					padding: 0 .6rem .6rem;
 84 | 				}
 85 | 
 86 | 				&-text {
 87 | 					font-size: 2.5rem;
 88 | 					font-weight: bold;
 89 | 				}
 90 | 
 91 | 				&-tag {
 92 | 					display: none;
 93 | 					@include var.mq-max(600px) {
 94 | 						display: block;
 95 | 					}
 96 | 
 97 | 					a {
 98 | 						margin-right: 1.2rem;
 99 | 						padding: 0 0 .2rem .6rem;
100 | 						font-size: .8rem;
101 | 						font-weight: bold;
102 | 						position: relative;
103 | 
104 | 						&::before {
105 | 							content: '#';
106 | 							position: absolute;
107 | 							top: 0;
108 | 							left: 0;
109 | 						}
110 | 					}
111 | 				}
112 | 			}
113 | 
114 | 			&-img {
115 | 				width: 100%;
116 | 				margin-bottom: 3.0rem;
117 | 
118 | 				&-inner {
119 | 					width: 100%;
120 | 					padding-top: 56.25%;
121 | 				}
122 | 			}
123 | 
124 | 			&-body {
125 | 				margin-bottom: 6.0rem;
126 | 			}
127 | 		}
128 | 	}
129 | }
130 | 


--------------------------------------------------------------------------------
/css/object/project/_archive.scss:
--------------------------------------------------------------------------------
  1 | @use "../../foundation/var";
  2 | 
  3 | .p-archive {
  4 | 	padding: 7.6rem 4.6rem;
  5 | 	@include var.mq-max(800px) {
  6 | 		padding: 7.6rem 4.6rem 0;
  7 | 	}
  8 | 	@include var.mq-max(600px) {
  9 | 		padding: 3.6rem 2.4rem 0;
 10 | 	}
 11 | 
 12 | 	&__wrap {
 13 | 		display: flex;
 14 | 		gap: 3.6rem;
 15 | 		@include var.mq-max(800px) {
 16 | 			flex-direction: column;
 17 | 			align-items: center;
 18 | 		}
 19 | 
 20 | 		&-content {
 21 | 			width: 100%;
 22 | 
 23 | 			&-main {
 24 | 				margin-bottom: 10.0rem;
 25 | 				display: flex;
 26 | 				flex-wrap: wrap;
 27 | 				gap: 4.2rem 2.4rem;
 28 | 				@include var.mq-max(800px) {
 29 | 					margin-bottom: 2.0rem;
 30 | 				}
 31 | 				@include var.mq-max(600px) {
 32 | 					gap: 6.0rem;
 33 | 				}
 34 | 
 35 | 				&-container {
 36 | 					width: calc((100% - 2.4rem * 2) / 3);
 37 | 					padding: .3rem .3rem 1.2rem;
 38 | 					box-shadow: 0 3px 6px #00000029;
 39 | 					@include var.mq-max(1000px) {
 40 | 						width: calc((100% - 2.4rem) / 2);
 41 | 					}
 42 | 					@include var.mq-max(600px) {
 43 | 						width: 100%;
 44 | 					}
 45 | 
 46 | 					&-img {
 47 | 						width: 100%;
 48 | 						margin-bottom: 2.4rem;
 49 | 						padding-top: 56.25%;
 50 | 					}
 51 | 
 52 | 					&-info {
 53 | 						margin-bottom: .3rem;
 54 | 						padding: 0 1.2rem;
 55 | 						display: flex;
 56 | 						align-items: center;
 57 | 						gap: 0 .8rem;
 58 | 
 59 | 						&-time {
 60 | 							font-size: .8rem;
 61 | 							font-weight: bold;
 62 | 						}
 63 | 
 64 | 						&-category {
 65 | 							padding: .2rem 1.4rem;
 66 | 							color: #FFF;
 67 | 							font-size: .8rem;
 68 | 							font-weight: bold;
 69 | 						}
 70 | 					}
 71 | 
 72 | 					&-title {
 73 | 						margin-bottom: 1.2rem;
 74 | 						padding: 0 1.2rem;
 75 | 						font-size: 1.5rem;
 76 | 						font-weight: bold;
 77 | 					}
 78 | 
 79 | 					&-tag {
 80 | 						padding: 0 1.2rem;
 81 | 						display: flex;
 82 | 						align-items: center;
 83 | 						flex-wrap: wrap;
 84 | 						gap: 0 .8rem;
 85 | 						&-item {
 86 | 							padding-left: .6rem;
 87 | 							font-size: .8rem;
 88 | 							font-weight: bold;
 89 | 							position: relative;
 90 | 							&::before {
 91 | 								content: '#';
 92 | 								position: absolute;
 93 | 								top: 0;
 94 | 								left: 0;
 95 | 							}
 96 | 						}
 97 | 					}
 98 | 				}
 99 | 			}
100 | 
101 | 			&-pagination {
102 | 				font-size: 1.8rem;
103 | 				display: flex;
104 | 				justify-content: center;
105 | 				align-items: center;
106 | 				gap: 0 2.4rem;
107 | 
108 | 				span {
109 | 					color: #938980;
110 | 					display: block;
111 | 				}
112 | 
113 | 				a {
114 | 					color: #98A6B5;
115 | 					display: block;
116 | 
117 | 					&.prev, &.next {
118 | 						padding: 1.6rem;
119 | 						background-color: #FAFAFA;
120 | 						border: 2px solid #F0F3F5;
121 | 					}
122 | 
123 | 					img {
124 | 						width: 1.6rem;
125 | 						display: block;
126 | 					}
127 | 
128 | 					&.prev img {
129 | 						transform: rotate(180deg);
130 | 					}
131 | 				}
132 | 			}
133 | 		}
134 | 	}
135 | 
136 | }
137 | 


--------------------------------------------------------------------------------
/img/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 108.461 46.13"><defs><clipPath id="a"><rect width="108.461" height="46.13" fill="none"/></clipPath><clipPath id="c"><rect width="46.13" height="46.13" fill="none"/></clipPath></defs><g clip-path="url(#a)"><g clip-path="url(#a)"><g opacity="0.95"><g clip-path="url(#c)"><rect width="46.13" height="46.13" fill="#f3ccd5"/></g></g><path d="M44.119,57.1q-5.125,0-7.426-2.114t-2.3-6.865v-12.8a3.65,3.65,0,0,0-.187-1.384,1.12,1.12,0,0,0-.767-.58,7.937,7.937,0,0,0-1.964-.168V31.959H41.911v1.235a8.186,8.186,0,0,0-1.983.168,1.13,1.13,0,0,0-.786.58,3.644,3.644,0,0,0-.187,1.384V48.2a9.27,9.27,0,0,0,1.365,5.5,4.626,4.626,0,0,0,3.985,1.871q5.275,0,5.275-7.37V35.326a3.644,3.644,0,0,0-.187-1.384,1.12,1.12,0,0,0-.767-.58,7.937,7.937,0,0,0-1.964-.168V31.959H57.1v1.235a9.413,9.413,0,0,0-2.02.149,1.009,1.009,0,0,0-.767.58,4.191,4.191,0,0,0-.168,1.4v12.8q0,4.677-2.413,6.828T44.119,57.1m31.839-3.554a3.147,3.147,0,0,0,.168,1.178.989.989,0,0,0,.692.543,6.341,6.341,0,0,0,1.609.149v1.235H69.485V55.416a7.325,7.325,0,0,0,1.421-.093.808.808,0,0,0,.58-.43,2.823,2.823,0,0,0,.168-1.16V44.754a3.9,3.9,0,0,0-.842-2.694,3.032,3.032,0,0,0-2.376-.935,5.572,5.572,0,0,0-3.891,1.758V53.732a2.823,2.823,0,0,0,.168,1.16.808.808,0,0,0,.58.43,6.783,6.783,0,0,0,1.347.093v1.235H57.775V55.416a6.08,6.08,0,0,0,1.609-.149.92.92,0,0,0,.636-.524,3.483,3.483,0,0,0,.15-1.2V42.734a2.824,2.824,0,0,0-.225-1.366.9.9,0,0,0-.823-.355H58V39.74l5.388-.861h1.047v2.47h.037a11.323,11.323,0,0,1,3.255-2,8.867,8.867,0,0,1,3.217-.655,4.765,4.765,0,0,1,3.685,1.441,5.768,5.768,0,0,1,1.328,4.059Zm9.5-17.172a2.345,2.345,0,0,1-1.758-.692,2.394,2.394,0,0,1-.674-1.74,2.46,2.46,0,0,1,.674-1.758,2.313,2.313,0,0,1,1.758-.711,2.359,2.359,0,0,1,1.8.711,2.459,2.459,0,0,1,.673,1.758,2.326,2.326,0,0,1-.711,1.74,2.423,2.423,0,0,1-1.758.692M81.008,56.651V55.416a5.438,5.438,0,0,0,1.609-.168.975.975,0,0,0,.636-.543,3.337,3.337,0,0,0,.15-1.16V42.734a3.032,3.032,0,0,0-.206-1.384.911.911,0,0,0-.842-.337H81.233V39.74l5.5-.861H87.78V53.546a3.484,3.484,0,0,0,.149,1.2.92.92,0,0,0,.636.524,6.08,6.08,0,0,0,1.609.149v1.235Zm20.652.374A7.987,7.987,0,0,1,95.58,54.8q-2.114-2.226-2.114-6.753,0-4.677,2.208-7.014a8.327,8.327,0,0,1,6.36-2.339,9.615,9.615,0,0,1,3.853.674,5.025,5.025,0,0,1,2.245,1.74,4.07,4.07,0,0,1,.711,2.3,2.514,2.514,0,0,1-.58,1.758,2.044,2.044,0,0,1-1.59.636,1.987,1.987,0,0,1-1.553-.6,2.2,2.2,0,0,1-.543-1.534,2.277,2.277,0,0,1,.168-.935q.169-.375.206-.449a1.582,1.582,0,0,0,.262-.748,1.106,1.106,0,0,0-.674-.973,4.075,4.075,0,0,0-1.945-.374,4,4,0,0,0-3.367,1.5q-1.16,1.5-1.16,5.425A10.547,10.547,0,0,0,99.3,52.835a4.251,4.251,0,0,0,3.816,1.871,4.608,4.608,0,0,0,3.2-.973,8.342,8.342,0,0,0,1.815-2.469l.935.561a8,8,0,0,1-2.563,3.872,7.727,7.727,0,0,1-4.845,1.328m19.305,0q-4.489,0-6.6-2.207T112.248,47.9q0-4.714,2.132-6.977t6.66-2.264q4.452,0,6.547,2.226t2.095,6.94q0,4.751-2.114,6.977t-6.6,2.226m0-1.5a3.3,3.3,0,0,0,3.143-1.833,12.549,12.549,0,0,0,.973-5.649,13.4,13.4,0,0,0-1.01-5.986A3.551,3.551,0,0,0,117.8,42a13.008,13.008,0,0,0-.991,5.855A12.881,12.881,0,0,0,117.8,53.7a3.339,3.339,0,0,0,3.161,1.833" transform="translate(-21.222 -21.221)" fill="#282727"/></g></g></svg>


--------------------------------------------------------------------------------
/favicon.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/svgjs" width="108.461" height="46.13"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 108.461 46.13"><defs><clipPath id="SvgjsClipPath1007"><rect width="108.461" height="46.13" fill="none"></rect></clipPath><clipPath id="SvgjsClipPath1006"><rect width="46.13" height="46.13" fill="none"></rect></clipPath></defs><g clip-path="url(#a)"><g clip-path="url(#a)"><g opacity="0.95"><g clip-path="url(#c)"><rect width="46.13" height="46.13" fill="#f3ccd5"></rect></g></g><path d="M44.119,57.1q-5.125,0-7.426-2.114t-2.3-6.865v-12.8a3.65,3.65,0,0,0-.187-1.384,1.12,1.12,0,0,0-.767-.58,7.937,7.937,0,0,0-1.964-.168V31.959H41.911v1.235a8.186,8.186,0,0,0-1.983.168,1.13,1.13,0,0,0-.786.58,3.644,3.644,0,0,0-.187,1.384V48.2a9.27,9.27,0,0,0,1.365,5.5,4.626,4.626,0,0,0,3.985,1.871q5.275,0,5.275-7.37V35.326a3.644,3.644,0,0,0-.187-1.384,1.12,1.12,0,0,0-.767-.58,7.937,7.937,0,0,0-1.964-.168V31.959H57.1v1.235a9.413,9.413,0,0,0-2.02.149,1.009,1.009,0,0,0-.767.58,4.191,4.191,0,0,0-.168,1.4v12.8q0,4.677-2.413,6.828T44.119,57.1m31.839-3.554a3.147,3.147,0,0,0,.168,1.178.989.989,0,0,0,.692.543,6.341,6.341,0,0,0,1.609.149v1.235H69.485V55.416a7.325,7.325,0,0,0,1.421-.093.808.808,0,0,0,.58-.43,2.823,2.823,0,0,0,.168-1.16V44.754a3.9,3.9,0,0,0-.842-2.694,3.032,3.032,0,0,0-2.376-.935,5.572,5.572,0,0,0-3.891,1.758V53.732a2.823,2.823,0,0,0,.168,1.16.808.808,0,0,0,.58.43,6.783,6.783,0,0,0,1.347.093v1.235H57.775V55.416a6.08,6.08,0,0,0,1.609-.149.92.92,0,0,0,.636-.524,3.483,3.483,0,0,0,.15-1.2V42.734a2.824,2.824,0,0,0-.225-1.366.9.9,0,0,0-.823-.355H58V39.74l5.388-.861h1.047v2.47h.037a11.323,11.323,0,0,1,3.255-2,8.867,8.867,0,0,1,3.217-.655,4.765,4.765,0,0,1,3.685,1.441,5.768,5.768,0,0,1,1.328,4.059Zm9.5-17.172a2.345,2.345,0,0,1-1.758-.692,2.394,2.394,0,0,1-.674-1.74,2.46,2.46,0,0,1,.674-1.758,2.313,2.313,0,0,1,1.758-.711,2.359,2.359,0,0,1,1.8.711,2.459,2.459,0,0,1,.673,1.758,2.326,2.326,0,0,1-.711,1.74,2.423,2.423,0,0,1-1.758.692M81.008,56.651V55.416a5.438,5.438,0,0,0,1.609-.168.975.975,0,0,0,.636-.543,3.337,3.337,0,0,0,.15-1.16V42.734a3.032,3.032,0,0,0-.206-1.384.911.911,0,0,0-.842-.337H81.233V39.74l5.5-.861H87.78V53.546a3.484,3.484,0,0,0,.149,1.2.92.92,0,0,0,.636.524,6.08,6.08,0,0,0,1.609.149v1.235Zm20.652.374A7.987,7.987,0,0,1,95.58,54.8q-2.114-2.226-2.114-6.753,0-4.677,2.208-7.014a8.327,8.327,0,0,1,6.36-2.339,9.615,9.615,0,0,1,3.853.674,5.025,5.025,0,0,1,2.245,1.74,4.07,4.07,0,0,1,.711,2.3,2.514,2.514,0,0,1-.58,1.758,2.044,2.044,0,0,1-1.59.636,1.987,1.987,0,0,1-1.553-.6,2.2,2.2,0,0,1-.543-1.534,2.277,2.277,0,0,1,.168-.935q.169-.375.206-.449a1.582,1.582,0,0,0,.262-.748,1.106,1.106,0,0,0-.674-.973,4.075,4.075,0,0,0-1.945-.374,4,4,0,0,0-3.367,1.5q-1.16,1.5-1.16,5.425A10.547,10.547,0,0,0,99.3,52.835a4.251,4.251,0,0,0,3.816,1.871,4.608,4.608,0,0,0,3.2-.973,8.342,8.342,0,0,0,1.815-2.469l.935.561a8,8,0,0,1-2.563,3.872,7.727,7.727,0,0,1-4.845,1.328m19.305,0q-4.489,0-6.6-2.207T112.248,47.9q0-4.714,2.132-6.977t6.66-2.264q4.452,0,6.547,2.226t2.095,6.94q0,4.751-2.114,6.977t-6.6,2.226m0-1.5a3.3,3.3,0,0,0,3.143-1.833,12.549,12.549,0,0,0,.973-5.649,13.4,13.4,0,0,0-1.01-5.986A3.551,3.551,0,0,0,117.8,42a13.008,13.008,0,0,0-.991,5.855A12.881,12.881,0,0,0,117.8,53.7a3.339,3.339,0,0,0,3.161,1.833" transform="translate(-21.222 -21.221)" fill="#282727"></path></g></g></svg><style>@media (prefers-color-scheme: light) { :root { filter: none; } }
2 | @media (prefers-color-scheme: dark) { :root { filter: none; } }
3 | </style></svg>


--------------------------------------------------------------------------------
/css/layout/_footer.scss:
--------------------------------------------------------------------------------
  1 | @use "../foundation/var";
  2 | 
  3 | .l-footer {
  4 | 	padding: 4.6rem 3.2rem 3.4rem;
  5 | 	position: relative;
  6 | 	@include var.mq-max(970px) {
  7 | 		padding: 4.6rem 3.2rem 8.6rem;
  8 | 	}
  9 | 
 10 | 	&__bg {
 11 | 		width: 100%;
 12 | 		height: 100%;
 13 | 		position: absolute;
 14 | 		bottom: 0;
 15 | 		left: 0;
 16 | 		&--pink {
 17 | 			background-color: #F48585;
 18 | 			opacity: .26;
 19 | 			clip-path: polygon(22% 0, 54% 17%, 94% 0, 100% 8%, 100% 100%, 0 100%, 0 8%);
 20 | 		}
 21 | 		&--gray {
 22 | 			background-color: #9B9B9B;
 23 | 			clip-path: polygon(24% 10%, 75% 0, 100% 10%, 100% 100%, 0 100%, 0 6%);
 24 | 		}
 25 | 	}
 26 | 
 27 | 	&__inner {
 28 | 		padding-top: 4.0rem;
 29 | 		position: relative;
 30 | 		z-index: 2;
 31 | 
 32 | 		&-contact {
 33 | 			margin-bottom: 5.4rem;
 34 | 			text-align: center;
 35 | 
 36 | 			&-button {
 37 | 				&-inner {
 38 | 					padding: .8rem 5.8rem .8rem 5.4rem;
 39 | 					background-color: #FFF;
 40 | 					font-size: 1.3rem;
 41 | 					font-weight: bold;
 42 | 					text-align: center;
 43 | 					display: block;
 44 | 					position: relative;
 45 | 					transition: opacity .3s ease-out;
 46 | 					&:hover {
 47 | 						opacity: .8;
 48 | 					}
 49 | 					&::before {
 50 | 						content: '';
 51 | 						width: 16px;
 52 | 						height: 16px;
 53 | 						background-color: #000;
 54 | 						border-radius: 50%;
 55 | 						position: absolute;
 56 | 						top: 50%;
 57 | 						right: 10%;
 58 | 						transform: translateY(-50%);
 59 | 					}
 60 | 					&::after {
 61 | 						content: '';
 62 | 						width: 6px;
 63 | 						height: 6px;
 64 | 						border-top: 2px solid #FFF;
 65 | 						border-right: 2px solid #FFF;
 66 | 						position: absolute;
 67 | 						top: 50%;
 68 | 						right: calc(10% + 6px);
 69 | 						transform: translateY(-50%) rotate(45deg);
 70 | 					}
 71 | 
 72 | 					&-marker {
 73 | 						padding: 0 .2rem;
 74 | 						background: linear-gradient(transparent 70%, #FFE51C 0%);
 75 | 					}
 76 | 				}
 77 | 			}
 78 | 		}
 79 | 
 80 | 		&-company {
 81 | 			margin-bottom: 1.0rem;
 82 | 			text-align: center;
 83 | 			@include var.mq-max(600px) {
 84 | 				margin-bottom: 3.0rem;
 85 | 			}
 86 | 
 87 | 			&-logo {
 88 | 				width: fit-content;
 89 | 				margin: 0 auto 4.2rem;
 90 | 				display: block;
 91 | 
 92 | 				&-img {
 93 | 					width: 10.8rem;
 94 | 					display: block;
 95 | 				}
 96 | 			}
 97 | 
 98 | 			&-name {
 99 | 				margin-bottom: .4rem;
100 | 				color: #FFF;
101 | 				font-size: 1.3rem;
102 | 				font-weight: bold;
103 | 				letter-spacing: .2em;
104 | 			}
105 | 
106 | 			&-address {
107 | 				color: #FFF;
108 | 				font-size: 1.3rem;
109 | 				letter-spacing: .2em;
110 | 				.u-spbr {
111 | 					display: none;
112 | 					@include var.mq-max(600px) {
113 | 						display: block;
114 | 					}
115 | 				}
116 | 			}
117 | 		}
118 | 
119 | 		&-sns {
120 | 			margin-bottom: 1.5rem;
121 | 			display: flex;
122 | 			justify-content: center;
123 | 			align-items: center;
124 | 			gap: 0 2.2rem;
125 | 			@include var.mq-max(600px) {
126 | 				margin-bottom: 3.0rem;
127 | 			}
128 | 
129 | 			&-icon {
130 | 				padding: 10px;
131 | 				background-color: #FFF;
132 | 				border-radius: 50%;
133 | 
134 | 				&-img {
135 | 					width: 22px;
136 | 					display: block;
137 | 				}
138 | 			}
139 | 		}
140 | 
141 | 		&-privacy {
142 | 			margin-bottom: 4.0rem;
143 | 			text-align: center;
144 | 
145 | 			&-link {
146 | 				color: #FFF;
147 | 				font-size: 1.0rem;
148 | 				letter-spacing: .3em;
149 | 				text-decoration: underline;
150 | 			}
151 | 		}
152 | 
153 | 		&-copyright {
154 | 			letter-spacing: .4em;
155 | 			text-align: center;
156 | 
157 | 			&-text {
158 | 				color: #FFF;
159 | 				font-size: 1.0rem;
160 | 				letter-spacing: .2em;
161 | 			}
162 | 		}
163 | 	}
164 | }
165 | 


--------------------------------------------------------------------------------
/js/script.js:
--------------------------------------------------------------------------------
  1 | // Header nav link
  2 | const header_nav_list = ['#navService', '#navNews', '#navPlan', '#navLocation', '#navFaq'];
  3 | const header_spnav_list = ['#spNavService', '#spNavNews', '#spNavPlan', '#spNavLocation', '#spNavFaq'];
  4 | const header_target_list = ['#service', '#news', '#plan', '#location', '#faq'];
  5 | 
  6 | // Service nav link
  7 | const service_nav_list = ['#navTraining', '#navConditioning', '#navCapsule'];
  8 | const service_target_list = ['#training', '#conditioning', '#capsule'];
  9 | 
 10 | $(function() {
 11 | 	// Header nav link
 12 | 	for(let i = 0; i < header_nav_list.length; i++) {
 13 | 		$(header_nav_list[i]).click(function() {
 14 | 			$('html, body').animate({scrollTop: $(header_target_list[i]).offset().top - 90}, 600, 'swing');
 15 | 		});
 16 | 	}
 17 | 
 18 | 	// Burger menu
 19 | 	$('#burger').on('click', function() {
 20 | 		$('#burgerInner').toggleClass('is-open');
 21 | 		$('#spmenu').slideToggle();
 22 | 	});
 23 | 
 24 | 	// Header spnav link
 25 | 	for(let i = 0; i < header_spnav_list.length; i++) {
 26 | 		$(header_spnav_list[i]).click(function() {
 27 | 			$('#spmenu').slideUp(0);
 28 | 			$('#burgerInner').toggleClass('is-open');
 29 | 			$('html, body').animate({scrollTop: $(header_target_list[i]).offset().top - 70}, 600, 'swing');
 30 | 		});
 31 | 	}
 32 | 
 33 | 	// Service nav link scroll
 34 | 	for(let i = 0; i < service_nav_list.length; i++) {
 35 | 		if($(window).width() < 600) {
 36 | 			$(service_nav_list[i]).click(function() {
 37 | 				$('html, body').animate({scrollTop: $(service_target_list[i]).offset().top - 86}, 600, 'swing');
 38 | 			});
 39 | 		} else {
 40 | 			$(service_nav_list[i]).click(function() {
 41 | 				$('html, body').animate({scrollTop: $(service_target_list[i]).offset().top - 20}, 600, 'swing');
 42 | 			});
 43 | 		}
 44 | 	}
 45 | });
 46 | 
 47 | 
 48 | // Accordion Menu
 49 | // LOCATION
 50 | $('.js-location').each(function() {
 51 | 	$(this).parent().next().slideUp(0);
 52 | 	$(this).on('click', function() {
 53 | 		$(this).parent().next().slideToggle();
 54 | 	});
 55 | });
 56 | 
 57 | // FAQ
 58 | $('.js-details-summary').each(function() {
 59 | 	$(this).on('click', function(event) {
 60 | 		$(this).toggleClass("is-active");
 61 | 		// デフォルトの挙動を無効化
 62 | 		event.preventDefault();
 63 | 
 64 | 		if($(this).parent($('.js-details')).attr('open')) {
 65 | 			$(this).nextAll($('.js-details-content')).slideUp(500, function() {
 66 | 				$(this).parent($('.js-details')).removeAttr('open');
 67 | 				$(this).show();
 68 | 			});
 69 | 		} else {
 70 | 			$('.js-details-summary').not($(this)).removeClass('is-active');
 71 | 			$('.js-details-content').not($(this).nextAll($('.js-details-content'))).slideUp(500, function() {
 72 | 				$(this).parent($('.js-details')).removeAttr('open');
 73 | 				$(this).show();
 74 | 			});
 75 | 			$(this).parent($('.js-details')).attr('open', 'true');
 76 | 			$(this).nextAll($('.js-details-content')).hide().slideDown(500);
 77 | 		}
 78 | 	});
 79 | });
 80 | 
 81 | 
 82 | // Form Enter Disable
 83 | $(function() {
 84 | 	$('input').on('keydown', function(e) {
 85 | 		if((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) {
 86 | 			return false;
 87 | 		} else {
 88 | 			return true;
 89 | 		}
 90 | 	});
 91 | 
 92 | 	$('select').focus(function() {
 93 | 		$(this).on('keydown', function(e) {
 94 | 			if((e.which && e.which === 13) || (e.keyCode && e.keyCode === 13)) {
 95 | 				return false;
 96 | 			} else {
 97 | 				return true;
 98 | 			}
 99 | 		});
100 | 	});
101 | });
102 | 
103 | //Option Color Change
104 | $(function() {
105 | 	if($('.wpcf7-date').val() == '') {
106 | 		$('.wpcf7-date').addClass('is-init');
107 | 	}
108 | 	if($('.wpcf7-select').val() == '') {
109 | 		$('.wpcf7-select').css('color', '#CDD6DD');
110 | 	}
111 | });
112 | $('.wpcf7-select').change(function() {
113 | 	if($(this).val() == '') {
114 | 		$(this).css('color', '#CDD6DD');
115 | 	} else {
116 | 		$(this).css('color', '#333');
117 | 	}
118 | });
119 | $('.wpcf7-date').change(function() {
120 | 	if($(this).val() == '') {
121 | 		$(this).addClass('is-init');
122 | 	} else {
123 | 		$(this).removeClass('is-init');
124 | 	}
125 | });
126 | 


--------------------------------------------------------------------------------
/archive.php:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="ja">
  3 | <head prefix="og: https://ogp.me/ns#">
  4 | 	<?php get_header(); ?>
  5 | </head>
  6 | <body>
  7 | <header>
  8 | 	<?php get_template_part('inc/header'); ?>
  9 | </header>
 10 | 
 11 | <?php
 12 | $post_type = get_post_type();
 13 | if ($post_type == 'news') {
 14 | ?>
 15 | <section class="l-top l-top--archive" style="background: url(<?php echo esc_url(get_template_directory_uri()); ?>/img/news-bg.jpg) no-repeat center/cover">
 16 | 	<div class="c-pagetitle">
 17 | 		<p class="c-pagetitle__main">NEWS</p>
 18 | 		<p class="c-pagetitle__sub">ニュース</p>
 19 | 	</div>
 20 | </section>
 21 | <?php
 22 | } else if ($post_type == 'blog') {
 23 | ?>
 24 | <section class="l-top l-top--archive" style="background: url(<?php echo esc_url(get_template_directory_uri()); ?>/img/blog-bg.jpg) no-repeat center/cover">
 25 | 	<div class="c-pagetitle">
 26 | 		<p class="c-pagetitle__main">BLOG</p>
 27 | 		<p class="c-pagetitle__sub">ブログ</p>
 28 | 	</div>
 29 | </section>
 30 | <?php
 31 | } else {
 32 | ?>
 33 | <section class="l-top l-top--archive" style="background: url(<?php echo esc_url(get_template_directory_uri()); ?>/img/blog-bg.jpg) no-repeat center/cover">
 34 | 	<div class="c-pagetitle">
 35 | 		<p class="c-pagetitle__main">NO NAME</p>
 36 | 		<p class="c-pagetitle__sub">未設定</p>
 37 | 	</div>
 38 | </section>
 39 | <?php
 40 | }
 41 | ?>
 42 | 
 43 | <main class="l-main l-main--archive">
 44 | 	<section class="l-main__section l-main__section--archive p-archive">
 45 | 		<div class="c-breadcrumb"><?php breadcrumb(); ?></div>
 46 | 
 47 | 		<div class="p-archive__wrap">
 48 | 			<div class="p-archive__wrap-content">
 49 | 				<div class="p-archive__wrap-content-main">
 50 | 					<?php
 51 | 					if (have_posts()) {
 52 | 						while (have_posts()) {
 53 | 							the_post();
 54 | 							$img = wp_get_attachment_image_src(get_post_thumbnail_id());
 55 | 							if ($post_type == 'news') {
 56 | 								$category = get_the_terms(get_the_ID(), 'news_category');
 57 | 								$category_color = get_field('category_color', 'news_category_'.$category[0]->term_id);
 58 | 								$tags = '';
 59 | 							} else if ($post_type == 'blog'){
 60 | 								$category = get_the_terms(get_the_ID(), 'blog_category');
 61 | 								$category_color = get_field('category_color', 'blog_category_'.$category[0]->term_id);
 62 | 								$tags = get_the_terms(get_the_ID(), 'blog_tag');
 63 | 							} else {
 64 | 								$category = get_the_category();
 65 | 								$category_color = '#ACACAC';
 66 | 								$tags = '';
 67 | 							}
 68 | 					?>
 69 | 					<div class="p-archive__wrap-content-main-container">
 70 | 						<a href="<?php the_permalink(); ?>">
 71 | 							<div class="p-archive__wrap-content-main-container-img" style="background: url(<?php echo esc_html($img[0]); ?>) no-repeat center/cover"></div>
 72 | 							<div class="p-archive__wrap-content-main-container-info">
 73 | 								<span class="p-archive__wrap-content-main-container-info-time"><time datetime="<?php echo esc_html(get_the_date('Y-m-d')); ?>"><?php echo esc_html(get_the_date('Y.m.d')); ?></time></span>
 74 | 								<?php if (!empty($category)) { ?>
 75 | 								<span class="p-archive__wrap-content-main-container-info-category" style="background-color: <?php echo esc_attr($category_color); ?>"><?php echo esc_html($category[0] -> name); ?></span>
 76 | 								<?php } ?>
 77 | 							</div>
 78 | 							<h2 class="p-archive__wrap-content-main-container-title">
 79 | 							<?php
 80 | 							if (mb_strlen($post -> post_title) > 36) {
 81 | 								echo esc_html(mb_substr($post -> post_title, 0, 36).'...');
 82 | 							} else {
 83 | 								the_title();
 84 | 							}
 85 | 							?>
 86 | 							</h2>
 87 | 							<?php if ($tags) { ?>
 88 | 							<ul class="p-archive__wrap-content-main-container-tag">
 89 | 								<?php foreach ($tags as $tag) { ?>
 90 | 								<li class="p-archive__wrap-content-main-container-tag-item"><?php echo esc_html($tag -> name); ?></li>
 91 | 								<?php } ?>
 92 | 							</ul>
 93 | 							<?php } ?>
 94 | 						</a>
 95 | 					</div>
 96 | 					<?php } ?>
 97 | 				</div>
 98 | 				<div class="p-archive__wrap-content-pagination">
 99 | 					<?php global $wp_query;
100 | 					echo paginate_links(array(
101 | 						'mid_size' => 1,
102 | 						'prev_next' => true,
103 | 						'prev_text' => '<img src="'.get_template_directory_uri().'/img/icon/arrow.svg">',
104 | 						'next_text' => '<img src="'.get_template_directory_uri().'/img/icon/arrow.svg">',
105 | 						'current' => max(1, get_query_var('paged')),
106 | 						'total' => $wp_query -> max_num_pages
107 | 					));?>
108 | 				</div>
109 | 				<?php } ?>
110 | 			</div>
111 | 			<div class="c-sidebar">
112 | 				<?php get_sidebar(); ?>
113 | 			</div>
114 | 		</div>
115 | 	</section>
116 | </main>
117 | 
118 | <footer>
119 | 	<?php get_template_part('inc/footer'); ?>
120 | </footer>
121 | 
122 | <?php get_footer(); ?>
123 | </body>
124 | </html>


--------------------------------------------------------------------------------
/single.php:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="ja">
  3 | <head prefix="og: https://ogp.me/ns#">
  4 | 	<?php get_header(); ?>
  5 | </head>
  6 | <body>
  7 | <header>
  8 | 	<?php get_template_part('inc/header'); ?>
  9 | </header>
 10 | 
 11 | <?php
 12 | $post_type = get_post_type();
 13 | if ($post_type == 'news') {
 14 | ?>
 15 | <section class="l-top l-top--single" style="background: url(<?php echo esc_url(get_template_directory_uri()); ?>/img/news-bg.jpg) no-repeat center/cover">
 16 | 	<div class="c-pagetitle">
 17 | 		<p class="c-pagetitle__main">NEWS</p>
 18 | 		<p class="c-pagetitle__sub">ニュース</p>
 19 | 	</div>
 20 | </section>
 21 | <?php
 22 | } else if ($post_type == 'blog') {
 23 | ?>
 24 | <section class="l-top l-top--single" style="background: url(<?php echo esc_url(get_template_directory_uri()); ?>/img/blog-bg.jpg) no-repeat center/cover">
 25 | 	<div class="c-pagetitle">
 26 | 		<p class="c-pagetitle__main">BLOG</p>
 27 | 		<p class="c-pagetitle__sub">ブログ</p>
 28 | 	</div>
 29 | </section>
 30 | <?php
 31 | } else {
 32 | ?>
 33 | <section class="l-top l-top--single" style="background: url(<?php echo esc_url(get_template_directory_uri()); ?>/img/blog-bg.jpg) no-repeat center/cover">
 34 | 	<div class="c-pagetitle">
 35 | 		<p class="c-pagetitle__main">NO NAME</p>
 36 | 		<p class="c-pagetitle__sub">未設定</p>
 37 | 	</div>
 38 | </section>
 39 | <?php
 40 | }
 41 | ?>
 42 | 
 43 | <main class="l-main l-main--single">
 44 | 	<?php if ($post_type == 'news') { ?>
 45 | 	<section class="l-main__section l-main__section--page p-single">
 46 | 	<?php } else { ?>
 47 | 	<section class="l-main__section l-main__section--single p-single">
 48 | 	<?php } ?>
 49 | 		<div class="c-breadcrumb"><?php breadcrumb(); ?></div>
 50 | 
 51 | 		<div class="p-single__wrap">
 52 | 			<?php
 53 | 				if (have_posts()) {
 54 | 					while (have_posts()) {
 55 | 						the_post();
 56 | 						$img = wp_get_attachment_image_src(get_post_thumbnail_id());
 57 | 						if ($post_type == 'news') {
 58 | 							$category = get_the_terms(get_the_ID(), 'news_category');
 59 | 							$category_color = get_field('category_color', 'news_category_'.$category[0]->term_id);
 60 | 							$tags = '';
 61 | 						} else if ($post_type == 'blog'){
 62 | 							$category = get_the_terms(get_the_ID(), 'blog_category');
 63 | 							$category_color = get_field('category_color', 'blog_category_'.$category[0]->term_id);
 64 | 							$tags = get_the_terms(get_the_ID(), 'blog_tag');
 65 | 						} else {
 66 | 							$category = get_the_category();
 67 | 							$category_color = '#ACACAC';
 68 | 							$tags = '';
 69 | 						}
 70 | 			?>
 71 | 			<div class="p-single__wrap-content">
 72 | 				<p class="p-single__wrap-content-date"><time datetime="<?php echo esc_html(get_the_date('Y-m-d')); ?>"><?php echo esc_html(get_the_date('Y.m.d')); ?></time></p>
 73 | 				<div class="p-single__wrap-content-tax">
 74 | 					<div class="p-single__wrap-content-tax-category">
 75 | 						<?php if (!empty($category)) { ?>
 76 | 							<a href="<?php echo esc_url(get_term_link($category[0])); ?>" class="p-single__wrap-content-tax-category-link" style="background-color: <?php echo esc_attr($category_color); ?>"><?php echo esc_html($category[0] -> name); ?></a>
 77 | 						<?php } ?>
 78 | 					</div>
 79 | 					<div class="p-single__wrap-content-tax-tag">
 80 | 						<?php if (!empty($tags)) {
 81 | 							foreach ($tags as $tag) {
 82 | 						?>
 83 | 						<a href="<?php echo esc_url(get_term_link($tag)); ?>" class="p-single__wrap-content-tax-category-link"><?php echo esc_html($tag -> name); ?></a>
 84 | 						<?php
 85 | 							}
 86 | 						} ?>
 87 | 					</div>
 88 | 				</div>
 89 | 				<div class="p-single__wrap-content-title">
 90 | 					<h1 class="p-single__wrap-content-title-text"><?php the_title(); ?></h1>
 91 | 					<?php if (!empty($tags)) { ?>
 92 | 					<div class="p-single__wrap-content-title-tag">
 93 | 						<?php foreach ($tags as $tag) {?>
 94 | 						<a href="<?php echo esc_url(get_term_link($tag)); ?>" class="p-single__wrap-content-title-tag-link"><?php echo esc_html($tag -> name); ?></a>
 95 | 						<?php } ?>
 96 | 					</div>
 97 | 					<?php } ?>
 98 | 				</div>
 99 | 				<?php if (!empty($img)) { ?>
100 | 				<div class="p-single__wrap-content-img"><div class="p-single__wrap-content-img-inner" style="background: url(<?php echo esc_html($img[0]); ?>) no-repeat center/cover"></div></div>
101 | 				<?php } ?>
102 | 				<div class="p-single__wrap-content-body">
103 | 					<?php the_content(); ?>
104 | 				</div>
105 | 				<div class="c-backbtn">
106 | 					<button class="c-backbtn__inner"><a href="<?php echo esc_url(get_post_type_archive_link($post_type)); ?>" class="c-backbtn__inner-link">一覧へ戻る</a></button>
107 | 				</div>
108 | 			</div>
109 | 			<?php
110 | 					}
111 | 				}
112 | 			?>
113 | 			<?php if ($post_type != 'news') { ?>
114 | 			<div class="c-sidebar">
115 | 				<?php get_sidebar(); ?>
116 | 			</div>
117 | 			<?php } ?>
118 | 		</div>
119 | 	</section>
120 | </main>
121 | 
122 | <footer>
123 | 	<?php get_template_part('inc/footer'); ?>
124 | </footer>
125 | 
126 | <?php get_footer(); ?>
127 | </body>
128 | </html>


--------------------------------------------------------------------------------
/css/layout/_header.scss:
--------------------------------------------------------------------------------
  1 | @use "../foundation/var";
  2 | 
  3 | .l-header {
  4 | 	width: 100%;
  5 | 	padding: 0 3.2rem;
  6 | 	background-color: var.$color-main;
  7 | 	display: flex;
  8 | 	align-items: center;
  9 | 	justify-content: space-between;
 10 | 	position: fixed;
 11 | 	box-shadow: 0 3px 6px #00000029;
 12 | 	position: fixed;
 13 | 	top: 0;
 14 | 	left: 0;
 15 | 	z-index: 10;
 16 | 	@include var.mq-max(970px) {
 17 | 		padding: 3.0rem 2.4rem .8rem;
 18 | 	}
 19 | 
 20 | 	&__logo {
 21 | 		margin-right: 2%;
 22 | 		display: block;
 23 | 		@include var.mq-max(970px) {
 24 | 			margin-right: 0;
 25 | 		}
 26 | 
 27 | 		&-img {
 28 | 			width: 10.8rem;
 29 | 			display: block;
 30 | 			@include var.mq-max(600px) {
 31 | 				width: 8.0rem;
 32 | 			}
 33 | 		}
 34 | 	}
 35 | 
 36 | 	&__menu {
 37 | 		display: flex;
 38 | 		gap: 0 2.7rem;
 39 | 		@include var.mq-max(970px) {
 40 | 			display: none;
 41 | 		}
 42 | 
 43 | 		&-item {
 44 | 			padding-right: 2.7rem;
 45 | 			border-right: 1px solid var.$color-letter;
 46 | 			text-align: center;
 47 | 			display: flex;
 48 | 			flex-direction: column;
 49 | 			align-items: center;
 50 | 			gap: 6px 0;
 51 | 			cursor: pointer;
 52 | 			&:last-child {
 53 | 				padding-right: 0;
 54 | 				border-right: none;
 55 | 			}
 56 | 
 57 | 			a {
 58 | 				display: flex;
 59 | 				flex-direction: column;
 60 | 				align-items: center;
 61 | 				gap: 6px 0;
 62 | 			}
 63 | 
 64 | 			&-text {
 65 | 				font-weight: bold;
 66 | 				letter-spacing: .2em;
 67 | 
 68 | 				&--en {
 69 | 					font-size: 1.3rem;
 70 | 				}
 71 | 				&--jp {
 72 | 					font-size: 1.0rem;
 73 | 				}
 74 | 			}
 75 | 		}
 76 | 	}
 77 | 
 78 | 	&__button {
 79 | 		padding-bottom: 2.0rem;
 80 | 		display: flex;
 81 | 		gap: 0 2.0rem;
 82 | 		@include var.mq-max(970px) {
 83 | 			display: none;
 84 | 		}
 85 | 
 86 | 		&-inner {
 87 | 			min-width: 9.6rem;
 88 | 			padding: 1.0rem 1.0rem .4rem;
 89 | 			border-radius: 0 0 7px 7px;
 90 | 			display: flex;
 91 | 			flex-direction: column;
 92 | 			justify-content: flex-start;
 93 | 			align-items: center;
 94 | 
 95 | 			&--blog {
 96 | 				background: var.$color-gray;
 97 | 				gap: 8px 0;
 98 | 			}
 99 | 			&--contact {
100 | 				background: var.$color-green;
101 | 				gap: 4px 0;
102 | 			}
103 | 
104 | 			&-icon {
105 | 				width: 5.2rem;
106 | 				height: 5.2rem;
107 | 				background-color: #FFF;
108 | 				border-radius: 50%;
109 | 				display: flex;
110 | 				justify-content: center;
111 | 				align-items: center;
112 | 
113 | 				&-img {
114 | 					width: 2.7rem;
115 | 					display: block;
116 | 				}
117 | 			}
118 | 
119 | 			&-text {
120 | 				color: #FFF;
121 | 				font-size: 1.1rem;
122 | 				font-weight: bold;
123 | 				text-align: center;
124 | 			}
125 | 		}
126 | 	}
127 | 
128 | 	&__burger {
129 | 		margin: 0;
130 | 		display: none;
131 | 		align-items: center;
132 | 		cursor: pointer;
133 | 		position: absolute;
134 | 		right: 5%;
135 | 		@include var.mq-max(970px) {
136 | 			display: flex;
137 | 		}
138 | 
139 | 		&-inner {
140 | 			width: 22px;
141 | 			height: 2px;
142 | 			margin: 10px 0;
143 | 			background-color: var.$color-letter;
144 | 			border-radius: 15vw;
145 | 			transition: all .4s ease;
146 | 			position: relative;
147 | 
148 | 			&::before {
149 | 				width: 22px;
150 | 				height: 2px;
151 | 				content: '';
152 | 				background-color: var.$color-letter;
153 | 				border-radius: 15vh;
154 | 				position: absolute;
155 | 				top: -8px;
156 | 				left: 0;
157 | 				transition: all .4s ease;
158 | 			}
159 | 			&::after {
160 | 				width: 22px;
161 | 				height: 2px;
162 | 				content: '';
163 | 				background-color: var.$color-letter;
164 | 				border-radius: 15vh;
165 | 				position: absolute;
166 | 				top: 8px;
167 | 				left: 0;
168 | 				transition: all .4s ease;
169 | 			}
170 | 
171 | 			&.is-open {
172 | 				width: 23px;
173 | 				height: 23px;
174 | 				background-color: transparent;
175 | 
176 | 				&::before {
177 | 					width: 23px;
178 | 					height: 2px;
179 | 					content: '';
180 | 					background-color: var.$color-letter;
181 | 					border-radius: 15vw;
182 | 					position: absolute;
183 | 					top: 10px;
184 | 					transform: rotate(-45deg);
185 | 					transition: all .4s ease;
186 | 				}
187 | 				&::after {
188 | 					width: 23px;
189 | 					height: 2px;
190 | 					content: '';
191 | 					background-color: var.$color-letter;
192 | 					border-radius: 15vw;
193 | 					position: absolute;
194 | 					top: 10px;
195 | 					transform: rotate(45deg);
196 | 					transition: all .4s ease;
197 | 				}
198 | 			}
199 | 		}
200 | 	}
201 | }
202 | 
203 | .l-spmenu {
204 | 	width: 100%;
205 | 	height: calc(100vh - 8.0rem);
206 | 	height: calc(100dvh - 8.0rem);
207 | 	background-color: var.$color-main;
208 | 	position: fixed;
209 | 	top: 8.0rem;
210 | 	left: 0;
211 | 	z-index: 9;
212 | 	display: none;
213 | 	@include var.mq-max(600px) {
214 | 		height: calc(100vh - 7.0rem);
215 | 		height: calc(100dvh - 7.0rem);
216 | 		top: 7.0rem;
217 | 	}
218 | 
219 | 	&__list {
220 | 		&-item {
221 | 			padding: 2.2rem 1.2rem;
222 | 			border-bottom: 1px solid #E2D7D7;
223 | 			text-align: center;
224 | 			display: flex;
225 | 			flex-direction: column;
226 | 			align-items: center;
227 | 			gap: 6px 0;
228 | 			cursor: pointer;
229 | 			&:last-child {
230 | 				border-bottom: none;
231 | 			}
232 | 
233 | 			a {
234 | 				width: 100%;
235 | 				display: flex;
236 | 				flex-direction: column;
237 | 				align-items: center;
238 | 				gap: 6px 0;
239 | 			}
240 | 
241 | 			&-text {
242 | 				font-weight: bold;
243 | 				letter-spacing: .2em;
244 | 
245 | 				&--en {
246 | 					font-size: 1.3rem;
247 | 				}
248 | 				&--jp {
249 | 					font-size: 1.0rem;
250 | 				}
251 | 			}
252 | 		}
253 | 	}
254 | 
255 | 	&__sns {
256 | 		margin: 2.4rem auto;
257 | 		display: flex;
258 | 		justify-content: center;
259 | 		align-items: center;
260 | 		gap: 0 5.6rem;
261 | 
262 | 		&-icon {
263 | 			width: 3.3rem;
264 | 
265 | 			&-img {
266 | 				width: 100%;
267 | 				display: block;
268 | 			}
269 | 		}
270 | 	}
271 | }
272 | 


--------------------------------------------------------------------------------
/functions.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | add_action('init', function() {
  3 | 	add_theme_support('title-tag');
  4 | 	add_theme_support('post-thumbnails');
  5 | 	add_post_type_support('page', 'excerpt');
  6 | 
  7 | 	register_post_type('blog', [
  8 | 		'label' => 'BLOG',
  9 | 		'public' => true,
 10 | 		'menu_position' => 5,
 11 | 		'menu_icon' => 'dashicons-edit',
 12 | 		'supports' => ['title', 'editor', 'thumbnail', 'excerpt', 'revisions'],
 13 | 		'has_archive' => true,
 14 | 		'show_in_rest' => true
 15 | 	]);
 16 | 	register_taxonomy('blog_category', 'blog', [
 17 | 		'label' => 'カテゴリー',
 18 | 		'hierarchical' => 'true',
 19 | 		'show_in_rest' => true
 20 | 	]);
 21 | 	register_taxonomy('blog_tag', 'blog', [
 22 | 		'label' => 'キーワード',
 23 | 		'hierarchical' => 'false',
 24 | 		'show_in_rest' => true,
 25 | 		'update_count_callback' => '_update_post_term_count'
 26 | 	]);
 27 | 
 28 | 	register_post_type('news', [
 29 | 		'label' => 'NEWS',
 30 | 		'public' => true,
 31 | 		'menu_position' => 5,
 32 | 		'menu_icon' => 'dashicons-media-text',
 33 | 		'supports' => ['title', 'editor', 'thumbnail', 'excerpt'],
 34 | 		'has_archive' => true,
 35 | 		'show_in_rest' => true
 36 | 	]);
 37 | 	register_taxonomy('news_category', 'news', [
 38 | 		'label' => 'カテゴリー',
 39 | 		'hierarchical' => 'true',
 40 | 		'show_in_rest' => true
 41 | 	]);
 42 | });
 43 | 
 44 | function meta_description() {
 45 | 	$default = '通い放題のパーソナルジムで理想の自分へ。専門的なケアとあなたに寄り添うサポートで、心と体のバランスを整え、自分らしく輝ける毎日を。unicoが、あなたの健康と美しさを支えます。';
 46 | 	if(is_single() || is_page()) {
 47 | 		$description = get_the_excerpt();
 48 | 		if(empty($description)) {
 49 | 			$description = $default;
 50 | 		}
 51 | 	} else {
 52 | 		$description = $default;
 53 | 	}
 54 | 	return $description;
 55 | }
 56 | 
 57 | // Custom Field on post-type 'page'
 58 | add_action('admin_menu', 'title_sub_hooks');
 59 | add_action('save_post', 'save_title_sub');
 60 | function title_sub_hooks() {
 61 | 	add_meta_box('title_sub', 'サブタイトル', 'title_sub_input', 'page', 'normal');
 62 | }
 63 | function title_sub_input() {
 64 | 	global $post;
 65 | 	echo '<input type="text" name="title_sub" value="'.get_post_meta($post->ID,'title_sub',true).'" size="50" />';
 66 | }
 67 | function save_title_sub($post_id) {
 68 | 	if(!empty($_POST['title_sub'])) {
 69 | 		update_post_meta($post_id, 'title_sub', $_POST['title_sub']);
 70 | 	} else {
 71 | 		delete_post_meta($post_id, 'title_sub');
 72 | 	}
 73 | }
 74 | 
 75 | // Create Breadcrumb
 76 | function breadcrumb() {
 77 | 	if(is_front_page()) {}
 78 | 	$wp_obj = get_queried_object();
 79 | 	echo '<ul class="c-breadcrumb__list">';
 80 | 	echo '<li class="c-breadcrumb__list-item"><a href="'.esc_url(home_url('/')).'">TOP</a></li>';
 81 | 	if(is_single()) {
 82 | 		$post_type = $wp_obj -> post_type;
 83 | 		$post_title = $wp_obj -> post_title;
 84 | 		// In case of custom post
 85 | 		if($post_type !== 'post') {
 86 | 			$post_type_link = esc_url(get_post_type_archive_link($post_type));
 87 | 			$post_type_label = esc_html(get_post_type_object($post_type) -> label);
 88 | 			echo '<li class="c-breadcrumb__list-item"><a href="'.$post_type_link.'">'.$post_type_label.'</a></li>';
 89 | 		}
 90 | 		echo '<li class="c-breadcrumb__list-item">'.esc_html($post_title).'</li>';
 91 | 	} else if(is_page()) {
 92 | 		$post_title = $wp_obj -> post_title;
 93 | 		echo '<li class="c-breadcrumb__list-item">'.esc_html($post_title).'</li>';
 94 | 	} else if(is_archive()) {
 95 | 		$post_type = get_post_type();
 96 | 		if($post_type !== 'post') {
 97 | 			$post_type_label = esc_html(get_post_type_object($post_type) -> label);
 98 | 			$post_type_link = esc_url(get_post_type_archive_link($post_type));
 99 | 			echo '<li class="c-breadcrumb__list-item"><a href="'.$post_type_link.'">'.$post_type_label.'</a></li>';
100 | 		}
101 | 
102 | 		if($post_type == 'blog') {
103 | 			$term_name = $wp_obj -> name;
104 | 			if ($term_name != 'blog') {
105 | 				echo '<li class="c-breadcrumb__list-item">'.esc_html($term_name).'</li>';
106 | 			}
107 | 		} else if($post_type == 'news') {
108 | 			$term_name = $wp_obj -> name;
109 | 			if ($term_name != 'news') {
110 | 				echo '<li class="c-breadcrumb__list-item">'.esc_html($term_name).'</li>';
111 | 			}
112 | 		}
113 | 	} else if(is_search()) {
114 | 		echo '<li class="c-breadcrumb__list-item">「'.get_search_query().'」の検索結果</li>';
115 | 	} else if(is_404()) {
116 | 		echo '<li class="c-breadcrumb__list-item">お探しのページは見つかりませんでした</li>';
117 | 	}
118 | 	echo '</ul>';
119 | }
120 | 
121 | // Add original menu
122 | add_action('admin_menu', 'original_menu');
123 | function original_menu() {
124 | 	add_menu_page('キャンペーン', 'キャンペーン', 'manage_options', 'original_menu', 'add_original_menu', 'dashicons-star-empty', 8);
125 | 	add_action('admin_init', 'register_original_menu');
126 | }
127 | 
128 | function add_original_menu() {
129 | 	?>
130 | 	<div class="wrap">
131 | 		<?php
132 | 			if(isset($_GET['settings-updated']) && $_GET['settings-updated']){
133 | 				echo '<div id="settings_updated" class="updated notice is-dismissible"><p><strong>設定を保存しました</strong></p></div>';
134 | 			}
135 | 		?>
136 | 		<h2>キャンペーンバナー</h2>
137 | 		<form method="post" action="options.php" enctype="multipart/form-data" encoding="multipart/form-data">
138 | 		<?php
139 | 		settings_fields('original_menu_1');
140 | 		do_settings_sections('original_menu_1');
141 | 		?>
142 | 		<div class="metabox-holder">
143 | 			<div class="postbox">
144 | 				<h3 class='hndle'>バナー情報</h3>
145 | 				<div class="inside">
146 | 					<div class="main">
147 | 						<p class="setting_description">お問い合わせフォームの上部に表示させるキャンペーンバナーを編集できます。</p>
148 | 						<h4>テキスト</h4>
149 | 						<input type="text" name="text" value="<?php echo esc_html(get_option('text')); ?>" style="width:100%;">
150 | 						<h4>文字色</h4>
151 | 						<input type="color" name="color" value="<?php echo esc_html(get_option('color')); ?>">
152 | 						<h4>背景色</h4>
153 | 						<input type="color" name="bgcolor" value="<?php echo esc_html(get_option('bgcolor')); ?>">
154 | 					</div>
155 | 				</div>
156 | 			</div>
157 | 		</div>
158 | 		<?php submit_button(); ?>
159 | 		</form>
160 | 	</div>
161 | 	<?php
162 | }
163 | 
164 | function register_original_menu() {
165 | 	register_setting('original_menu_1', 'text');
166 | 	register_setting('original_menu_1', 'color');
167 | 	register_setting('original_menu_1', 'bgcolor');
168 | }
169 | 
170 | add_shortcode("banner", "banner_shortcode");
171 | function banner_shortcode() {
172 | 	$text = esc_html(get_option('text'));
173 | 	$color = esc_html(get_option('color'));
174 | 	$bgcolor = esc_html(get_option('bgcolor'));
175 | 	return '<div class="c-banner" style="background-color:'.$bgcolor.';"><p class="c-banner__text" style="color:'.$color.';">'.$text.'</p></div>';
176 | }
177 | ?>


--------------------------------------------------------------------------------
/inc/header.php:
--------------------------------------------------------------------------------
  1 | <nav class="l-header">
  2 | 	<a href="<?php echo esc_url(home_url('/')); ?>" class="l-header__logo"><img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/logo.svg" class="l-header__logo-img" alt="Unico"></a></div>
  3 | 	<ul class="l-header__menu">
  4 | 		<?php if(is_front_page()) { ?>
  5 | 		<li class="l-header__menu-item" id="navService">
  6 | 			<span class="l-header__menu-item-text l-header__menu-item-text--en">SERVICE</span>
  7 | 			<span class="l-header__menu-item-text l-header__menu-item-text--jp">サービス</span>
  8 | 		</li>
  9 | 		<li class="l-header__menu-item" id="navNews">
 10 | 			<span class="l-header__menu-item-text l-header__menu-item-text--en">NEWS</span>
 11 | 			<span class="l-header__menu-item-text l-header__menu-item-text--jp">ニュース</span>
 12 | 		</li>
 13 | 		<li class="l-header__menu-item" id="navPlan">
 14 | 			<span class="l-header__menu-item-text l-header__menu-item-text--en">PLAN</span>
 15 | 			<span class="l-header__menu-item-text l-header__menu-item-text--jp">料金案内</span>
 16 | 		</li>
 17 | 		<li class="l-header__menu-item" id="navLocation">
 18 | 			<span class="l-header__menu-item-text l-header__menu-item-text--en">LOCATION</span>
 19 | 			<span class="l-header__menu-item-text l-header__menu-item-text--jp">店舗一覧</span>
 20 | 		</li>
 21 | 		<li class="l-header__menu-item" id="navFaq">
 22 | 			<span class="l-header__menu-item-text l-header__menu-item-text--en">FAQ</span>
 23 | 			<span class="l-header__menu-item-text l-header__menu-item-text--jp">よくある質問</span>
 24 | 		</li>
 25 | 		<?php } else { ?>
 26 | 		<li class="l-header__menu-item"><a href="<?php echo esc_url(home_url('/#service')); ?>">
 27 | 			<span class="l-header__menu-item-text l-header__menu-item-text--en">SERVICE</span>
 28 | 			<span class="l-header__menu-item-text l-header__menu-item-text--jp">サービス</span>
 29 | 		</a></li>
 30 | 		<li class="l-header__menu-item"><a href="<?php echo esc_url(home_url('/#news')); ?>">
 31 | 			<span class="l-header__menu-item-text l-header__menu-item-text--en">NEWS</span>
 32 | 			<span class="l-header__menu-item-text l-header__menu-item-text--jp">ニュース</span>
 33 | 		</a></li>
 34 | 		<li class="l-header__menu-item"><a href="<?php echo esc_url(home_url('/#plan')); ?>">
 35 | 			<span class="l-header__menu-item-text l-header__menu-item-text--en">PLAN</span>
 36 | 			<span class="l-header__menu-item-text l-header__menu-item-text--jp">料金案内</span>
 37 | 		</a></li>
 38 | 		<li class="l-header__menu-item"><a href="<?php echo esc_url(home_url('/#location')); ?>">
 39 | 			<span class="l-header__menu-item-text l-header__menu-item-text--en">LOCATION</span>
 40 | 			<span class="l-header__menu-item-text l-header__menu-item-text--jp">店舗一覧</span>
 41 | 		</a></li>
 42 | 		<li class="l-header__menu-item"><a href="<?php echo esc_url(home_url('/#faq')); ?>">
 43 | 			<span class="l-header__menu-item-text l-header__menu-item-text--en">FAQ</span>
 44 | 			<span class="l-header__menu-item-text l-header__menu-item-text--jp">よくある質問</span>
 45 | 		</a></li>
 46 | 		<?php } ?>
 47 | 	</ul>
 48 | 	<div class="l-header__button">
 49 | 		<a href="<?php echo esc_url(get_post_type_archive_link('blog')); ?>" class="l-header__button-inner l-header__button-inner--blog">
 50 | 			<span class="l-header__button-inner-icon"><img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/icon/blog.svg" class="l-header__button-inner-icon-img"></span>
 51 | 			<span class="l-header__button-inner-text">BLOG</span>
 52 | 		</a>
 53 | 		<a href="<?php echo esc_url(get_the_permalink(7)); ?>" class="l-header__button-inner l-header__button-inner--contact">
 54 | 			<span class="l-header__button-inner-icon"><img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/icon/contact.svg" class="l-header__button-inner-icon-img"></span>
 55 | 			<span class="l-header__button-inner-text">無料体験申込<br>お問い合わせ</span>
 56 | 		</a>
 57 | 	</div>
 58 | 	<div id="burger" class="l-header__burger"><div id="burgerInner" class="l-header__burger-inner"></div></div>
 59 | </nav>
 60 | 
 61 | <div id="spmenu" class="l-spmenu">
 62 | 	<ul class="l-spmenu__list">
 63 | 		<?php if(is_front_page()) { ?>
 64 | 		<li class="l-spmenu__list-item" id="spNavService">
 65 | 			<span class="l-spmenu__list-item-text l-spmenu__list-item-text--en">SERVICE</span>
 66 | 			<span class="l-spmenu__list-item-text l-spmenu__list-item-text--jp">サービス</span>
 67 | 		</li>
 68 | 		<li class="l-spmenu__list-item" id="spNavNews">
 69 | 			<span class="l-spmenu__list-item-text l-spmenu__list-item-text--en">NEWS</span>
 70 | 			<span class="l-spmenu__list-item-text l-spmenu__list-item-text--jp">ニュース</span>
 71 | 		</li>
 72 | 		<li class="l-spmenu__list-item" id="spNavPlan">
 73 | 			<span class="l-spmenu__list-item-text l-spmenu__list-item-text--en">PLAN</span>
 74 | 			<span class="l-spmenu__list-item-text l-spmenu__list-item-text--jp">料金案内</span>
 75 | 		</li>
 76 | 		<li class="l-spmenu__list-item" id="spNavLocation">
 77 | 			<span class="l-spmenu__list-item-text l-spmenu__list-item-text--en">LOCATION</span>
 78 | 			<span class="l-spmenu__list-item-text l-spmenu__list-item-text--jp">店舗一覧</span>
 79 | 		</li>
 80 | 		<li class="l-spmenu__list-item" id="spNavFaq">
 81 | 			<span class="l-spmenu__list-item-text l-spmenu__list-item-text--en">FAQ</span>
 82 | 			<span class="l-spmenu__list-item-text l-spmenu__list-item-text--jp">よくある質問</span>
 83 | 		</li>
 84 | 		<?php } else { ?>
 85 | 		<li class="l-spmenu__list-item"><a href="<?php echo esc_url(home_url('/#service')); ?>">
 86 | 			<span class="l-spmenu__list-item-text l-spmenu__list-item-text--en">SERVICE</span>
 87 | 			<span class="l-spmenu__list-item-text l-spmenu__list-item-text--jp">サービス</span>
 88 | 		</a></li>
 89 | 		<li class="l-spmenu__list-item"><a href="<?php echo esc_url(home_url('/#news')); ?>">
 90 | 			<span class="l-spmenu__list-item-text l-spmenu__list-item-text--en">NEWS</span>
 91 | 			<span class="l-spmenu__list-item-text l-spmenu__list-item-text--jp">ニュース</span>
 92 | 		</a></li>
 93 | 		<li class="l-spmenu__list-item"><a href="<?php echo esc_url(home_url('/#plan')); ?>">
 94 | 			<span class="l-spmenu__list-item-text l-spmenu__list-item-text--en">PLAN</span>
 95 | 			<span class="l-spmenu__list-item-text l-spmenu__list-item-text--jp">料金案内</span>
 96 | 		</a></li>
 97 | 		<li class="l-spmenu__list-item"><a href="<?php echo esc_url(home_url('/#location')); ?>">
 98 | 			<span class="l-spmenu__list-item-text l-spmenu__list-item-text--en">LOCATION</span>
 99 | 			<span class="l-spmenu__list-item-text l-spmenu__list-item-text--jp">店舗一覧</span>
100 | 		</a></li>
101 | 		<li class="l-spmenu__list-item"><a href="<?php echo esc_url(home_url('/#faq')); ?>">
102 | 			<span class="l-spmenu__list-item-text l-spmenu__list-item-text--en">FAQ</span>
103 | 			<span class="l-spmenu__list-item-text l-spmenu__list-item-text--jp">よくある質問</span>
104 | 		</a></li>
105 | 		<?php } ?>
106 | 	</ul>
107 | 	<div class="l-spmenu__sns">
108 | 		<a href="https://lin.ee/x5e9egE" target=”_blank” class="l-spmenu__sns-icon"><img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/icon/line.png" alt="LINE" class="l-spmenu__sns-icon-img"></a>
109 | 		<a href="https://www.instagram.com/unico_personal.gym/?utm_source=ig_web_button_share_sheet" target=”_blank” class="l-spmenu__sns-icon"><img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/icon/instagram.png" alt="Instagram" class="l-spmenu__sns-icon-img"></a>
110 | 	</div>
111 | </div>


--------------------------------------------------------------------------------
/css/object/component/_component.scss:
--------------------------------------------------------------------------------
  1 | @use "../../foundation/var";
  2 | 
  3 | .c-pagebtn {
  4 | 	display: flex;
  5 | 
  6 | 	&--footer {
  7 | 		width: 100%;
  8 | 		display: none;
  9 | 		position: fixed;
 10 | 		bottom: 0;
 11 | 		left: 0;
 12 | 		z-index: 9;
 13 | 		@include var.mq-max(970px) {
 14 | 			display: flex;
 15 | 		}
 16 | 	}
 17 | 
 18 | 	&__button {
 19 | 		width: 50%;
 20 | 		padding: .6rem 2.0rem;
 21 | 		display: flex;
 22 | 		align-items: center;
 23 | 		gap: 0 .6rem;
 24 | 
 25 | 		&--blog {
 26 | 			background: var.$color-gray;
 27 | 		}
 28 | 		&--contact {
 29 | 			background: var.$color-green;
 30 | 		}
 31 | 
 32 | 		&-icon {
 33 | 			width: 3.6rem;
 34 | 			height: 3.6rem;
 35 | 			background-color: #FFF;
 36 | 			border-radius: 50%;
 37 | 			display: flex;
 38 | 			justify-content: center;
 39 | 			align-items: center;
 40 | 
 41 | 			&-img {
 42 | 				width: 2.0rem;
 43 | 				display: block;
 44 | 			}
 45 | 		}
 46 | 
 47 | 		&-text {
 48 | 			color: #FFF;
 49 | 			font-size: 1.5rem;
 50 | 			text-align: center;
 51 | 			flex-grow: 1;
 52 | 		}
 53 | 	}
 54 | }
 55 | 
 56 | .c-header {
 57 | 	margin-bottom: 4.0rem;
 58 | 	font-size: 2.0rem;
 59 | 	font-weight: bold;
 60 | 	letter-spacing: .4em;
 61 | 
 62 | 	&__jp {
 63 | 		margin-left: 1.0rem;
 64 | 		font-size: 1.2rem;
 65 | 		font-weight: bold;
 66 | 		letter-spacing: .1em;
 67 | 	}
 68 | }
 69 | 
 70 | .c-contact {
 71 | 	text-align: center;
 72 | 
 73 | 	&__header {
 74 | 		width: fit-content;
 75 | 		margin: 0 auto .4rem;
 76 | 		padding: 0 2.4rem;
 77 | 		color: var.$color-pink;
 78 | 		font-size: 1.5rem;
 79 | 		font-weight: bold;
 80 | 		letter-spacing: .2em;
 81 | 		position: relative;
 82 | 		display: block;
 83 | 		&::before {
 84 | 			content: '';
 85 | 			width: 1.5px;
 86 | 			height: 100%;
 87 | 			background-color: var.$color-pink;
 88 | 			position: absolute;
 89 | 			top: 0;
 90 | 			left: 0;
 91 | 			transform: rotate(-30deg);
 92 | 		}
 93 | 		&::after {
 94 | 			content: '';
 95 | 			width: 1.5px;
 96 | 			height: 100%;
 97 | 			background-color: var.$color-pink;
 98 | 			position: absolute;
 99 | 			top: 0;
100 | 			right: 0.8rem;
101 | 			transform: rotate(30deg);
102 | 		}
103 | 	}
104 | 
105 | 	&__button {
106 | 		min-width: 36.0rem;
107 | 		background-color: #FFF;
108 | 		border: 1px solid #000;
109 | 		box-shadow: .3rem .3rem 0 0 #E3E3E3;
110 | 		transition: background-color .3s ease-out;
111 | 		&:hover {
112 | 			background-color: var.$color-main;
113 | 		}
114 | 		@include var.mq-max(600px) {
115 | 			min-width: auto;
116 | 			max-width: 38.0rem;
117 | 			width: 100%;
118 | 		}
119 | 
120 | 		&-inner {
121 | 			padding: .2rem 6.4rem .2rem 4.0rem;
122 | 			display: flex;
123 | 			justify-content: flex-start;
124 | 			align-items: center;
125 | 			gap: 0 14%;
126 | 			position: relative;
127 | 			&::before {
128 | 				content: '';
129 | 				width: 13px;
130 | 				height: 13px;
131 | 				background-color: #000;
132 | 				border-radius: 50%;
133 | 				position: absolute;
134 | 				top: 50%;
135 | 				right: 5%;
136 | 				transform: translateY(-50%);
137 | 			}
138 | 			&::after {
139 | 				content: '';
140 | 				width: 5px;
141 | 				height: 5px;
142 | 				border-top: 2px solid #FFF;
143 | 				border-right: 2px solid #FFF;
144 | 				position: absolute;
145 | 				top: 50%;
146 | 				right: calc(5% + 5px);
147 | 				transform: translateY(-50%) rotate(45deg);
148 | 			}
149 | 
150 | 			&-icon {
151 | 				width: 2.0rem;
152 | 				display: block;
153 | 			}
154 | 
155 | 			&-text {
156 | 				font-size: 1.3rem;
157 | 				font-weight: bold;
158 | 				letter-spacing: .2em;
159 | 				display: block;
160 | 
161 | 				&-line {
162 | 					padding: 0 .2rem;
163 | 					background: linear-gradient(transparent 70%, var.$color-yellow 0%);
164 | 				}
165 | 			}
166 | 		}
167 | 	}
168 | }
169 | 
170 | .c-breadcrumb {
171 | 	margin-bottom: 3.6rem;
172 | 	font-size: 1.0rem;
173 | 	font-weight: bold;
174 | 
175 | 	&__list {
176 | 		list-style: none;
177 | 		display: flex;
178 | 		align-items: center;
179 | 		flex-wrap: wrap;
180 | 
181 | 		&-item {
182 | 			margin-right: 1.2rem;
183 | 
184 | 			&+li::before {
185 | 				margin-right: .9rem;
186 | 				content: '>';
187 | 				vertical-align: text-bottom;
188 | 			}
189 | 
190 | 			a {
191 | 				padding-bottom: 2px;
192 | 				color: var.$color-letter;
193 | 				background-image: linear-gradient(90deg, var.$color-letter, var.$color-letter);
194 | 				background-size: 0 1px;
195 | 				background-position: left bottom;
196 | 				background-repeat: no-repeat;
197 | 				transition: background-size .4s ease-out;
198 | 
199 | 				&:hover {
200 | 					background-size: 100% 1px;
201 | 				}
202 | 			}
203 | 		}
204 | 	}
205 | }
206 | 
207 | .c-sidebar {
208 | 	width: 100%;
209 | 	max-width: 18.6rem;
210 | 	@include var.mq-max(800px) {
211 | 		max-width: 36.0rem;
212 | 	}
213 | 
214 | 	&-group {
215 | 		&-header {
216 | 			padding: 1.5rem;
217 | 			background-color: var.$color-darkgray;
218 | 			border-radius: 3px;
219 | 			color: #FFF;
220 | 			font-size: 1.0rem;
221 | 			font-weight: bold;
222 | 			text-align: center;
223 | 		}
224 | 
225 | 		ul {
226 | 			li {
227 | 				border-bottom: 1px solid #707070;
228 | 				color: #8D9093;
229 | 				font-size: 1.0rem;
230 | 				font-weight: bold;
231 | 				list-style: none;
232 | 				text-align: center;
233 | 				&.u-all {
234 | 					background-color: var.$color-main;
235 | 					border-bottom: none;
236 | 					border-radius: 3px;
237 | 					color: var.$color-darkgray;
238 | 					font-weight: bold;
239 | 				}
240 | 
241 | 				a {
242 | 					padding: 1.5rem;
243 | 					display: block;
244 | 				}
245 | 			}
246 | 		}
247 | 
248 | 		&--archive {
249 | 			ul {
250 | 				max-height: calc(4.4rem * 5 - 1.1rem);
251 | 				background: linear-gradient(0deg, #0000001A 0, transparent 10px, transparent);
252 | 				overflow-y: scroll;
253 | 				-ms-overflow-style: none;
254 | 				scrollbar-width: none;
255 | 				&::-webkit-scrollbar {
256 | 					display: none;
257 | 				}
258 | 			}
259 | 		}
260 | 	}
261 | }
262 | 
263 | .c-pagetitle {
264 | 	width: fit-content;
265 | 	margin: 0 auto;
266 | 	padding: .6rem 1.5rem;
267 | 	background-color: #00000038;
268 | 	text-align: center;
269 | 
270 | 	&__main {
271 | 		color: #FFF;
272 | 		font-size: 2.0rem;
273 | 		font-weight: bold;
274 | 		letter-spacing: .3em;
275 | 	}
276 | 
277 | 	&__sub {
278 | 		margin-top: .8rem;
279 | 		color: #FFF;
280 | 		font-size: .8rem;
281 | 		font-weight: bold;
282 | 		letter-spacing: .2em;
283 | 	}
284 | }
285 | 
286 | .c-backbtn {
287 | 	&__inner {
288 | 		width: 100%;
289 | 		max-width: 26.4rem;
290 | 		margin: 0 auto;
291 | 		text-align: center;
292 | 		display: block;
293 | 
294 | 		&-link {
295 | 			padding: 1.6rem;
296 | 			background-color: #F0F0F0;
297 | 			font-size: 1.5rem;
298 | 			display: block;
299 | 		}
300 | 	}
301 | }
302 | 
303 | a.c-topbackbtn {
304 | 	width: 27.2rem;
305 | 	margin: 6.0rem auto 0;
306 | 	padding: 1.2rem;
307 | 	background-color: var.$color-green;
308 | 	color: #FFF;
309 | 	font-size: 1.6rem;
310 | 	font-weight: bold;
311 | 	letter-spacing: .3em;
312 | 	text-align: center;
313 | 	display: block;
314 | 	transition: opacity .3s ease-out;
315 | 	&:hover {
316 | 		opacity: .8;
317 | 		text-decoration: none;
318 | 	}
319 | }
320 | 
321 | .c-banner {
322 | 	max-width: 62.6rem;
323 | 	margin: 0 auto 6.0rem;
324 | 	padding: 2.4rem 1.2rem;
325 | 	@include var.mq-max(767px) {
326 | 		max-width: none;
327 | 		margin: 0 -2.4rem 2.4rem;
328 | 		padding: 1.0rem .8rem;
329 | 	}
330 | 
331 | 	&__text {
332 | 		font-size: 1.6rem;
333 | 		font-weight: bold;
334 | 		text-align: center;
335 | 		letter-spacing: normal;
336 | 		display: block;
337 | 		@include var.mq-max(767px) {
338 | 			font-size: 1.3rem;
339 | 		}
340 | 	}
341 | 
342 | 	p.c-banner__text {
343 | 		margin: 0;
344 | 	}
345 | }
346 | 


--------------------------------------------------------------------------------
/css/object/project/_contact.scss:
--------------------------------------------------------------------------------
  1 | @use "../../foundation/var";
  2 | 
  3 | .p-form {
  4 | 	margin: 0 auto 4.2rem;
  5 | 	border-spacing: 0 1.5rem;
  6 | 	border-collapse: separate;
  7 | 	@include var.mq-max(767px) {
  8 | 		width: 100%;
  9 | 		margin: 0 auto 3.2rem;
 10 | 		border-spacing: 0 1.8rem;
 11 | 	}
 12 | 
 13 | 	&__head {
 14 | 		width: 25.4rem;
 15 | 		@include var.mq-max(767px) {
 16 | 			width: 100%;
 17 | 			display: block;
 18 | 		}
 19 | 		&--pb {
 20 | 			padding-bottom: 3.0rem;
 21 | 			@include var.mq-max(767px) {
 22 | 				padding-bottom: 0;
 23 | 			}
 24 | 		}
 25 | 
 26 | 		p {
 27 | 			margin: 0;
 28 | 			padding: 1.2rem 2.0rem;
 29 | 			border: 1px solid #FFF;
 30 | 			@include var.mq-max(767px) {
 31 | 				padding: .8rem 1.0rem;
 32 | 			}
 33 | 			&.p-form__head-caption {
 34 | 				padding: 0 2.0rem;
 35 | 				@include var.mq-max(767px) {
 36 | 					padding: 0 1.0rem;
 37 | 				}
 38 | 				&:last-child {
 39 | 					@include var.mq-max(767px) {
 40 | 						padding: 0 1.0rem 1.0rem;
 41 | 					}
 42 | 				}
 43 | 			}
 44 | 		}
 45 | 
 46 | 		&--textarea {
 47 | 			p {
 48 | 				@include var.mq-max(767px) {
 49 | 					padding: .8rem 1.0rem 0;
 50 | 				}
 51 | 			}
 52 | 		}
 53 | 
 54 | 		&-must {
 55 | 			margin-left: 1.2rem;
 56 | 			padding: .2rem .5rem;
 57 | 			background-color: var.$color-pink;
 58 | 			border-radius: 4px;
 59 | 			color: #FFF;
 60 | 			font-size: 1.0rem;
 61 | 		}
 62 | 
 63 | 		&-caption {
 64 | 			padding: 0;
 65 | 			font-size: 1.2rem;
 66 | 			font-weight: normal;
 67 | 		}
 68 | 	}
 69 | 
 70 | 	&__data {
 71 | 		vertical-align: middle;
 72 | 		@include var.mq-max(767px) {
 73 | 			width: 100%;
 74 | 			display: block;
 75 | 		}
 76 | 		&--pb {
 77 | 			padding-bottom: 3.0rem;
 78 | 		}
 79 | 
 80 | 		&-select {
 81 | 			width: fit-content;
 82 | 			position: relative;
 83 | 			@include var.mq-max(767px) {
 84 | 				width: 100%;
 85 | 			}
 86 | 			&--input {
 87 | 				&::before {
 88 | 					content: '';
 89 | 					width: 1.2rem;
 90 | 					height: 1.2rem;
 91 | 					background-color: #CDD6DE;
 92 | 					border-radius: 50%;
 93 | 					position: absolute;
 94 | 					top: 1.8rem;
 95 | 					right: 1.6rem;
 96 | 				}
 97 | 				&::after {
 98 | 					content: '';
 99 | 					width: .4rem;
100 | 					height: .4rem;
101 | 					border-top: 1.5px solid #FFF;
102 | 					border-right: 1.5px solid #FFF;
103 | 					position: absolute;
104 | 					top: 2.1rem;
105 | 					right: 2.0rem;
106 | 					transform: rotate(135deg);
107 | 				}
108 | 			}
109 | 		}
110 | 
111 | 		p {
112 | 			margin: 0;
113 | 		}
114 | 
115 | 		input {
116 | 			padding: 1.2rem;
117 | 			border: 1px solid #CDD6DD;
118 | 			@include var.mq-max(767px) {
119 | 				width: 100%;
120 | 			}
121 | 
122 | 			&[type='text'],
123 | 			&[type='email'],
124 | 			&[type='date'] {
125 | 				min-width: 40.0rem;
126 | 				&::placeholder {
127 | 					color: #CDD6DD;
128 | 				}
129 | 				@include var.mq-max(767px) {
130 | 					min-width: auto;
131 | 				}
132 | 			}
133 | 
134 | 			&[type='date'] {
135 | 				padding: 1.2rem;
136 | 				text-align: left;
137 | 				position: relative;
138 | 				cursor: pointer;
139 | 				&.is-init {
140 | 					min-height: 5.0rem;
141 | 					padding: 1.2rem 1.2rem 1.2rem calc(1.2rem + 2.5rem + 1.2rem);
142 | 					color: #CDD6DD;
143 | 				}
144 | 				&.is-init::after {
145 | 					content: '';
146 | 					width: 2.5rem;
147 | 					height: 2.6rem;
148 | 					background: url(../img/icon/calendar.svg) no-repeat center center / contain;
149 | 					position: absolute;
150 | 					top: 50%;
151 | 					left: 1.2rem;
152 | 					transform: translateY(-50%);
153 | 					pointer-events: none;
154 | 				}
155 | 				&::-webkit-calendar-picker-indicator {
156 | 					width: 100%;
157 | 					height: 100%;
158 | 					position: absolute;
159 | 					opacity: 0;
160 | 					top: 0;
161 | 					left: 0;
162 | 					cursor: pointer;
163 | 				}
164 | 			}
165 | 
166 | 			&[type='radio'] {
167 | 				opacity: 0;
168 | 				visibility: hidden;
169 | 				position: absolute;
170 | 				@include var.mq-max(767px) {
171 | 					width: auto;
172 | 				}
173 | 				&+span {
174 | 					position: relative;
175 | 					&::before {
176 | 						content: '';
177 | 						width: 3.0rem;
178 | 						height: 3.0rem;
179 | 						border: 1px solid #CDD6DD;
180 | 						border-radius: 50%;
181 | 						position: absolute;
182 | 						top: 50%;
183 | 						left: -4.0rem;
184 | 						transform: translateY(-50%);
185 | 					}
186 | 				}
187 | 				&:checked+span {
188 | 					&::after {
189 | 						content: '';
190 | 						width: 1.8rem;
191 | 						height: 1.8rem;
192 | 						background-color: var.$color-green;
193 | 						border-radius: 50%;
194 | 						position: absolute;
195 | 						top: 50%;
196 | 						left: -3.4rem;
197 | 						transform: translateY(-50%);
198 | 					}
199 | 				}
200 | 			}
201 | 		}
202 | 
203 | 		select {
204 | 			min-width: 40.0rem;
205 | 			padding: 1.2rem;
206 | 			border: 1px solid #CDD6DD;
207 | 			cursor: pointer;
208 | 			@include var.mq-max(767px) {
209 | 				width: 100%;
210 | 				min-width: auto;
211 | 			}
212 | 		}
213 | 
214 | 		textarea {
215 | 			min-width: 40.0rem;
216 | 			padding: 1.2rem;
217 | 			border: 1px solid #CDD6DD;
218 | 			&::placeholder {
219 | 				color: #CDD6DD;
220 | 			}
221 | 			@include var.mq-max(767px) {
222 | 				width: 100%;
223 | 				min-width: auto;
224 | 			}
225 | 		}
226 | 
227 | 		.wpcf7-radio {
228 | 			margin-left: 4.0rem;
229 | 			margin-bottom: .3rem;
230 | 			display: flex;
231 | 			flex-direction: column;
232 | 			gap: 2.0rem 0;
233 | 		}
234 | 
235 | 		.wpcf7-not-valid-tip {
236 | 			padding-left: 1.2rem;
237 | 		}
238 | 	}
239 | }
240 | 
241 | p.p-checkbox {
242 | 	width: fit-content;
243 | 	margin: 0 auto;
244 | 	text-align: center;
245 | 
246 | 	input[type='checkbox'] {
247 | 		opacity: 0;
248 | 		visibility: hidden;
249 | 		position: absolute;
250 | 		&+span {
251 | 			position: relative;
252 | 			&::before {
253 | 				content: '';
254 | 				width: 3.0rem;
255 | 				height: 3.0rem;
256 | 				border: 1px solid #CDD6DD;
257 | 				position: absolute;
258 | 				top: 50%;
259 | 				left: -2.5rem;
260 | 				transform: translateY(-50%);
261 | 			}
262 | 		}
263 | 		&:checked+span {
264 | 			&::after {
265 | 				content: '';
266 | 				width: 1.6rem;
267 | 				height: 1.6rem;
268 | 				background: url(../img/icon/check.svg) no-repeat center center / contain;
269 | 				position: absolute;
270 | 				top: 50%;
271 | 				left: -1.8rem;
272 | 				transform: translateY(-50%);
273 | 			}
274 | 		}
275 | 	}
276 | 
277 | 	&--confirm {
278 | 		position: relative;
279 | 		&::before {
280 | 			content: '';
281 | 			width: 3.0rem;
282 | 			height: 3.0rem;
283 | 			border: 1px solid #CDD6DD;
284 | 			position: absolute;
285 | 			top: 50%;
286 | 			left: -3.0rem;
287 | 			transform: translateY(-50%);
288 | 		}
289 | 		&::after {
290 | 			content: '';
291 | 			width: 1.6rem;
292 | 			height: 1.6rem;
293 | 			background: url(../img/icon/check.svg) no-repeat center center / contain;
294 | 			position: absolute;
295 | 			top: 50%;
296 | 			left: -2.3rem;
297 | 			transform: translateY(-50%);
298 | 		}
299 | 	}
300 | 
301 | 	a {
302 | 		padding-left: 1.0rem;
303 | 		color: var.$color-letter;
304 | 		text-decoration: underline;
305 | 	}
306 | }
307 | 
308 | p.p-submit {
309 | 	margin: 3.0rem auto 0;
310 | 	text-align: center;
311 | 	display: flex;
312 | 	flex-direction: column;
313 | 	align-items: center;
314 | 	gap: .2rem 0;
315 | 
316 | 	input[type='submit'] {
317 | 		width: 27.2rem;
318 | 		padding: 1.2rem;
319 | 		background-color: var.$color-green;
320 | 		color: #FFF;
321 | 		font-size: 1.6rem;
322 | 		font-weight: bold;
323 | 		letter-spacing: .3em;
324 | 		transition: opacity .3s ease-out;
325 | 		&:hover {
326 | 			opacity: .8;
327 | 		}
328 | 	}
329 | }
330 | 
331 | p.p-back {
332 | 	margin: 1.2rem auto 0;
333 | 	text-align: center;
334 | 
335 | 	input[type='button'] {
336 | 		width: 27.2rem;
337 | 		padding: 1.2rem;
338 | 		background-color: var.$color-gray;
339 | 		color: #FFF;
340 | 		font-size: 1.6rem;
341 | 		font-weight: bold;
342 | 		letter-spacing: .3em;
343 | 		transition: opacity .3s ease-out;
344 | 		&:hover {
345 | 			opacity: .8;
346 | 		}
347 | 	}
348 | }
349 | 
350 | span.wpcf7-list-item {
351 | 	margin-left: 0;
352 | }
353 | span.wpcf7-list-item-label {
354 | 	cursor: pointer;
355 | }
356 | 
357 | div.wpcf7-response-output {
358 | 	display: none;
359 | }


--------------------------------------------------------------------------------
/css/layout/_top.scss:
--------------------------------------------------------------------------------
  1 | @use "../foundation/var";
  2 | 
  3 | .l-top {
  4 | 	max-width: var.$content-width;
  5 | 	margin-top: 12.0rem;
  6 | 	margin-right: auto;
  7 | 	margin-left: auto;
  8 | 	@include var.mq-max(970px) {
  9 | 		margin-top: 8.0rem;
 10 | 	}
 11 | 	@include var.mq-max(600px) {
 12 | 		margin-top: 7.0rem;
 13 | 	}
 14 | 	&--top {
 15 | 		margin-bottom: 9.4rem;
 16 | 		position: relative;
 17 | 		@include var.mq-max(600px) {
 18 | 			margin-bottom: 6.8rem;
 19 | 		}
 20 | 	}
 21 | 	&--page {
 22 | 		padding: 11.2rem .8rem 8.8rem;
 23 | 		@include var.mq-max(600px) {
 24 | 			padding: 3.6rem .8rem;
 25 | 		}
 26 | 	}
 27 | 	&--single {
 28 | 		padding: 11.2rem .8rem 8.8rem;
 29 | 		@include var.mq-max(600px) {
 30 | 			padding: 3.6rem .8rem;
 31 | 		}
 32 | 	}
 33 | 	&--archive {
 34 | 		padding: 11.2rem .8rem 8.8rem;
 35 | 		@include var.mq-max(600px) {
 36 | 			padding: 3.6rem .8rem;
 37 | 		}
 38 | 	}
 39 | 
 40 | 	&__view {
 41 | 		max-width: 1107px;
 42 | 		margin: 0 auto;
 43 | 		padding: 0 4.6rem;
 44 | 		position: relative;
 45 | 		@include var.mq-max(820px) {
 46 | 			padding: 0 2.3rem;
 47 | 		}
 48 | 		@include var.mq-max(767px) {
 49 | 			padding: 0;
 50 | 		}
 51 | 
 52 | 		&-img {
 53 | 			width: 100%;
 54 | 
 55 | 			&-inner {
 56 | 				padding-top: 53.3%;
 57 | 				@include var.mq-max(600px) {
 58 | 					padding-top: 46.0rem;
 59 | 				}
 60 | 			}
 61 | 		}
 62 | 
 63 | 		&-banner {
 64 | 			margin: 0 auto;
 65 | 			background-color: var.$color-yellow;
 66 | 			transition: background-color .3s ease-out;
 67 | 			&:hover {
 68 | 				background-color: #fff080;
 69 | 			}
 70 | 
 71 | 			&-link {
 72 | 				padding: .8rem;
 73 | 				font-size: 2.0rem;
 74 | 				display: flex;
 75 | 				justify-content: center;
 76 | 				align-items: center;
 77 | 				flex-wrap: wrap;
 78 | 				gap: 0 3.6rem;
 79 | 				@include var.mq-max(600px) {
 80 | 					padding: .6rem;
 81 | 					font-size: 1.6rem;
 82 | 					text-align: center;
 83 | 					display: block;
 84 | 				}
 85 | 
 86 | 				&-span {
 87 | 					font-weight: bold;
 88 | 					display: inline-block;
 89 | 
 90 | 					&--detail {
 91 | 						display: flex;
 92 | 						justify-content: center;
 93 | 						align-items: center;
 94 | 						gap: 0 .6rem;
 95 | 					}
 96 | 
 97 | 					&-img {
 98 | 						width: 2.6rem;
 99 | 						margin-left: .6rem;
100 | 						display: block;
101 | 						@include var.mq-max(600px) {
102 | 							width: 1.7rem;
103 | 						}
104 | 					}
105 | 				}
106 | 			}
107 | 		}
108 | 
109 | 		&-message {
110 | 			position: absolute;
111 | 			top: 44%;
112 | 			left: 1.2rem;
113 | 			z-index: 5;
114 | 			transform: translateY(-50%);
115 | 			display: flex;
116 | 			flex-direction: column;
117 | 			align-items: flex-start;
118 | 			gap: 1.0rem;
119 | 
120 | 			&-text {
121 | 				width: fit-content;
122 | 				background-color: #FFF;
123 | 
124 | 				&--lg {
125 | 					padding: .2rem 2.4rem;
126 | 					font-size: 2.0rem;
127 | 					font-weight: bold;
128 | 					@include var.mq-max(767px) {
129 | 						padding: .2rem 1.2rem;
130 | 						clip-path: polygon(0 0, 75% 0, 75% 53%, 100% 53%, 100% 100%, 0 100%);
131 | 					}
132 | 					span {
133 | 						font-size: 3.0rem;
134 | 					}
135 | 					br {
136 | 						display: none;
137 | 						@include var.mq-max(767px) {
138 | 							display: block;
139 | 						}
140 | 					}
141 | 				}
142 | 
143 | 				&--md {
144 | 					padding: 1.0rem 2.4rem;
145 | 					font-size: 2.0rem;
146 | 					font-weight: bold;
147 | 					@include var.mq-max(767px) {
148 | 						padding: .8rem 1.2rem;
149 | 					}
150 | 				}
151 | 
152 | 				&--gray {
153 | 					padding: .2rem 2.4rem;
154 | 					color: #A2A2A2;
155 | 					font-size: 1.5rem;
156 | 					font-weight: bold;
157 | 				}
158 | 			}
159 | 
160 | 			&-ribbon {
161 | 				height: 4.5rem;
162 | 				margin-left: 1.5rem;
163 | 				text-align: center;
164 | 				display: inline-block;
165 | 				position: relative;
166 | 				@include var.mq-max(767px) {
167 | 					height: 3.6rem;
168 | 					margin-left: .6rem;
169 | 				}
170 | 				&::before {
171 | 					width: 10px;
172 | 					content: '';
173 | 					border: 20px solid #E58181;
174 | 					border-left-color: transparent;
175 | 					position: absolute;
176 | 					bottom: -10px;
177 | 					left: -25px;
178 | 					z-index: -2;
179 | 					@include var.mq-max(767px) {
180 | 						border-width: 16px;
181 | 						left: -17px;
182 | 					}
183 | 				}
184 | 				&::after {
185 | 					width: 10px;
186 | 					content: '';
187 | 					position: absolute;
188 | 					bottom: -10px;
189 | 					right: -25px;
190 | 					z-index: -2;
191 | 					border: 20px solid #E58181;
192 | 					border-right-color: transparent;
193 | 					@include var.mq-max(767px) {
194 | 						border-width: 16px;
195 | 						right: -17px;
196 | 					}
197 | 				}
198 | 
199 | 				&-inner {
200 | 					margin: 0;
201 | 					padding: 0 20px;
202 | 					background-color: #F48585;
203 | 					color: #FFF;
204 | 					font-size: 1.9rem;
205 | 					font-weight: bold;
206 | 					line-height: 4.5rem;
207 | 					display: inline-block;
208 | 					position: relative;
209 | 					@include var.mq-max(767px) {
210 | 						padding: 0 10px;
211 | 						font-size: 1.5rem;
212 | 						line-height: 3.6rem;
213 | 					}
214 | 					&::before {
215 | 						content: '';
216 | 						border-bottom: solid 10px transparent;
217 | 						border-right: solid 15px #C46161;
218 | 						position: absolute;
219 | 						top: 100%;
220 | 						left: 0;
221 | 					}
222 | 					&::after {
223 | 						content: '';
224 | 						border-bottom: solid 10px transparent;
225 | 						border-left: solid 15px #C46161;
226 | 						position: absolute;
227 | 						top: 100%;
228 | 						right: 0;
229 | 					}
230 | 				}
231 | 			}
232 | 		}
233 | 
234 | 		&-button {
235 | 			position: absolute;
236 | 			top: 65%;
237 | 			right: 6%;
238 | 			z-index: 5;
239 | 			@include var.mq-max(970px) {
240 | 				top: 60%;
241 | 			}
242 | 			@include var.mq-max(820px) {
243 | 				right: 4%;
244 | 			}
245 | 			@include var.mq-max(767px) {
246 | 				display: none;
247 | 			}
248 | 
249 | 			&-inner {
250 | 				padding: .6rem 6.4rem .6rem 5.2rem;
251 | 				background-color: var.$color-lightpink;
252 | 				border: 4px solid #FFF;
253 | 				border-radius: 4.5rem;
254 | 				color: #FFF;
255 | 				font-size: 2.5rem;
256 | 				font-weight: bold;
257 | 				text-align: center;
258 | 				display: block;
259 | 				position: relative;
260 | 				transition: all .3s ease-out;
261 | 				@include var.mq-max(970px) {
262 | 					padding: .6rem 5.4rem .6rem 3.0rem;
263 | 					font-size: 2.0rem;
264 | 					border: 3px solid #FFF;
265 | 				}
266 | 				&::before {
267 | 					content: '';
268 | 					width: 3.0rem;
269 | 					height: 3.0rem;
270 | 					background-color: #FFF;
271 | 					border-radius: 50%;
272 | 					position: absolute;
273 | 					top: 50%;
274 | 					right: 1.8rem;
275 | 					transform: translateY(-50%);
276 | 					transition: background-color .3s ease-out;
277 | 				}
278 | 				&::after {
279 | 					content: '';
280 | 					width: 1.0rem;
281 | 					height: 1.0rem;
282 | 					border-top: 4px solid var.$color-lightpink;
283 | 					border-right: 4px solid var.$color-lightpink;
284 | 					position: absolute;
285 | 					top: 50%;
286 | 					right: 2.8rem;
287 | 					transform: translateY(-50%) rotate(45deg);
288 | 					transition: border .3s ease-out;
289 | 				}
290 | 				&:hover {
291 | 					background-color: #FFF;
292 | 					border: 4px solid var.$color-lightpink;
293 | 					color: var.$color-lightpink;
294 | 					@include var.mq-max(970px) {
295 | 						border: 3px solid var.$color-lightpink;
296 | 					}
297 | 					&::before {
298 | 						background-color: var.$color-lightpink;
299 | 					}
300 | 					&::after {
301 | 						border-color: #FFF;
302 | 					}
303 | 				}
304 | 			}
305 | 		}
306 | 	}
307 | 
308 | 	&__scroll {
309 | 		font-size: .8rem;
310 | 		font-weight: bold;
311 | 		position: absolute;
312 | 		left: 3%;
313 | 		bottom: 2.4rem;
314 | 		writing-mode: sideways-lr;
315 | 		@include var.mq-max(1160px) {
316 | 			left: 1.2rem;
317 | 			bottom: 0;
318 | 		}
319 | 		@include var.mq-max(820px) {
320 | 			display: none;
321 | 		}
322 | 
323 | 		&::before {
324 | 			content: "";
325 | 			width: 2px;
326 | 			height: 10.0rem;
327 | 			background-color: #707070;
328 | 			position: absolute;
329 | 			left: calc(50% - 1px);
330 | 			top: -10.4rem;
331 | 			z-index: 2;
332 | 			animation: scroll 2s infinite;
333 | 			@include var.mq-max(900px) {
334 | 				height: 8.0rem;
335 | 				top: -8.4rem;
336 | 			}
337 | 		}
338 | 
339 | 		&::after {
340 | 			content: "";
341 | 			width: 2px;
342 | 			height: 10.0rem;
343 | 			background-color: #D9D9D9;
344 | 			position: absolute;
345 | 			left: calc(50% - 1px);
346 | 			top: -10.4rem;
347 | 			@include var.mq-max(900px) {
348 | 				height: 8.0rem;
349 | 				top: -8.4rem;
350 | 			}
351 | 		}
352 | 
353 | 		@keyframes scroll {
354 | 			0% {
355 | 				transform: scale(1, 0);
356 | 				transform-origin: 0 0;
357 | 			}
358 | 			50% {
359 | 				transform: scale(1, 1);
360 | 				transform-origin: 0 0;
361 | 			}
362 | 			51% {
363 | 				transform: scale(1, 1);
364 | 				transform-origin: 0 100%;
365 | 			}
366 | 			100% {
367 | 				transform: scale(1, 0);
368 | 				transform-origin: 0 100%;
369 | 			}
370 | 		}
371 | 	}
372 | }
373 | 


--------------------------------------------------------------------------------
/css/style.css.map:
--------------------------------------------------------------------------------
1 | {"version":3,"sourceRoot":"","sources":["foundation/_reset.scss","foundation/_base.scss","foundation/_var.scss","layout/_header.scss","layout/_top.scss","layout/_main.scss","layout/_footer.scss","object/component/_component.scss","object/project/_project.scss","object/project/_page.scss","object/project/_single.scss","object/project/_archive.scss","object/project/_contact.scss"],"names":[],"mappings":";AAAA;EAAmB;EAAsB;EAAmB;;;AAAgB;EAAK;EAAiB;EAA8B;;;AAAyC;EAAK;;;AAAU;EAAK;;;AAAe;EAAqD;;;AAAU;EAAkB;EAAkB;EAAoB;;;AAAU;EAAM;EAAS;EAAU;;;AAAiB;EAAG;;;AAAkB;EAAG;;;AAAe;EAAG;EAAuB;EAAS;EAAiB;EAAqB;EAAS;EAAW;;;AAAe;EAAI;EAAgC;;;AAAmB;EAAQ;;;AAAoB;EAAE;EAA6B;EAAqB;;;AAAe;EAAY;;;AAAiC;EAAS;;;AAAoB;EAAc;EAAgC;;;AAAmB;EAAM;;;AAAe;EAAQ;EAAc;EAAc;EAAkB;;;AAAyB;EAAI;;;AAAgB;EAAI;;;AAAY;EAA4B;;;AAAuB;EAAsC;EAAwB;EAAgB;EAAsB;EAAc;EAAa;EAAuB;EAAU;EAAS;EAAgB;EAAmB;;;AAAwB;EAAkB;EAA4B;;;AAAqB;EAAe;EAAyB;;;AAAkB;EAAsD;;;AAAgB;EAA0F;;;AAAgB;EAAgB;;;AAAc;EAAgB;;;AAAiB;EAAO;;;AAAW;EAAS;EAAS;EAAU;;;AAAa;EAAO;;;AAAW;EAAS;;;AAAyB;EAAS;;;AAAe;EAAsF;;;AAAa;EAAgB;;;AAAqB;EAA2C;;;AAAyB;EAA6B;EAA0B;;;AAAc;EAAW;;;AAAgB;EAAQ;;;AAAe;EAAQ;;;AAAmB;EAAwB;;;AAAc;EAAM;EAAqB;;;AAA0B;EAAQ;;;AAAiB;EAAM;EAAmB;;;AAAW;EAAG;EAAgB;;;ACEtsE;EACC;;;AAGD;EACC;EACA,kBCGY;EDFZ,OCGc;EDFd;EACA;EACA;EACA;EACA;EACA;;;AAKA;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAGD;EACC;;AAGD;EACC;;AAGD;EACC,OC3Ba;;AD4Bb;EACC;;AAIF;EACC;;AAGD;EACC;EACA;;AAEA;EACC;;AAIF;EACC;EACA;;AAEA;EACC;;AAIF;EACC;;;AE1EF;EACC;EACA;EACA,kBDMY;ECLZ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;ADbA;ECCD;IAcE;;;AAGD;EACC;EACA;;ADpBD;ECkBA;IAIE;;;AAGD;EACC;EACA;;AD3BF;ECyBC;IAIE;;;AAKH;EACC;EACA;;ADpCD;ECkCA;IAIE;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;;AAEA;EACC;;AAED;EACC;;AAMJ;EACC;EACA;EACA;;AD/ED;EC4EA;IAKE;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC,YDlFS;ECmFT;;AAED;EACC,YDnFU;ECoFV;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;;AAKH;EACC;EACA;EACA;EACA;EACA;EACA;;ADpID;EC8HA;IAQE;;;AAGD;EACC;EACA;EACA;EACA,kBDlIY;ECmIZ;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA,kBD3IW;EC4IX;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA,kBDtJW;ECuJX;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA,kBDvKU;ECwKV;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA,kBDlLU;ECmLV;EACA;EACA;EACA;EACA;;;AAOL;EACC;EACA;EACA;EACA,kBDnMY;ECoMZ;EACA;EACA;EACA;EACA;;ADlNA;ECyMD;IAWE;IACA;IACA;;;AAIA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;;AAEA;EACC;;AAED;EACC;;AAMJ;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;;AAEA;EACC;EACA;;;ACxQJ;EACC,WFkBe;EEjBf;EACA;EACA;;AFLA;EECD;IAME;;;AFPD;EECD;IASE;;;AAED;EACC;EACA;;AFdD;EEYA;IAIE;;;AAGF;EACC;;AFpBD;EEmBA;IAGE;;;AAGF;EACC;;AF1BD;EEyBA;IAGE;;;AAGF;EACC;;AFhCD;EE+BA;IAGE;;;AAIF;EACC;EACA;EACA;EACA;;AF1CD;EEsCA;IAME;;;AF5CF;EEsCA;IASE;;;AAGD;EACC;;AAEA;EACC;;AFtDH;EEqDE;IAGE;;;AAKH;EACC;EACA,kBF/CY;EEgDZ;;AACA;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AF5EH;EEqEE;IASE;IACA;IACA;IACA;;;AAGD;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AFlGL;EE+FI;IAKE;;;AAOL;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAEA;EACC;EACA;EACA;;AF7HJ;EE0HG;IAKE;IACA;;;AAED;EACC;;AAED;EACC;;AFtIL;EEqII;IAGE;;;AAKH;EACC;EACA;EACA;;AFhJJ;EE6IG;IAKE;;;AAIF;EACC;EACA;EACA;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;;AFnKH;EE8JE;IAOE;IACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AFhLJ;EEwKG;IAUE;IACA;;;AAGF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AF9LJ;EEsLG;IAUE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AF9MJ;EEqMG;IAWE;IACA;IACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;;AAMJ;EACC;EACA;EACA;EACA;;AF5OF;EEwOC;IAME;;;AF9OH;EEwOC;IASE;;;AFjPH;EEwOC;IAYE;;;AAGD;EACC;EACA,kBFvOc;EEwOd;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AFlQH;EEuPE;IAaE;IACA;IACA;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;EACA,OFjRa;;AAlBjB;EEgSG;IAKE;;;AAED;EACC,kBFtRY;;AEwRb;EACC;;AAOL;EACC;EACA;EACA;EACA;EACA;EACA;;AFxTD;EEkTA;IAQE;IACA;;;AF3TF;EEkTA;IAYE;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AF1UF;EEiUC;IAWE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AFxVF;EEiVC;IASE;IACA;;;AAIF;EACC;IACC;IACA;;EAED;IACC;IACA;;EAED;IACC;IACA;;EAED;IACC;IACA;;;;AC7WJ;EACC,WHkBe;EGjBf;EACA;;AAEA;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAEA;EACC,WHDuB;;AGGxB;EACC;EACA,WHJwB;;AAtB1B;EGwBC;IAIE;;;AAGF;EACC,WHVwB;;AGYzB;EACC,WHbwB;;;AIrB3B;EACC;EACA;;AJHA;EICD;IAIE;;;AAGD;EACC;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AAED;EACC;EACA;;AAIF;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAGC;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;;AAMJ;EACC;EACA;;AJhFF;EI8EC;IAIE;;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;;AACA;EACC;;AJ7GJ;EI4GG;IAGE;;;AAMJ;EACC;EACA;EACA;EACA;EACA;;AJ1HF;EIqHC;IAOE;;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;;AAKH;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAIF;EACC;EACA;;AAEA;EACC;EACA;EACA;;;AC7JJ;EACC;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;ALVD;EKIA;IAQE;;;AAIF;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC,YLZU;;AKcX;EACC,YLZW;;AKeZ;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAIF;EACC;EACA;EACA;EACA;;;AAKH;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;;AAIF;EACC;;AAEA;EACC;EACA;EACA;EACA,OL1DW;EK2DX;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA,kBLpEU;EKqEV;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA,kBL9EU;EK+EV;EACA;EACA;EACA;;AAIF;EACC;EACA;EACA;EACA;EACA;;AACA;EACC,kBLpGU;;AAVZ;EKuGA;IAUE;IACA;IACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;;;AAOL;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAEA;EACC;;AAEA;EACC;EACA;EACA;;AAGD;EACC;EACA,OLnLW;EKoLX;EACA;EACA;EACA;EACA;;AAEA;EACC;;;AAOL;EACC;EACA;;AL/MA;EK6MD;IAIE;;;AAIA;EACC;EACA,kBL1Mc;EK2Md;EACA;EACA;EACA;EACA;;AAIA;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC,kBL9NQ;EK+NR;EACA;EACA,OL9NY;EK+NZ;;AAGD;EACC;EACA;;AAMF;EACC;EACA;EACA;EACA;EACA;;AACA;EACC;;;AAOL;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;;AAKD;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;;AAKH;EACC;EACA;EACA;EACA,kBLlSa;EKmSb;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;;;AAIF;EACC;EACA;EACA;;ALlUA;EK+TD;IAKE;IACA;IACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;;AL9UD;EKyUA;IAOE;;;AAIF;EACC;;;ACpVF;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;;ANjBD;EMaA;IAME;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AN7BF;EMsBC;IASE;;;;AAOH;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AN7CD;EMsCA;IASE;IACA;;;AAGD;EACC;EACA;EACA,kBNzCc;EM0Cd;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;AN/DH;EMmDC;IAeE;IACA;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKH;EACC;;AACA;EACC;;AAGD;EACC;EACA;EACA;EACA;EACA;;AN1GF;EMqGC;IAOE;;;AAIF;EACC;EACA;EACA;EACA;EACA;;ANrHF;EMgHC;IAOE;;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EACC;;AACA;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;;AN5IL;EMiIE;IAeE;;;AAIF;EACC;EACA;EACA;EACA;;ANxJH;EMoJE;IAME;IACA;IACA;;;AAGD;EACC;EACA;;AACA;EACC;EACA;EACA;;ANrKL;EM+JG;IASE;;;AAGD;EACC;EACA;;AN7KL;EM2KI;IAIE;;;AAIF;EACC;EACA;;ANrLL;EMmLI;IAIE;;;AAIF;EACC;EACA;;AN7LL;EM2LI;IAIE;;;AAGD;EACC;EACA;EACA;EACA;;AACA;EACC;;AAED;EACC;;AN3MP;EMkMK;IAYE;;;AAGD;EACC;;AAOL;EACC;EACA;EACA;;;AAOH;EACC;EACA;EACA;EACA;;AACA;EACC;;ANzOF;EMmOA;IASE;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;ANxPH;EM+OC;IAYE;;;AAGD;EACC;;AACA;EACC;;AAIF;EACC;;ANtQH;EMqQE;IAGE;;;AAGD;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAIF;EACC;EACA;;ANhSJ;EM8RG;IAIE;;;;AASL;EACC;EACA;;AACA;EACC;;AAED;EACC;;AAGD;EACC;;AAGD;EACC;EACA,kBN9Sc;EM+Sd;EACA;EACA;EACA;EACA;EACA;EACA;;ANlUF;EMyTC;IAWE;;;AAIF;EACC;;ANzUF;EMwUC;IAGE;;;AAGD;EACC;;AN/UH;EM8UE;IAGE;;;ANjVJ;EMmVG;IAEE;;;ANrVL;EMuVI;IAEE;;;AAMJ;EACC;EACA;EACA;EACA;;AAEA;EACC;;AACA;EACC;;ANxWL;EMuWI;IAGE;;;AAIH;EACC;;AN/WJ;EM8WG;IAGE;;;AAED;EACC;;ANpXL;EMmXI;IAGE;;;AAIH;EACC;;AACA;EACC;;AN7XL;EM4XI;IAGE;;;AAKH;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC,kBN/XQ;EMgYR;;AAED;EACC,kBNhYY;EMiYZ;;AAED;EACC,kBN5YO;EM6YP,ON5YS;EM6YT;;ANxZL;EMqZI;IAKE;;;AAGF;EACC;EACA;;AACA;EACC;EACA;EACA;;AAKH;EACC;EACA;EACA;;AAEA;EACC,kBN5ZY;EM6ZZ;EACA;;AAGD;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAED;EACC;;AAMJ;EACC;;AAEA;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AAIF;EACC;EACA;;AAEA;EACC;EACA;;;AASL;EACC;EACA;EACA;EACA;EACA;EACA;;AN3fD;EMqfA;IAQE;IACA;;;AAGD;EACC;EACA;EACA;;ANpgBF;EMigBC;IAKE;;;AAED;EACC;EACA;EACA;EACA,kBNjgBW;EMkgBX;EACA;EACA;EACA;;ANhhBH;EMwgBE;IAUE;;;AAKH;EACC;EACA;EACA;EACA,ONzgBe;EM0gBf;EACA;EACA;;AACA;EACC,kBN9gBc;EM+gBd;;ANjiBH;EMuhBC;IAaE;IACA;;;AAKH;EACC;EACA;EACA;EACA;;AN9iBD;EM0iBA;IAME;;;AAIA;EACC;;ANrjBH;EMojBE;IAGE;;;AAGF;EACC;;AN3jBH;EM0jBE;IAGE;;;AAIF;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;;AAIF;EACC;;AAEA;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;;;AAOL;EACC;EACA,kBNvlBiB;EMwlBjB;EACA;;ANvmBA;EMmmBD;IAME;;;AAGD;EACC;EACA;;AAEA;EACC;EACA;EACA;EACA;EACA;EACA;;AACA;EACC;;ANxnBH;EMgnBC;IAWE;;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;;ANnoBH;EM6nBE;IAQE;IACA;;;AAIF;EACC;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA,kBNzoBU;EM0oBV;EACA;;AAED;EACC;EACA;EACA;EACA,kBNjpBU;EMkpBV;EACA;;AAKD;EACC;;AACA;EACC;;AAMJ;EACC;EACA,ON7pBU;EM8pBV;EACA;EACA;;ANjrBF;EM4qBC;IAOE;;;AAGD;EACC;EACA;EACA;EACA;EACA;EACA;;AN5rBH;EMsrBE;IAQE;;;;AC7rBL;EACC;EACA;EACA;;APJA;EOCD;IAKE;;;APND;EOCD;IAQE;;;;ACRF;EACC;;ARFA;EQCD;IAGE;;;ARJD;EQCD;IAME;;;AAGD;EACC;EACA;;ARZD;EQUA;IAIE;IACA;;;AAGD;EACC;;AAEA;EACC;EACA;EACA;;ARxBH;EQqBE;IAKE;;;AAIF;EACC;EACA;EACA;EACA;EACA;;ARnCH;EQ8BE;IAOE;;;AAGD;EACC;;AACA;EACC;EACA;EACA;EACA;;AACA;EACC;;ARhDN;EQqDG;IAEE;;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAMJ;EACC;EACA;EACA;;AR9EH;EQ2EE;IAKE;IACA;;;AAGD;EACC;EACA;;AAGD;EACC;;AR1FJ;EQyFG;IAGE;;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA;EACA;;AAMJ;EACC;EACA;;AAEA;EACC;EACA;;AAIF;EACC;;;AC1HJ;EACC;;ATFA;ESCD;IAGE;;;ATJD;ESCD;IAME;;;AAGD;EACC;EACA;;ATZD;ESUA;IAIE;IACA;;;AAGD;EACC;;AAEA;EACC;EACA;EACA;EACA;;ATzBH;ESqBE;IAME;;;AT3BJ;ESqBE;IASE;;;AAGD;EACC;EACA;EACA;;ATpCJ;ESiCG;IAKE;;;ATtCL;ESiCG;IAQE;;;AAGD;EACC;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;EACA;EACA;;AAIF;EACC;EACA;EACA;EACA;;AAGD;EACC;EACA;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;EACA;;AAOL;EACC;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;;AAGD;EACC;EACA;;AAEA;EACC;EACA;EACA;;AAGD;EACC;EACA;;AAGD;EACC;;;AC9HN;EACC;EACA;EACA;;AVJA;EUCD;IAKE;IACA;IACA;;;AAGD;EACC;;AVZD;EUWA;IAGE;IACA;;;AAED;EACC;;AVlBF;EUiBC;IAGE;;;AAIF;EACC;EACA;EACA;;AV3BF;EUwBC;IAKE;;;AAED;EACC;;AVhCH;EU+BE;IAGE;;;AVlCJ;EUoCG;IAEE;;;AVtCL;EU6CE;IAEE;;;AAKH;EACC;EACA;EACA,kBVtCU;EUuCV;EACA;EACA;;AAGD;EACC;EACA;EACA;;AAIF;EACC;;AVrED;EUoEA;IAGE;IACA;;;AAED;EACC;;AAGD;EACC;EACA;;AVhFF;EU8EC;IAIE;;;AAGA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKH;EACC;;AAGD;EACC;EACA;;AVnHF;EUiHC;IAIE;;;AAGD;EAGC;;AACA;EACC;;AV7HJ;EUwHE;IAQE;;;AAIF;EACC;EACA;EACA;EACA;;AACA;EACC;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACC;EACA;EACA;;AVvKH;EUoKE;IAKE;;;AAED;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAID;EACC;EACA;EACA;EACA,kBV/KQ;EUgLR;EACA;EACA;EACA;EACA;;AAMJ;EACC;EACA;EACA;EACA;;AV7MF;EUyMC;IAME;IACA;;;AAIF;EACC;EACA;EACA;;AACA;EACC;;AVzNH;EUoNC;IAQE;IACA;;;AAIF;EACC;EACA;EACA;EACA;EACA;;AAGD;EACC;;;AAKH;EACC;EACA;EACA;;AAEA;EACC;EACA;EACA;;AACA;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAID;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKH;EACC;;AACA;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAED;EACC;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIF;EACC;EACA,OVlSa;EUmSb;;;AAIF;EACC;EACA;EACA;EACA;EACA;EACA;;AAEA;EACC;EACA;EACA,kBV9SY;EU+SZ;EACA;EACA;EACA;EACA;;AACA;EACC;;;AAKH;EACC;EACA;;AAEA;EACC;EACA;EACA,kBVpUW;EUqUX;EACA;EACA;EACA;EACA;;AACA;EACC;;;AAKH;EACC;;;AAED;EACC;;;AAGD;EACC","file":"style.css"}


--------------------------------------------------------------------------------
/css/object/project/_project.scss:
--------------------------------------------------------------------------------
  1 | @use "../../foundation/var";
  2 | 
  3 | .p-top {
  4 | 	margin: 0 auto 2.4rem;
  5 | 	padding: 4.8rem 0 0;
  6 | 
  7 | 	&__heading {
  8 | 		margin-bottom: 2.0rem;
  9 | 		font-size: 2.0rem;
 10 | 		font-weight: bold;
 11 | 		letter-spacing: .4em;
 12 | 		text-align: center;
 13 | 	}
 14 | 
 15 | 	&__container {
 16 | 		max-width: 600px;
 17 | 		margin: 0 auto;
 18 | 		padding: 1.8rem 2.4rem;
 19 | 		background-color: #FFF;
 20 | 		@include var.mq-max(600px) {
 21 | 			padding: 1.0rem;
 22 | 		}
 23 | 
 24 | 		&-text {
 25 | 			font-size: 1.4rem;
 26 | 			font-weight: bold;
 27 | 			line-height: 2.5;
 28 | 			letter-spacing: normal;
 29 | 			text-align: center;
 30 | 			word-break: keep-all;
 31 | 			overflow-wrap: break-word;
 32 | 			@include var.mq-max(600px) {
 33 | 				font-size: 1.4rem;
 34 | 			}
 35 | 		}
 36 | 	}
 37 | }
 38 | 
 39 | .p-service {
 40 | 	&__nav {
 41 | 		max-width: 600px;
 42 | 		margin: 0 auto 3.6rem;
 43 | 		display: flex;
 44 | 		justify-content: center;
 45 | 		align-items: center;
 46 | 		flex-wrap: wrap;
 47 | 		gap: 1.0rem 1.8rem;
 48 | 		@include var.mq-max(600px) {
 49 | 			margin: 0 auto 6.9rem;
 50 | 			gap: 1.0rem;
 51 | 		}
 52 | 
 53 | 		&-button {
 54 | 			width: calc((100% - 1.8rem * 2) / 3);
 55 | 			padding: 1.6rem 3.2rem 1.6rem 1.6rem;
 56 | 			background-color: var.$color-darkgray;
 57 | 			border-radius: 5px;
 58 | 			color: #FFF;
 59 | 			font-size: 1.0rem;
 60 | 			font-weight: bold;
 61 | 			text-align: center;
 62 | 			position: relative;
 63 | 			transition: opacity .3s ease-out;
 64 | 			&:hover {
 65 | 				opacity: .8;
 66 | 			}
 67 | 			@include var.mq-max(600px) {
 68 | 				max-width: 18.6rem;
 69 | 				width: calc((100% - 1.8rem) / 2);;
 70 | 			}
 71 | 
 72 | 			&::before {
 73 | 				content: '';
 74 | 				width: 1.2rem;
 75 | 				height: 1.2rem;
 76 | 				background-color: #FFF;
 77 | 				border-radius: 50%;
 78 | 				position: absolute;
 79 | 				top: 50%;
 80 | 				right: 6.5%;
 81 | 				transform: translateY(-50%);
 82 | 			}
 83 | 			&::after {
 84 | 				content: '';
 85 | 				width: 5px;
 86 | 				height: 5px;
 87 | 				border-top: 2px solid var.$color-darkgray;
 88 | 				border-right: 2px solid var.$color-darkgray;
 89 | 				position: absolute;
 90 | 				top: 50%;
 91 | 				right: calc(6.5% + 1px);
 92 | 				transform: translate(-50%, -50%) rotate(135deg);
 93 | 			}
 94 | 		}
 95 | 	}
 96 | 
 97 | 	&__block {
 98 | 		margin: 0 auto 9.6rem;
 99 | 		&:nth-child(4) {
100 | 			margin: 0 auto 4.8rem;
101 | 		}
102 | 
103 | 		&-headen {
104 | 			margin-bottom: 1.2rem;
105 | 			font-size: 2.0rem;
106 | 			font-weight: bold;
107 | 			letter-spacing: .4em;
108 | 			text-align: center;
109 | 			@include var.mq-max(600px) {
110 | 				letter-spacing: .3em;
111 | 			}
112 | 		}
113 | 
114 | 		&-headjp {
115 | 			margin-bottom: 3.6rem;
116 | 			font-size: 1.5rem;
117 | 			font-weight: bold;
118 | 			letter-spacing: .4em;
119 | 			text-align: center;
120 | 			@include var.mq-max(600px) {
121 | 				letter-spacing: .3em;
122 | 			}
123 | 		}
124 | 
125 | 		&-container {
126 | 			display: flex;
127 | 			justify-content: center;
128 | 			gap: 0 4.6%;
129 | 			flex-wrap: wrap;
130 | 
131 | 			&-img {
132 | 				width: calc(50% - 2.3%);
133 | 				&-inner {
134 | 					padding-top: 65.9%;
135 | 					position: relative;
136 | 
137 | 					img {
138 | 						width: 100%;
139 | 						display: block;
140 | 						position: absolute;
141 | 						top: 0;
142 | 						left: 0;
143 | 					}
144 | 				}
145 | 				@include var.mq-max(870px) {
146 | 					display: none;
147 | 				}
148 | 			}
149 | 
150 | 			&-inner {
151 | 				width: calc(50% - 2.3%);
152 | 				display: flex;
153 | 				flex-direction: column;
154 | 				gap: 1.0rem 0;
155 | 				@include var.mq-max(870px) {
156 | 					width: 100%;
157 | 					max-width: 600px;
158 | 					gap: 0;
159 | 				}
160 | 
161 | 				&-box {
162 | 					padding: 1.8rem;
163 | 					background-color: #FFF;
164 | 					&:last-child {
165 | 						flex-grow: 1;
166 | 						display: flex;
167 | 						align-items: center;
168 | 					}
169 | 					@include var.mq-max(600px) {
170 | 						padding: 1.5rem 1.0rem;
171 | 					}
172 | 
173 | 					&-text {
174 | 						font-size: 1.4rem;
175 | 						font-weight: bold;
176 | 						@include var.mq-max(600px) {
177 | 							font-size: 1.3rem;
178 | 						}
179 | 					}
180 | 
181 | 					&-img {
182 | 						width: 100%;
183 | 						display: none;
184 | 						@include var.mq-max(870px) {
185 | 							display: block;
186 | 						}
187 | 					}
188 | 
189 | 					&-list {
190 | 						padding-left: 2.5rem;
191 | 						list-style: '▶︎  ' outside;
192 | 						@include var.mq-max(870px) {
193 | 							margin: 0 auto;
194 | 						}
195 | 
196 | 						&-item {
197 | 							width: fit-content;
198 | 							margin: 2.0rem 0;
199 | 							font-size: 1.4rem;
200 | 							font-weight: bold;
201 | 							&:first-child {
202 | 								margin-top: 0;
203 | 							}
204 | 							&:last-child {
205 | 								margin-bottom: 0;
206 | 							}
207 | 							@include var.mq-max(600px) {
208 | 								font-size: 1.3rem;
209 | 							}
210 | 
211 | 							&-line {
212 | 								background: linear-gradient(transparent 70%, var.$color-yellow 0%);
213 | 							}
214 | 						}
215 | 					}
216 | 				}
217 | 			}
218 | 
219 | 			&-image {
220 | 				width: 100%;
221 | 				margin: 0 auto;
222 | 				display: block;
223 | 			}
224 | 		}
225 | 	}
226 | }
227 | 
228 | .p-news {
229 | 	&__carousel {
230 | 		display: flex;
231 | 		gap: 0 3.4rem;
232 | 		-ms-overflow-style: none;
233 | 		scrollbar-width: none;
234 | 		&::-webkit-scrollbar {
235 | 			display: none;
236 | 		}
237 | 		@include var.mq-max(600px) {
238 | 			gap: 0 2.4rem;
239 | 		}
240 | 
241 | 		&-container {
242 | 			width: 31.6%;
243 | 			min-width: 38.0rem;
244 | 			margin-bottom: .3rem;
245 | 			padding: .6rem;
246 | 			background-color: #FFF;
247 | 			box-shadow: .4rem .4rem 0 0 #E3E3E3;
248 | 			transition: opacity .3s ease-out;
249 | 			&:hover {
250 | 				opacity: .8;
251 | 			}
252 | 			@include var.mq-max(600px) {
253 | 				min-width: 26.7rem;
254 | 			}
255 | 
256 | 			&-img {
257 | 				width: 100%;
258 | 				&-inner {
259 | 					padding-top: 56.25%;
260 | 				}
261 | 			}
262 | 
263 | 			&-inner {
264 | 				padding: 1.0rem 2.0rem;
265 | 				@include var.mq-max(600px) {
266 | 					padding: 1.0rem .8rem;
267 | 				}
268 | 
269 | 				&-info {
270 | 					margin-bottom: .3rem;
271 | 					display: flex;
272 | 					align-items: center;
273 | 					gap: 0 .8rem;
274 | 
275 | 					&-date {
276 | 						font-size: .8rem;
277 | 						font-weight: bold;
278 | 					}
279 | 
280 | 					&-category {
281 | 						padding: .2rem 1.4rem;
282 | 						color: #FFF;
283 | 						font-size: .8rem;
284 | 						font-weight: bold;
285 | 					}
286 | 				}
287 | 
288 | 				&-title {
289 | 					font-size: 1.5rem;
290 | 					font-weight: bold;
291 | 					@include var.mq-max(600px) {
292 | 						font-size: 1.2rem;
293 | 					}
294 | 				}
295 | 			}
296 | 		}
297 | 	}
298 | }
299 | 
300 | .p-plan {
301 | 	&__container {
302 | 		margin-bottom: 12.4rem;
303 | 		background-color: #FFF;
304 | 		&:nth-child(5) {
305 | 			margin-bottom: 4.8rem;
306 | 		}
307 | 		&:last-child {
308 | 			margin-bottom: 0;
309 | 		}
310 | 
311 | 		&--lightpink {
312 | 			margin-top: 9.6rem;
313 | 		}
314 | 
315 | 		&-header {
316 | 			padding: 1.4rem;
317 | 			background-color: var.$color-darkgray;
318 | 			color: #FFF;
319 | 			font-size: 2.0rem;
320 | 			font-weight: bold;
321 | 			text-align: center;
322 | 			letter-spacing: normal;
323 | 			word-break: keep-all;
324 | 			overflow-wrap: break-word;
325 | 			@include var.mq-max(600px) {
326 | 				font-size: 1.6rem;
327 | 			}
328 | 		}
329 | 
330 | 		&-body {
331 | 			padding: 3.0rem 4.0rem;
332 | 			@include var.mq-max(600px) {
333 | 				padding: 3.0rem 1.0rem 1.0rem;
334 | 			}
335 | 
336 | 			&--lightpink {
337 | 				padding: 1.0rem 4.0rem 3.0rem;
338 | 				@include var.mq-max(600px) {
339 | 					padding: 1.0rem;
340 | 				}
341 | 				.p-plan__container-body-table--lg {
342 | 					@include var.mq-max(600px) {
343 | 						min-width: 72.0rem;
344 | 					}
345 | 					.p-plan__container-body-table-head:nth-child(n+2) {
346 | 						@include var.mq-max(600px) {
347 | 							width: 27%;
348 | 						}
349 | 					}
350 | 				}
351 | 			}
352 | 
353 | 			&-table {
354 | 				width: 100%;
355 | 				margin: 0 auto;
356 | 				border-collapse: separate;
357 | 				border-spacing: 1px;
358 | 
359 | 				&--lg {
360 | 					min-width: 62.0rem;
361 | 					.p-plan__container-body-table-head:nth-child(n+2) {
362 | 						width: 26%;
363 | 						@include var.mq-max(600px) {
364 | 							width: 28%;
365 | 						}
366 | 					}
367 | 				}
368 | 				&--sm {
369 | 					max-width: 60.0rem;
370 | 					@include var.mq-max(600px) {
371 | 						min-width: 50.0rem;
372 | 					}
373 | 					.p-plan__container-body-table-head:nth-child(n+2) {
374 | 						width: 36%;
375 | 						@include var.mq-max(600px) {
376 | 							width: 40%;
377 | 						}
378 | 					}
379 | 				}
380 | 				&--single {
381 | 					max-width: 60.0rem;
382 | 					.p-plan__container-body-table-head:nth-child(1) {
383 | 						width: 28%;
384 | 						@include var.mq-max(600px) {
385 | 							width: 34%;
386 | 						}
387 | 					}
388 | 				}
389 | 
390 | 				&-head {
391 | 					height: 6.0rem;
392 | 					color: #FFF;
393 | 					font-weight: bold;
394 | 					text-align: center;
395 | 					vertical-align: middle;
396 | 					word-break: keep-all;
397 | 					overflow-wrap: break-word;
398 | 
399 | 					&--green {
400 | 						background-color: var.$color-green;
401 | 						font-size: 1.5rem;
402 | 					}
403 | 					&--lightpink {
404 | 						background-color: var.$color-lightpink;
405 | 						font-size: 1.0rem;
406 | 					}
407 | 					&--gray {
408 | 						background-color: var.$color-main;
409 | 						color: var.$color-letter;
410 | 						font-size: 1.0rem;
411 | 						@include var.mq-max(600px) {
412 | 							font-size: 1.4rem;
413 | 						}
414 | 					}
415 | 					&--unico {
416 | 						padding: 2.4rem 2.0rem;
417 | 						border-radius: 4px 4px 0 0;
418 | 						img {
419 | 							width: 8.4rem;
420 | 							margin: 0 auto;
421 | 							display: block;
422 | 						}
423 | 					}
424 | 				}
425 | 
426 | 				&-value {
427 | 					border: 1px solid #707070;
428 | 					font-weight: bold;
429 | 					vertical-align: middle;
430 | 
431 | 					&--lightpink {
432 | 						background-color: var.$color-lightpink;
433 | 						border: none;
434 | 						color: #FFF;
435 | 					}
436 | 
437 | 					&-flex {
438 | 						display: flex;
439 | 						flex-direction: column;
440 | 						align-items: center;
441 | 
442 | 						&-vallg {
443 | 							font-size: 3.5rem;
444 | 							color: #D63976;
445 | 							background: linear-gradient(transparent 75%, #F48585 75%, #F48585 85%, transparent 85%, transparent 100%);
446 | 						}
447 | 						&-vallgsm {
448 | 							font-size: 1.8rem;
449 | 						}
450 | 						&-valmd {
451 | 							font-size: 2.0rem;
452 | 						}
453 | 						&-valmdsm {
454 | 							font-size: 1.0rem;
455 | 						}
456 | 						&-valsm {
457 | 							font-size: 1.5rem;
458 | 						}
459 | 					}
460 | 				}
461 | 			}
462 | 
463 | 			&-caption {
464 | 				margin-top: 1.6rem;
465 | 
466 | 				&-text {
467 | 					font-size: 1.5rem;
468 | 					font-weight: bold;
469 | 					text-align: center;
470 | 					word-break: keep-all;
471 | 					overflow-wrap: break-word;
472 | 				}
473 | 
474 | 				&-linetext {
475 | 					width: fit-content;
476 | 					margin: 1.0rem auto 0;
477 | 					padding: 0 .2rem;
478 | 					font-size: 1.5rem;
479 | 					font-weight: bold;
480 | 					text-align: center;
481 | 					&-inner {
482 | 						word-break: keep-all;
483 | 						overflow-wrap: break-word;
484 | 						background: linear-gradient(transparent 80%, var.$color-green 0%);
485 | 					}
486 | 				}
487 | 
488 | 				&-list {
489 | 					width: fit-content;
490 | 					margin: 0 auto;
491 | 
492 | 					&-item {
493 | 						font-size: 1.5rem;
494 | 						font-weight: bold;
495 | 					}
496 | 				}
497 | 			}
498 | 		}
499 | 	}
500 | }
501 | 
502 | .p-location {
503 | 	&__head {
504 | 		margin-top: 4.0rem;
505 | 		padding: 1.6rem 3.2rem 1.6rem 5.2rem;
506 | 		background-color: #FFF;
507 | 		display: flex;
508 | 		justify-content: space-between;
509 | 		align-items: center;
510 | 		@include var.mq-max(600px) {
511 | 			margin-top: 3.0rem;
512 | 			padding: 1.0rem 2.4rem 1.0rem 3.6rem;
513 | 		}
514 | 
515 | 		&-text {
516 | 			font-size: 2.0rem;
517 | 			font-weight: bold;
518 | 			position: relative;
519 | 			@include var.mq-max(600px) {
520 | 				font-size: 1.5rem;
521 | 			}
522 | 			&::before {
523 | 				content: '';
524 | 				width: 5px;
525 | 				height: 80%;
526 | 				background-color: var.$color-letter;
527 | 				position: absolute;
528 | 				top: 50%;
529 | 				left: -2.0rem;
530 | 				transform: translateY(-50%);
531 | 				@include var.mq-max(600px) {
532 | 					left: -1.45rem;
533 | 				}
534 | 			}
535 | 		}
536 | 
537 | 		&-button {
538 | 			padding: .6rem 4.0rem;
539 | 			border: 1px solid var.$color-lightpink;
540 | 			border-radius: 5vh;
541 | 			color: var.$color-lightpink;
542 | 			font-size: 2.0rem;
543 | 			font-weight: bold;
544 | 			transition: all .3s ease-out;
545 | 			&:hover {
546 | 				background-color: var.$color-lightpink;
547 | 				color: #FFF;
548 | 			}
549 | 			@include var.mq-max(600px) {
550 | 				padding: .3rem 1.6rem;
551 | 				font-size: 1.2rem;
552 | 			}
553 | 		}
554 | 	}
555 | 
556 | 	&__container {
557 | 		margin: 2.4rem auto 0;
558 | 		display: flex;
559 | 		flex-wrap: wrap;
560 | 		gap: 3.0rem 6%;
561 | 		@include var.mq-max(800px) {
562 | 			max-width: 600px;
563 | 		}
564 | 
565 | 		&-inner {
566 | 			&--map {
567 | 				width: calc(55% - 3%);
568 | 				@include var.mq-max(800px) {
569 | 					width: 100%;
570 | 				}
571 | 			}
572 | 			&--table {
573 | 				width: calc(45% - 3%);
574 | 				@include var.mq-max(800px) {
575 | 					width: 100%;
576 | 				}
577 | 			}
578 | 
579 | 			&-map {
580 | 				padding-top: 67%;
581 | 				position: relative;
582 | 
583 | 				iframe {
584 | 					width: 100%;
585 | 					height: 100%;
586 | 					position: absolute;
587 | 					top: 0;
588 | 					left: 0;
589 | 				}
590 | 			}
591 | 
592 | 			&-table {
593 | 				width: 100%;
594 | 
595 | 				&-head {
596 | 					width: 7.4rem;
597 | 					padding: .9rem;
598 | 					font-size: 1.2rem;
599 | 					font-weight: bold;
600 | 				}
601 | 
602 | 				&-data {
603 | 					padding: .9rem;
604 | 					font-size: 1.2rem;
605 | 					font-weight: bold;
606 | 					line-height: 1.6;
607 | 				}
608 | 			}
609 | 		}
610 | 	}
611 | }
612 | 
613 | .p-faq {
614 | 	padding-top: 9.6rem;
615 | 	background-color: var.$color-lightgray;
616 | 	box-shadow: 0 0 0 100vmax var.$color-lightgray;
617 | 	clip-path: inset(0 -100vmax -100vmax);
618 | 	@include var.mq-max(600px) {
619 | 		padding-top: 4.2rem;
620 | 	}
621 | 
622 | 	&__container {
623 | 		margin-bottom: 1.5rem;
624 | 		background-color: #FFF;
625 | 
626 | 		&-head {
627 | 			padding: 1.6rem 8.0rem 1.6rem 6.0rem;
628 | 			font-size: 1.5rem;
629 | 			font-weight: bold;
630 | 			list-style: none;
631 | 			position: relative;
632 | 			cursor: pointer;
633 | 			&::-webkit-details-marker {
634 | 				display: none;
635 | 			}
636 | 			@include var.mq-max(600px) {
637 | 				padding: 1.2rem 3.0rem 1.2rem 3.6rem;
638 | 			}
639 | 			&::before {
640 | 				content: 'Q.';
641 | 				font-size: 2.0rem;
642 | 				line-height: normal;
643 | 				position: absolute;
644 | 				top: 1.3rem;
645 | 				left: 2.2rem;
646 | 				@include var.mq-max(600px) {
647 | 					top: 1.0rem;
648 | 					left: .8rem;
649 | 				}
650 | 			}
651 | 
652 | 			&-plus {
653 | 				position: absolute;
654 | 				top: 50%;
655 | 				right: 3.5%;
656 | 				transition: all .3s ease-out;
657 | 
658 | 				&::before {
659 | 					content: '';
660 | 					width: 1.2rem;
661 | 					height: 2px;
662 | 					background-color: var.$color-letter;
663 | 					position: absolute;
664 | 					transform: translateX(-50%);
665 | 				}
666 | 				&::after {
667 | 					content: '';
668 | 					width: 1.2rem;
669 | 					height: 2px;
670 | 					background-color: var.$color-letter;
671 | 					position: absolute;
672 | 					transform: translateX(-50%) rotate(90deg);
673 | 				}
674 | 			}
675 | 
676 | 			&.is-active {
677 | 				.p-faq__container-head-plus {
678 | 					transform: rotate(-180deg);
679 | 					&::after {
680 | 						content: none;
681 | 					}
682 | 				}
683 | 			}
684 | 		}
685 | 
686 | 		&-body {
687 | 			padding: 0 8.0rem 1.6rem 6.0rem;
688 | 			color: var.$color-pink;
689 | 			font-size: 1.5rem;
690 | 			font-weight: bold;
691 | 			position: relative;
692 | 			@include var.mq-max(600px) {
693 | 				padding: 0 3.0rem 1.2rem 3.6rem;
694 | 			}
695 | 
696 | 			&::before {
697 | 				content: 'A.';
698 | 				font-size: 2.0rem;
699 | 				line-height: normal;
700 | 				position: absolute;
701 | 				top: 0;
702 | 				left: 2.2rem;
703 | 				@include var.mq-max(600px) {
704 | 					left: .8rem;
705 | 				}
706 | 			}
707 | 		}
708 | 	}
709 | }
710 | 


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="ja">
  3 | <head prefix="og: http://ogp.me/ns#">
  4 | 	<?php get_header(); ?>
  5 | </head>
  6 | <body>
  7 | <header>
  8 | 	<?php get_template_part('inc/header'); ?>
  9 | </header>
 10 | 
 11 | <section class="l-top l-top--top">
 12 | 	<h1 style="visibility: hidden; position: absolute; top: 0; left: 50%; z-index: -10;">Unico</h1>
 13 | 	<div class="l-top__view">
 14 | 		<div class="l-top__view-img">
 15 | 			<div class="l-top__view-img-inner" style="background: url(<?php echo esc_url(get_template_directory_uri()); ?>/img/top.jpg) no-repeat center/cover"></div>
 16 | 		</div>
 17 | 		<?php $banner_query = new WP_Query(array(
 18 | 			'post_type' => 'blog',
 19 | 			'posts_per_page' => 1,
 20 | 			'post_status' => 'publish',
 21 | 			'post__in' => get_option('sticky_posts')
 22 | 		));
 23 | 		$sticky_posts = get_option('sticky_posts');
 24 | 		while($banner_query->have_posts()): $banner_query->the_post(); ?>
 25 | 		<div class="l-top__view-banner">
 26 | 			<a href="<?php the_permalink(); ?>" class="l-top__view-banner-link">
 27 | 				<span class="l-top__view-banner-link-span"><?php the_title(); ?></span>
 28 | 				<span class="l-top__view-banner-link-span l-top__view-banner-link-span--detail">詳しくはこちら<img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/icon/pointer.svg" class="l-top__view-banner-link-span-img"></span>
 29 | 			</a>
 30 | 		</div>
 31 | 		<?php endwhile;
 32 | 		wp_reset_postdata(); ?>
 33 | 		<div class="l-top__view-message">
 34 | 			<span class="l-top__view-message-text l-top__view-message-text--lg">月額<span>38,500</span>円〜 <br>通い放題のパーソナルジム</span>
 35 | 			<span class="l-top__view-message-text l-top__view-message-text--gray">Achieve your ideal body</span>
 36 | 			<span class="l-top__view-message-ribbon"><spam class="l-top__view-message-ribbon-inner">女性トレーナー在籍しています！</spam></span>
 37 | 		</div>
 38 | 		<div class="l-top__view-button">
 39 | 			<a href="<?php echo esc_url(get_the_permalink(7)); ?>" class="l-top__view-button-inner">無料体験トレーニング<br>お申し込みはこちらから</a>
 40 | 		</div>
 41 | 	</div>
 42 | 	<div class="l-top__scroll"><span class="l-top__scroll-inner">SCROLL</span></div>
 43 | </section>
 44 | 
 45 | <main class="l-main">
 46 | <section id="service" class="l-main__section l-main__section--top p-top">
 47 | 	<h2 class="p-top__heading">OUR SERVICE</h2>
 48 | 	<div class="p-top__container">
 49 | 		<p class="p-top__container-text">日々の疲れやストレスに負けない、<wbr>しなやかで健やかな身体へ。<br>専門的なケアとあなたに寄り添うサポートで、<wbr>心と体のバランスを整え、自分らしく輝ける毎日を。<br>唯一無二のあなたの体を、もっと好きになるために。<br>Unicoが、あなたの健康と美しさを支えます。</p>
 50 | 	</div>
 51 | </section>
 52 | 
 53 | <section class="l-main__section l-main__section--top p-service">
 54 | 	<div class="p-service__nav">
 55 | 		<button id="navTraining" class="p-service__nav-button">パーソナルトレーニング</button>
 56 | 		<button id="navConditioning" class="p-service__nav-button">コンディショニング</button>
 57 | 		<button id="navCapsule" class="p-service__nav-button">酸素・水素カプセル</button>
 58 | 	</div>
 59 | 	<div class="p-service__block">
 60 | 		<h2 id="training" class="p-service__block-headen">PERSONAL TRAINING</h2>
 61 | 		<p class="p-service__block-headjp">パーソナルトレーニング</p>
 62 | 		<div class="p-service__block-container">
 63 | 			<div class="p-service__block-container-img">
 64 | 				<div class="p-service__block-container-img-inner">
 65 | 					<img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/personal-training.jpg" alt="Personal Training">
 66 | 				</div>
 67 | 			</div>
 68 | 			<div class="p-service__block-container-inner">
 69 | 				<div class="p-service__block-container-inner-box">
 70 | 					<p class="p-service__block-container-inner-box-text">定額制の30分パーソナルトレーニングは、短時間で効率的に、60分のパーソナルトレーニングは肉体に更なる負荷をかけて運動できるサービスです。プロの指導で理想の体づくりをサポートします。</p>
 71 | 				</div>
 72 | 				<img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/personal-training.jpg" alt="Personal Training" class="p-service__block-container-inner-box-img">
 73 | 				<div class="p-service__block-container-inner-box">
 74 | 					<ul class="p-service__block-container-inner-box-list">
 75 | 						<li class="p-service__block-container-inner-box-list-item"><span class="p-service__block-container-inner-box-list-item-line">パーソナルトレーニングが1ヵ月通い放題</span></li>
 76 | 						<li class="p-service__block-container-inner-box-list-item"><span class="p-service__block-container-inner-box-list-item-line">1回30分だからこそ、運動・筋トレ初心者でも通いやすさ&#9678;</span></li>
 77 | 						<li class="p-service__block-container-inner-box-list-item"><span class="p-service__block-container-inner-box-list-item-line">経験者向けの1回1時間のトレーニングで、さらなる筋力アップ</span></li>
 78 | 					</ul>
 79 | 				</div>
 80 | 			</div>
 81 | 		</div>
 82 | 	</div>
 83 | 
 84 | 	<div class="p-service__block">
 85 | 		<h2 id="conditioning" class="p-service__block-headen">CONDITIONING</h2>
 86 | 		<p class="p-service__block-headjp">コンディショニング</p>
 87 | 		<div class="p-service__block-container">
 88 | 			<div class="p-service__block-container-img">
 89 | 				<div class="p-service__block-container-img-inner">
 90 | 					<img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/conditioning.jpg" alt="Conditioning">
 91 | 				</div>
 92 | 			</div>
 93 | 			<div class="p-service__block-container-inner">
 94 | 				<div class="p-service__block-container-inner-box">
 95 | 					<p class="p-service__block-container-inner-box-text">30分コンディショニングは、短時間で体の調子を整えるプログラムです。プロによるストレッチや軽運動を通じて柔軟性や姿勢を改善し、日常の疲れや不調をケアします。</p>
 96 | 				</div>
 97 | 				<img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/conditioning.jpg" alt="Conditioning" class="p-service__block-container-inner-box-img">
 98 | 				<div class="p-service__block-container-inner-box">
 99 | 					<ul class="p-service__block-container-inner-box-list">
100 | 						<li class="p-service__block-container-inner-box-list-item"><span class="p-service__block-container-inner-box-list-item-line">ケガの予防と身体機能の向上</span></li>
101 | 						<li class="p-service__block-container-inner-box-list-item"><span class="p-service__block-container-inner-box-list-item-line">疲労回復とパフォーマンス向上</span></li>
102 | 						<li class="p-service__block-container-inner-box-list-item"><span class="p-service__block-container-inner-box-list-item-line">姿勢改善と体の歪みの修正</span></li>
103 | 					</ul>
104 | 				</div>
105 | 			</div>
106 | 		</div>
107 | 	</div>
108 | 
109 | 	<div class="p-service__block">
110 | 		<h2 id="capsule" class="p-service__block-headen">Hydrogen / Oxygen Capsules</h2>
111 | 		<p class="p-service__block-headjp">酸素・水素カプセル</p>
112 | 		<div class="p-service__block-container">
113 | 			<picture>
114 | 				<source srcset="<?php echo esc_url(get_template_directory_uri()); ?>/img/capsules_sp.jpg" media="(max-width: 600px)">
115 | 				<img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/capsules.jpg" alt="Hydrogen / Oxygen Capsules" class="p-service__block-container-image">
116 | 			</picture>
117 | 		</div>
118 | 	</div>
119 | 
120 | 	<div class="c-contact">
121 | 		<p class="c-contact__header">お気軽にご連絡ください！</p>
122 | 		<button class="c-contact__button"><a href="<?php echo esc_url(get_the_permalink(7)); ?>" class="c-contact__button-inner"><img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/icon/mail.svg" class="c-contact__button-inner-icon"><span class="c-contact__button-inner-text">体験申し込み<br><span class="c-contact__button-inner-text-line">お問い合わせはコチラ</span></span></a></button>
123 | 	</div>
124 | </section>
125 | 
126 | <section id="news" class="l-main__section l-main__section--top p-news">
127 | 	<h2 class="c-header">NEWS<span class="c-header__jp">ニュース</span></h2>
128 | 	<div class="p-news__carousel js-scrollable">
129 | 		<?php
130 | 		$news_query = new WP_Query(array(
131 | 			'post_type' => 'news',
132 | 			'posts_per_page' => 5,
133 | 			'post_status' => 'publish'
134 | 		));
135 | 		if ($news_query -> have_posts()) {
136 | 			while ($news_query -> have_posts()) {
137 | 				$news_query -> the_post();
138 | 				$img = wp_get_attachment_image_src(get_post_thumbnail_id());
139 | 				$category = get_the_terms(get_the_ID(), 'news_category');
140 | 				$category_color = get_field('category_color', 'news_category_'.$category[0]->term_id);
141 | 		?>
142 | 		<div class="p-news__carousel-container">
143 | 			<a href="<?php the_permalink(); ?>">
144 | 				<div class="p-news__carousel-container-img"><div class="p-news__carousel-container-img-inner" style="background: url(<?php echo esc_html($img[0]); ?>) no-repeat center/cover"></div></div>
145 | 				<div class="p-news__carousel-container-inner">
146 | 					<p class="p-news__carousel-container-inner-info">
147 | 						<time datetime="<?php echo esc_html(get_the_date('Y-m-d')); ?>" class="p-news__carousel-container-inner-info-date"><?php echo esc_html(get_the_date('Y.m.d')); ?></time>
148 | 						<?php if (!empty($category)) { ?>
149 | 						<span class="p-news__carousel-container-inner-info-category" style="background-color: <?php echo esc_attr($category_color); ?>"><?php echo esc_html($category[0] -> name); ?></span>
150 | 						<?php } ?>
151 | 					</p>
152 | 					<p class="p-news__carousel-container-inner-title"><?php the_title(); ?></p>
153 | 				</div>
154 | 			</a>
155 | 		</div>
156 | 		<?php
157 | 			}
158 | 			wp_reset_postdata();
159 | 		}
160 | 		?>
161 | 	</div>
162 | </section>
163 | 
164 | <section id="plan" class="l-main__section l-main__section--top p-plan">
165 | 	<h2 class="c-header">PLAN<span class="c-header__jp">料金プラン</span></h2>
166 | 	<div class="p-plan__container">
167 | 		<p class="p-plan__container-header">30分パーソナルトレーニング<wbr>通い放題</p>
168 | 		<div class="p-plan__container-body">
169 | 			<div class="js-scrollable">
170 | 				<table class="p-plan__container-body-table p-plan__container-body-table--lg">
171 | 					<thead>
172 | 						<tr>
173 | 							<th></th>
174 | 							<th class="p-plan__container-body-table-head p-plan__container-body-table-head--green">1ヶ月プラン</th>
175 | 							<th class="p-plan__container-body-table-head p-plan__container-body-table-head--green">6ヶ月プラン</th>
176 | 							<th class="p-plan__container-body-table-head p-plan__container-body-table-head--green">12ヶ月プラン</th>
177 | 						</tr>
178 | 					</thead>
179 | 					<tbody>
180 | 						<tr>
181 | 							<th class="p-plan__container-body-table-head p-plan__container-body-table-head--green">入会金</th>
182 | 							<td class="p-plan__container-body-table-value">
183 | 								<div class="p-plan__container-body-table-value-flex">
184 | 									<p class="p-plan__container-body-table-value-flex-valmd">33,000<span class="p-plan__container-body-table-value-flex-valmdsm">円（税込）</span></p>
185 | 								</div>
186 | 							</td>
187 | 							<td class="p-plan__container-body-table-value">
188 | 								<div class="p-plan__container-body-table-value-flex">
189 | 									<p class="p-plan__container-body-table-value-flex-valmd">16,500<span class="p-plan__container-body-table-value-flex-valmdsm">円（税込）</span></p>
190 | 								</div>
191 | 							</td>
192 | 							<td class="p-plan__container-body-table-value">
193 | 								<div class="p-plan__container-body-table-value-flex">
194 | 									<p class="p-plan__container-body-table-value-flex-vallg">0<span class="p-plan__container-body-table-value-flex-vallgsm">円</span></p>
195 | 								</div>
196 | 							</td>
197 | 						</tr>
198 | 						<tr>
199 | 							<th class="p-plan__container-body-table-head p-plan__container-body-table-head--green">月会費</th>
200 | 							<td class="p-plan__container-body-table-value">
201 | 								<div class="p-plan__container-body-table-value-flex">
202 | 									<p class="p-plan__container-body-table-value-flex-valmd">38,500<span class="p-plan__container-body-table-value-flex-valmdsm">円（税込）</span></p>
203 | 								</div>
204 | 							</td>
205 | 							<td class="p-plan__container-body-table-value">
206 | 								<div class="p-plan__container-body-table-value-flex">
207 | 									<p class="p-plan__container-body-table-value-flex-valmd">36,575<span class="p-plan__container-body-table-value-flex-valmdsm">円（税込）</span></p>
208 | 								</div>
209 | 							</td>
210 | 							<td class="p-plan__container-body-table-value">
211 | 								<div class="p-plan__container-body-table-value-flex">
212 | 									<p class="p-plan__container-body-table-value-flex-valmd">34,650<span class="p-plan__container-body-table-value-flex-valmdsm">円（税込）</span></p>
213 | 								</div>
214 | 							</td>
215 | 						</tr>
216 | 					</tbody>
217 | 				</table>
218 | 			</div>
219 | 			<div class="p-plan__container-body-caption">
220 | 				<p class="p-plan__container-body-caption-linetext">
221 | 					<span class="p-plan__container-body-caption-linetext-inner">追加2万円（税込）で酸素・水素カプセル<wbr>25分入り放題プランあり！</span>
222 | 				</p>
223 | 			</div>
224 | 		</div>
225 | 	</div>
226 | 	<div class="p-plan__container">
227 | 		<p class="p-plan__container-header">60分パーソナルトレーニング通い放題</p>
228 | 		<div class="p-plan__container-body">
229 | 			<div class="js-scrollable">
230 | 				<table class="p-plan__container-body-table p-plan__container-body-table--lg">
231 | 					<thead>
232 | 						<tr>
233 | 							<th></th>
234 | 							<th class="p-plan__container-body-table-head p-plan__container-body-table-head--green">1ヶ月プラン</th>
235 | 							<th class="p-plan__container-body-table-head p-plan__container-body-table-head--green">3ヶ月プラン</th>
236 | 							<th class="p-plan__container-body-table-head p-plan__container-body-table-head--green">6ヶ月プラン</th>
237 | 						</tr>
238 | 					</thead>
239 | 					<tbody>
240 | 						<tr>
241 | 							<th class="p-plan__container-body-table-head p-plan__container-body-table-head--green">入会金</th>
242 | 							<td class="p-plan__container-body-table-value">
243 | 								<div class="p-plan__container-body-table-value-flex">
244 | 									<p class="p-plan__container-body-table-value-flex-valmd">33,000<span class="p-plan__container-body-table-value-flex-valmdsm">円（税込）</span></p>
245 | 								</div>
246 | 							</td>
247 | 							<td class="p-plan__container-body-table-value">
248 | 								<div class="p-plan__container-body-table-value-flex">
249 | 									<p class="p-plan__container-body-table-value-flex-valmd">16,500<span class="p-plan__container-body-table-value-flex-valmdsm">円（税込）</span></p>
250 | 								</div>
251 | 							</td>
252 | 							<td class="p-plan__container-body-table-value">
253 | 								<div class="p-plan__container-body-table-value-flex">
254 | 									<p class="p-plan__container-body-table-value-flex-vallg">0<span class="p-plan__container-body-table-value-flex-vallgsm">円</span></p>
255 | 								</div>
256 | 							</td>
257 | 						</tr>
258 | 						<tr>
259 | 							<th class="p-plan__container-body-table-head p-plan__container-body-table-head--green">月会費</th>
260 | 							<td class="p-plan__container-body-table-value">
261 | 								<div class="p-plan__container-body-table-value-flex">
262 | 									<p class="p-plan__container-body-table-value-flex-valmd">55,000<span class="p-plan__container-body-table-value-flex-valmdsm">円（税込）</span></p>
263 | 								</div>
264 | 							</td>
265 | 							<td class="p-plan__container-body-table-value">
266 | 								<div class="p-plan__container-body-table-value-flex">
267 | 									<p class="p-plan__container-body-table-value-flex-valmd">53,625<span class="p-plan__container-body-table-value-flex-valmdsm">円（税込）</span></p>
268 | 								</div>
269 | 							</td>
270 | 							<td class="p-plan__container-body-table-value">
271 | 								<div class="p-plan__container-body-table-value-flex">
272 | 									<p class="p-plan__container-body-table-value-flex-valmd">52,250<span class="p-plan__container-body-table-value-flex-valmdsm">円（税込）</span></p>
273 | 								</div>
274 | 							</td>
275 | 						</tr>
276 | 					</tbody>
277 | 				</table>
278 | 			</div>
279 | 			<div class="p-plan__container-body-caption">
280 | 				<p class="p-plan__container-body-caption-linetext">
281 | 					<span class="p-plan__container-body-caption-linetext-inner">追加2万円（税込）で酸素・水素カプセル<wbr>25分入り放題プランあり！</span>
282 | 				</p>
283 | 				<!-- <ul class="p-plan__container-body-caption-list">
284 | 					<li class="p-plan__container-body-caption-list-item">・3ヶ月間の契約となります</li>
285 | 					<li class="p-plan__container-body-caption-list-item">・酸素・水素カプセル3回分をプレゼント（1回25分）</li>
286 | 				</ul> -->
287 | 			</div>
288 | 		</div>
289 | 	</div>
290 | 	<div class="p-plan__container">
291 | 		<p class="p-plan__container-header">チケットコース（ビジタープラン）</p>
292 | 		<div class="p-plan__container-body">
293 | 			<table class="p-plan__container-body-table p-plan__container-body-table--single">
294 | 				<tbody>
295 | 					<tr>
296 | 						<th class="p-plan__container-body-table-head p-plan__container-body-table-head--green">1時間<wbr>パーソナル</th>
297 | 						<td class="p-plan__container-body-table-value">
298 | 							<div class="p-plan__container-body-table-value-flex">
299 | 								<p class="p-plan__container-body-table-value-flex-valmd">6,600<span class="p-plan__container-body-table-value-flex-valmdsm">円（税込）/ 回</span></p>
300 | 							</div>
301 | 						</td>
302 | 					</tr>
303 | 					<tr>
304 | 						<th class="p-plan__container-body-table-head p-plan__container-body-table-head--green">30分<wbr>パーソナル<br>ストレッチ</th>
305 | 						<td class="p-plan__container-body-table-value">
306 | 							<div class="p-plan__container-body-table-value-flex">
307 | 								<p class="p-plan__container-body-table-value-flex-valmd">3,300<span class="p-plan__container-body-table-value-flex-valmdsm">円（税込）/ 回</span></p>
308 | 							</div>
309 | 						</td>
310 | 					</tr>
311 | 				</tbody>
312 | 			</table>
313 | 		</div>
314 | 	</div>
315 | 	<div class="p-plan__container">
316 | 		<p class="p-plan__container-header">酸素・水素カプセル料金</p>
317 | 		<div class="p-plan__container-body">
318 | 			<div class="js-scrollable">
319 | 				<table class="p-plan__container-body-table p-plan__container-body-table--sm">
320 | 					<thead>
321 | 						<tr>
322 | 							<th></th>
323 | 							<th class="p-plan__container-body-table-head p-plan__container-body-table-head--green">パーソナルジム会員様</th>
324 | 							<th class="p-plan__container-body-table-head p-plan__container-body-table-head--green">ビジター様</th>
325 | 						</tr>
326 | 					</thead>
327 | 					<tbody>
328 | 						<tr>
329 | 							<th class="p-plan__container-body-table-head p-plan__container-body-table-head--green">25分</th>
330 | 							<td class="p-plan__container-body-table-value">
331 | 								<div class="p-plan__container-body-table-value-flex">
332 | 									<p class="p-plan__container-body-table-value-flex-valmd">2,000<span class="p-plan__container-body-table-value-flex-valmdsm">円（税込2,200円）</span></p>
333 | 								</div>
334 | 							</td>
335 | 							<td class="p-plan__container-body-table-value">
336 | 								<div class="p-plan__container-body-table-value-flex">
337 | 									<p class="p-plan__container-body-table-value-flex-valmd">3,000<span class="p-plan__container-body-table-value-flex-valmdsm">円（税込3,300円）</span></p>
338 | 								</div>
339 | 							</td>
340 | 						</tr>
341 | 						<tr>
342 | 							<th class="p-plan__container-body-table-head p-plan__container-body-table-head--green">50分</th>
343 | 							<td class="p-plan__container-body-table-value">
344 | 								<div class="p-plan__container-body-table-value-flex">
345 | 									<p class="p-plan__container-body-table-value-flex-valmd">4,000<span class="p-plan__container-body-table-value-flex-valmdsm">円（税込4,400円）</span></p>
346 | 								</div>
347 | 							</td>
348 | 							<td class="p-plan__container-body-table-value">
349 | 								<div class="p-plan__container-body-table-value-flex">
350 | 									<p class="p-plan__container-body-table-value-flex-valmd">5,000<span class="p-plan__container-body-table-value-flex-valmdsm">円（税込5,500円）</span></p>
351 | 								</div>
352 | 							</td>
353 | 						</tr>
354 | 					</tbody>
355 | 				</table>
356 | 			</div>
357 | 			<div class="p-plan__container-body-caption">
358 | 				<p class="p-plan__container-body-caption-text">&#8251;お得な回数券もございますので、<wbr>お問い合わせください！</p>
359 | 			</div>
360 | 		</div>
361 | 	</div>
362 | 	<div class="c-contact">
363 | 		<p class="c-contact__header">お気軽にご連絡ください！</p>
364 | 		<button class="c-contact__button"><a href="<?php echo esc_url(get_the_permalink(7)); ?>" class="c-contact__button-inner"><img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/icon/mail.svg" class="c-contact__button-inner-icon"><span class="c-contact__button-inner-text">体験申し込み<br><span class="c-contact__button-inner-text-line">お問い合わせはコチラ</span></span></a></button>
365 | 	</div>
366 | 	<div class="p-plan__container p-plan__container--lightpink">
367 | 		<p class="p-plan__container-header">他社比較</p>
368 | 		<div class="p-plan__container-body p-plan__container-body--lightpink">
369 | 			<div class="js-scrollable">
370 | 				<table class="p-plan__container-body-table p-plan__container-body-table--lg">
371 | 					<thead>
372 | 						<tr>
373 | 							<th></th>
374 | 							<th rowspan="2" class="p-plan__container-body-table-head p-plan__container-body-table-head--lightpink p-plan__container-body-table-head--unico"><img src="<?php echo esc_url(get_template_directory_uri()); ?>/img/logo.svg"></th>
375 | 							<th>&nbsp;</th>
376 | 							<th>&nbsp;</th>
377 | 						</tr>
378 | 						<tr>
379 | 							<th></th>
380 | 							<th class="p-plan__container-body-table-head p-plan__container-body-table-head--gray">Bジム</th>
381 | 							<th class="p-plan__container-body-table-head p-plan__container-body-table-head--gray">Cジム</th>
382 | 						</tr>
383 | 					</thead>
384 | 					<tbody>
385 | 						<tr>
386 | 							<th class="p-plan__container-body-table-head p-plan__container-body-table-head--gray">サービス</th>
387 | 							<td class="p-plan__container-body-table-value p-plan__container-body-table-value--lightpink">
388 | 								<div class="p-plan__container-body-table-value-flex">
389 | 									<span class="p-plan__container-body-table-value-flex-valsm">パーソナルトレーニング</span>
390 | 									<span class="p-plan__container-body-table-value-flex-valmdsm">＋</span>
391 | 									<span class="p-plan__container-body-table-value-flex-valsm">酸素・水素浴</span>
392 | 								</div>
393 | 							</td>
394 | 							<td class="p-plan__container-body-table-value">
395 | 								<div class="p-plan__container-body-table-value-flex">
396 | 									<span class="p-plan__container-body-table-value-flex-valmdsm">パーソナルトレーニング</span>
397 | 								</div>
398 | 							</td>
399 | 							<td class="p-plan__container-body-table-value">
400 | 								<div class="p-plan__container-body-table-value-flex">
401 | 									<span class="p-plan__container-body-table-value-flex-valmdsm">パーソナルトレーニング</span>
402 | 								</div>
403 | 							</td>
404 | 						</tr>
405 | 						<tr>
406 | 							<th class="p-plan__container-body-table-head p-plan__container-body-table-head--gray">月会費</th>
407 | 							<td class="p-plan__container-body-table-value p-plan__container-body-table-value--lightpink">
408 | 								<div class="p-plan__container-body-table-value-flex">
409 | 									<p class="p-plan__container-body-table-value-flex-valmd">38,500<span class="p-plan__container-body-table-value-flex-valmdsm">円（税込）</span></p>
410 | 								</div>
411 | 							</td>
412 | 							<td class="p-plan__container-body-table-value">
413 | 								<div class="p-plan__container-body-table-value-flex">
414 | 									<p class="p-plan__container-body-table-value-flex-valmd">100,320<span class="p-plan__container-body-table-value-flex-valmdsm">円（税込）</span></p>
415 | 								</div>
416 | 							</td>
417 | 							<td class="p-plan__container-body-table-value">
418 | 								<div class="p-plan__container-body-table-value-flex">
419 | 									<p class="p-plan__container-body-table-value-flex-valmd">120,000<span class="p-plan__container-body-table-value-flex-valmdsm">円（税込）</span></p>
420 | 								</div>
421 | 							</td>
422 | 						</tr>
423 | 						<tr>
424 | 							<th class="p-plan__container-body-table-head p-plan__container-body-table-head--gray">回数</th>
425 | 							<td class="p-plan__container-body-table-value p-plan__container-body-table-value--lightpink">
426 | 								<div class="p-plan__container-body-table-value-flex">
427 | 									<p class="p-plan__container-body-table-value-flex-valmd">通い放題</p>
428 | 								</div>
429 | 							</td>
430 | 							<td class="p-plan__container-body-table-value">
431 | 								<div class="p-plan__container-body-table-value-flex">
432 | 									<p class="p-plan__container-body-table-value-flex-valmd">12<span class="p-plan__container-body-table-value-flex-valsm">回</span></p>
433 | 								</div>
434 | 							</td>
435 | 							<td class="p-plan__container-body-table-value">
436 | 								<div class="p-plan__container-body-table-value-flex">
437 | 									<p class="p-plan__container-body-table-value-flex-valmd">8<span class="p-plan__container-body-table-value-flex-valsm">回</span></p>
438 | 								</div>
439 | 							</td>
440 | 						</tr>
441 | 						<tr>
442 | 							<th class="p-plan__container-body-table-head p-plan__container-body-table-head--gray">1回あたりの金額</th>
443 | 							<td class="p-plan__container-body-table-value p-plan__container-body-table-value--lightpink">
444 | 								<div class="p-plan__container-body-table-value-flex">
445 | 									<p class="p-plan__container-body-table-value-flex-valmd">3,208<span class="p-plan__container-body-table-value-flex-valmdsm">円/回</span></p>
446 | 									<span class="p-plan__container-body-table-value-flex-valmdsm">※月12回利用した場合</span>
447 | 								</div>
448 | 							</td>
449 | 							<td class="p-plan__container-body-table-value">
450 | 								<div class="p-plan__container-body-table-value-flex">
451 | 									<p class="p-plan__container-body-table-value-flex-valmd">7,600<span class="p-plan__container-body-table-value-flex-valmdsm">円（税込）</span></p>
452 | 								</div>
453 | 							</td>
454 | 							<td class="p-plan__container-body-table-value">
455 | 								<div class="p-plan__container-body-table-value-flex">
456 | 									<p class="p-plan__container-body-table-value-flex-valmd">15,000<span class="p-plan__container-body-table-value-flex-valmdsm">円（税込）</span></p>
457 | 								</div>
458 | 							</td>
459 | 						</tr>
460 | 					</tbody>
461 | 				</table>
462 | 			</div>
463 | 		</div>
464 | 	</div>
465 | </section>
466 | 
467 | <section id="location" class="l-main__section l-main__section--top p-location">
468 | 	<h2 class="c-header">LOCATION<span class="c-header__jp">店舗一覧</span></h2>
469 | 	<div class="p-location__head">
470 | 		<p class="p-location__head-text">UNICO 橿原神宮前店</p>
471 | 		<button class="p-location__head-button js-location">店舗詳細</button>
472 | 	</div>
473 | 	<div class="p-location__container">
474 | 		<div class="p-location__container-inner p-location__container-inner--map">
475 | 			<div class="p-location__container-inner-map">
476 | 				<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2680.479327747533!2d135.79439306576975!3d34.48662146525802!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6006ccda3572c07b%3A0x173f1820533f701!2z5pel5pys44CB44CSNjM0LTAwNjMg5aWI6Imv55yM5qm_5Y6f5biC5LmF57Gz55S677yX77yQ77yYIOOCs-ODrOODhOOCo-OCquODvOODjQ!5e0!3m2!1sja!2ssg!4v1739104647929!5m2!1sja!2ssg" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
477 | 			</div>
478 | 		</div>
479 | 		<div class="p-location__container-inner p-location__container-inner--table">
480 | 			<table class="p-location__container-inner-table">
481 | 				<tr>
482 | 					<th class="p-location__container-inner-table-head">店舗名</th>
483 | 					<td class="p-location__container-inner-table-data">UNICO 橿原神宮前店</td>
484 | 				</tr>
485 | 				<tr>
486 | 					<th class="p-location__container-inner-table-head">住所</th>
487 | 					<td class="p-location__container-inner-table-data">&#12306;634-0063　奈良県橿原市久米町708<br>コレツィオーネ1F北</td>
488 | 				</tr>
489 | 				<tr>
490 | 					<th class="p-location__container-inner-table-head">アクセス</th>
491 | 					<td class="p-location__container-inner-table-data">橿原神宮前駅　徒歩5分<br>駐車場/駐輪場あり</td>
492 | 				</tr>
493 | 				<tr>
494 | 					<th class="p-location__container-inner-table-head">営業時間</th>
495 | 					<td class="p-location__container-inner-table-data">平日　　１０：００〜２１：３０<br>土日祝　９：３０〜１９：３０<br>&#8251;水曜日のみ酸素・水素浴専用営業<br>&#8251;営業時間は、今後変更となる可能性もございます</td>
496 | 				</tr>
497 | 			</table>
498 | 		</div>
499 | 	</div>
500 | 	<div class="p-location__head">
501 | 		<p class="p-location__head-text">UNICO JR奈良店</p>
502 | 		<button class="p-location__head-button js-location">店舗詳細</button>
503 | 	</div>
504 | 	<div class="p-location__container">
505 | 		<div class="p-location__container-inner p-location__container-inner--map">
506 | 			<div class="p-location__container-inner-map">
507 | 				<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2336.1517524167234!2d135.8205321331221!3d34.680020323767906!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x60013bb2c6f0957f%3A0xd15da457d7733e15!2z576O5bm444K344OG44Kj44Oe44Oz44K344On44Oz77yS!5e0!3m2!1sen!2ssg!4v1741492045451!5m2!1sen!2ssg" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
508 | 			</div>
509 | 		</div>
510 | 		<div class="p-location__container-inner p-location__container-inner--table">
511 | 			<table class="p-location__container-inner-table">
512 | 				<tr>
513 | 					<th class="p-location__container-inner-table-head">店舗名</th>
514 | 					<td class="p-location__container-inner-table-data">UNICO JR奈良店</td>
515 | 				</tr>
516 | 				<tr>
517 | 					<th class="p-location__container-inner-table-head">住所</th>
518 | 					<td class="p-location__container-inner-table-data">&#12306;630-8244　奈良県奈良市三条町606-99<br>ミユキシティーマンション102</td>
519 | 				</tr>
520 | 				<tr>
521 | 					<th class="p-location__container-inner-table-head">アクセス</th>
522 | 					<td class="p-location__container-inner-table-data">JR奈良駅　徒歩4分<br>駐車場/駐輪場あり</td>
523 | 				</tr>
524 | 				<tr>
525 | 					<th class="p-location__container-inner-table-head">営業時間</th>
526 | 					<td class="p-location__container-inner-table-data">平日　　１０：００〜２１：３０<br>土日祝　９：３０〜１９：３０<br>&#8251;水曜日のみ酸素・水素浴専用営業<br>&#8251;営業時間は、今後変更となる可能性もございます</td>
527 | 				</tr>
528 | 			</table>
529 | 		</div>
530 | 	</div>
531 | </section>
532 | 
533 | <section id="faq" class="l-main__section l-main__section--top p-faq">
534 | 	<h2 class="c-header">FAQ<span class="c-header__jp">よくある質問</span></h2>
535 | 	<details class="p-faq__container js-details">
536 | 		<summary class="p-faq__container-head js-details-summary">パーソナルジムは何をするの？<span class="p-faq__container-head-plus"></span></summary>
537 | 		<div class="p-faq__container-body js-details-content">
538 | 			<p class="p-faq__container-body-text">あなたの目標や体力レベルに合わせてプロのトレーナーが最適なメニューを作成し、正しいフォームを指導、そして定期的なセッションによってモチベーションを保ちながら、プロのトレーナーとお客様の二人三脚で効率的に理想のカラダを目指します。</p>
539 | 		</div>
540 | 	</details>
541 | 	<details class="p-faq__container js-details">
542 | 		<summary class="p-faq__container-head js-details-summary">マッチョではなく、綺麗なスラっとしたカラダになりたいのですが大丈夫？<span class="p-faq__container-head-plus"></span></summary>
543 | 		<div class="p-faq__container-body js-details-content">
544 | 			<p class="p-faq__container-body-text">なれます。筋骨隆々なマッチョになる方法から、どうしたらそうならないかを熟知しております。トレーニングでインナーマッスルを中心に鍛えることで姿勢改善・代謝アップをしながら、適切な食事と有酸素運動、そして世界初の酸素水素浴により、最短ルートで理想の体へと導きます。</p>
545 | 		</div>
546 | 	</details>
547 | 	<details class="p-faq__container js-details">
548 | 		<summary class="p-faq__container-head js-details-summary">トレーニングをしたことないけど大丈夫？<span class="p-faq__container-head-plus"></span></summary>
549 | 		<div class="p-faq__container-body js-details-content">
550 | 			<p class="p-faq__container-body-text">全く心配ございません！通われるお客様のほとんどが運動経験の無い方です。むしろUnicoでは、初心者こそパーソナルトレーニングを受けるべきだと考えております。やみくもにトレーニングを行うことは、ダイエットの観点からも、ケガのリスクの観点からも、非常に効率が悪いからです。</p>
551 | 		</div>
552 | 	</details>
553 | 	<details class="p-faq__container js-details">
554 | 		<summary class="p-faq__container-head js-details-summary">効果はどれくらいで出るの？<span class="p-faq__container-head-plus"></span></summary>
555 | 		<div class="p-faq__container-body js-details-content">
556 | 			<p class="p-faq__container-body-text">だいたい1ヶ月で体重自体は落ちます。しかし、無理な食事制限などで体重を大幅に落としてしまうと、リバウンドする可能性が高いです。リバウンドしにくい、綺麗なカラダにしたいのであれば、2～3カ月が必要となります。食事・トレーニングを習慣化させるのにも2～3ヶ月くらい時間は必要ですが、筋肉を鍛えるのにも最低2～3ヶ月かかります。その中で1ヶ月で2~3kg、多くても5キロの減量を目指し、3カ月後に理想のカラダになるようにトレーニングを行います。</p>
557 | 		</div>
558 | 	</details>
559 | 	<details class="p-faq__container js-details">
560 | 		<summary class="p-faq__container-head js-details-summary">リバウンドしませんか？<span class="p-faq__container-head-plus"></span></summary>
561 | 		<div class="p-faq__container-body js-details-content">
562 | 			<p class="p-faq__container-body-text">リバウンドの原因は無理な食事制限による反動です。例えば、目標を達成したので、食事に気を使わなくなる、他にも、極端に糖質を減らすダイエットが原因で、痩せづらい体質になってしまうことです。Unicoは30分通い放題のトレーニングにより、生活習慣の見直しを行い、無理のないダイエットと太りづらい体質づくりを実施しております。正しい知識をお届けし、卒業後も続けることのできるライフスタイルの提供を行っています。</p>
563 | 		</div>
564 | 	</details>
565 | 	<details class="p-faq__container js-details">
566 | 		<summary class="p-faq__container-head js-details-summary">酸素水素浴とはどういうものですか？<span class="p-faq__container-head-plus"></span></summary>
567 | 		<div class="p-faq__container-body js-details-content">
568 | 			<p class="p-faq__container-body-text">今まであった酸素カプセルの効果（疲労回復、ケガの早期回復、冷え性など）に、水素の力を加えることにより、美肌、エイジングケア、病気の予防の効果がございます。弊社に設置してあるカプセルは、世界で唯一高気圧環境の中で酸素と水素を同時に吸収できる特許を取得している技術により、常に新鮮な水素を生成してカプセルに送り込み、体内で吸収することができます。ブログでより詳しく記載しておりますので、そちらもご覧ください。</p>
569 | 		</div>
570 | 	</details>
571 | 	<details class="p-faq__container js-details">
572 | 		<summary class="p-faq__container-head js-details-summary">体験トレーニングでは何をするんですか？<span class="p-faq__container-head-plus"></span></summary>
573 | 		<div class="p-faq__container-body js-details-content">
574 | 			<p class="p-faq__container-body-text">約60分間で、カウンセリング、2~3種目の体験トレーニングを行います。酸素水素浴の体験もご希望の方は約90分間の体験となります。</p>
575 | 		</div>
576 | 	</details>
577 | 	<details class="p-faq__container js-details">
578 | 		<summary class="p-faq__container-head js-details-summary">トレーニングには何を持っていけばいいですか？<span class="p-faq__container-head-plus"></span></summary>
579 | 		<div class="p-faq__container-body js-details-content">
580 | 			<p class="p-faq__container-body-text">トレーニングにはお飲み物とタオルをお持ちください。室内シューズ・運動服は貸し出しがございますので不要です。</p>
581 | 		</div>
582 | 	</details>
583 | </section>
584 | </main>
585 | 
586 | <footer>
587 | 	<?php get_template_part('inc/footer'); ?>
588 | </footer>
589 | 
590 | <script>
591 | new ScrollHint('.js-scrollable', {i18n: {scrollable: ''}});
592 | </script>
593 | <?php get_footer(); ?>
594 | </body>
595 | </html>


--------------------------------------------------------------------------------