/*色の指定*/
:root {
}
/********************/
/*        共通       */
/********************/
body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
html {
	height: 100%;
}
body {
	background: #fff;
	font-family:   'Klee One', cursive, Helvetica Neue, Helvetica, Arial, sans-serif;
/*  font-family:  'Balsamiq Sans', cursive, Helvetica Neue, Helvetica, Arial, sans-serif;*/
	font-size: 24px;
	color: #000;
	margin: 0;
	padding: 0;
}
a {
	color: #000000;
	text-decoration: none;
}
header h1 {
	font-family: 'Fredericka the Great', cursive;
	font-size: 2.5em;
	margin: 10px;
}
header .menu_content {
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
}
header .header_menu {
	padding: 6px 12px;
}
/********************/
/*     共通部品      */
/********************/
section.main-plofile .image_contents,
section.form .image_contents {
	margin: auto;
	display: flex;
	-webkit-box-orient: horizontal;
	-webkit-box-direction: normal;
	-ms-flex-direction: row;
	flex-direction: row;
	max-width: 688px;
}
section.plofile,
section.portfolio {
	font-family: "Klee One", serif;
	font-weight: 400;
	font-style: normal;
}
.form h2,
.plofile h2,
.portfolio h2 {
	background: #dfefff;
	box-shadow: 0px 0px 0px 5px #dfefff;
	border: dashed 2px white;
	padding: 0.2em 0.5em;
	margin: 20px 0;
	font-family: "Poiret One", serif;	
}
.service h2,
.nonebook h2,
.work h2,
footer,
header .menu_content {
	font-family: "Poiret One", serif;	
}
/*Googlefont_Poiret One*/
.poiret-one-regular {
	font-family: "Poiret One", serif;
	font-weight: 400;
	font-style: normal;
}
/*Googlefont_Klee One Static*/
.poiret-one-regular {
	font-family: "Poiret One", serif;
	font-weight: 400;
	font-style: normal;
}
/*.wf-hannari {
	font-family: "Hannari";
}*/
.wf-sawarabimincho { font-family: "Sawarabi Mincho"; }
.test_font {
	font-family: "Shin Maru Go Light";
}
/*footerの文字サイズ*/
footer {
	font-size: 0.8em;
}
/********************/
/*    トップページ    */
/********************/
/*20250423 レイアウト崩れの為クラス名変更 .swiper-container⇒.swiper*/
.swiper {
  width: 100%;
  padding-top: 50px;
  padding-bottom: 50px;
}
.swiper-slide {
  background-position: center;
  background-size: cover;
  width: 300px;
  height: 300px;
}
.text_center {
	text-align: center;
}
.image_contents {
	margin: auto;
	display: flex;
	-ms-flex-wrap: wrap;
	flex-wrap: wrap;
	max-width: 688px;
}
.image {
	padding: 6px;
	position: relative;
}
.image p {
	position: absolute;
	bottom: 15px;
	right: 12px;
	word-break: break-all;
	text-align: end;
	line-height: 30px;
}
.image span {
	font-size: 0.9em;
}
section.service {
	font-size: 0.7em;
}
.image span.sm-text {
	font-size: 0.7em;
}
/********************/
/*    プロフィール    */
/********************/
.main-plofile .image_contents h2 {
	width: 100%;
}
.plofile-left {
	width: 40%;
}
.plofile-right {
	width: 60%;
	font-size: 0.8em; 
}
.plofile-right label::after {
	content: " : ";
}
.plofile h2 {
	background: #dfefff;
	box-shadow: 0px 0px 0px 5px #dfefff;
	border: dashed 2px white;
	padding: 0.2em 0.5em;
	margin: 20px 0;
}
section.skill .image_contents,
section.timeline .image_contents {
	margin: auto;
	display: flex;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	max-width: 688px;
}
.progress {
	display: flex;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	padding: 2px 0;
}
.progress label {
	width: 35%;
}
progress {
	-webkit-appearance: none;
	height: 1.2em;
	width: 45%;
	margin-right: 10px;
}
progress::-webkit-progress-bar {
    background-color: #eae5e3;
}
progress::-webkit-progress-value {
	background-color: #89c3eb;
}
progress::-webkit-progress-bar {
   border-radius: 10px;
}
progress::-webkit-progress-value {
   border-radius: 10px;
}
progress::-moz-progress-bar {
   border-radius: 10px;
}
progress::-ms-fill {
   border-radius: 10px;
}
.timeline {
	margin-bottom: 20px;
}
.timeline-detail label {
	width: 23%;
}
.timeline-detail {
	display: flex;
	-ms-flex-wrap: nowrap;
	flex-wrap: nowrap;
	padding: 2px 0;
	height: 1.2em;
}
.timeline-detail p {
	width: 75%;
}
/********************/
/*   ポートフォリオ   */
/********************/
.portfolio .image_contents h2 {
	width: 100%;
}
.portfolio-detail {
	width: 700px;
	margin: 0 auto 20px;
	padding-bottom: 20px;
	border-bottom: 2px dashed #595857;
}
.portfolio-detail:last-child {
	border-bottom: none;
}
.portfolio-detail label::after {
	content: " : ";
}
.portfolio p.sm-text,
.portfolio label.sm-text,
.portfolio span.sm-text {
	font-size: 0.7em;
}
.portfolio-detail p.sm-text {
	text-align: start;
}
/********************/
/*    　フォーム　    */
/********************/

/*画面サイズ(スマホ)*/
@media (max-width: 719px) and (-webkit-min-device-pixel-ratio: 1.0),
	   (max-width: 719px) and (min-resolution: 1.0dppx) {
/********************/
/*     共通部品      */
/********************/
/*footerの文字サイズ*/
	footer {
		font-size: 0.5em;
	}
   	header .menu_content,
	.image_contents,
	section.main-plofile .image_contents,
	section.skill .image_contents,
	section.timeline .image_contents,
	.progress,
	.timeline-detail {
  		-ms-flex-wrap: wrap;
      	flex-wrap: wrap;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
	}
		   .content {
			   padding: 0 10px;
		   }
		   .plofile-left,
		   .plofile-right,
		   .progress label,
		   progress,
		   .timeline-detail label,
		   .timeline-detail p {
			   width: 100%;
		   }
		   .progress p {
			   position: absolute;
			   right: 20px;
		   }
		   .timeline-detail {
				height: auto;
			}
		   .timeline-detail p {
			   font-size: 0.8em;
		   }
/********************/
/*   ポートフォリオ   */
/********************/
		   .portfolio .image_contents img {
				max-width: 100%;
			}

}

/*---------------------------
  
  0.header

  1.index.html
    1.1 メインビジュアル
    1.2 サービスの概要
    1.3 料金プラン
  
  2.service.html

  3.footer

---------------------------*/
/*-------------------------
  ヘッダー
-------------------------*/
/********************/
/*    トップページ    */
/********************/

/********************/
/*          */
/********************/
/********************/
/*           */
/********************/
/********************/
/*           */
/********************/
/********************/
/*     */
/********************/
/********************/
/*      */
/********************/
/********************/
/*             */
/********************/
/********************/
/*      */
/********************/
/********************/
/*          */
/********************/
/********************/
/*           */
/********************/