@charset "UTF-8";
body {
	font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "Meiryo", "Osaka", "MS PGothic"; 
	color: #222222;
	background-color: #f9fafb;
}

img {
	/* 親要素のwidthの幅の割合に対して最大幅をとるよう100%に指定 */
max-width: 100%;
}

a {
	/* デフォルトCSSを打ち消す (下線のないリンクにする)*/
	text-decoration: none;
	color: #222222;
	font-size: 20px;
}

ul {
	/* デフォルトCSSを打ち消す */
    list-style-type: none;
}

/* -------------------------------------
	レイアウト
----------------------------------------*/

#service, #flow, #aboutsaku, #portfolio, #lp  {
	/* 各セクション、上下に150pxの内側余白をつける */
	padding: 150px 0;
}

.section-inner {
	width: 100%;
	max-width: 960px;
	margin: 0 auto;
}

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

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

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

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

/* pcとspで表示を切り替えたい時のCSS */
.pc-only {
	/* pc時に表示 */
    display: block; 
}
.sp-only {
	/* pc時に非表示 */
	display: none; 
}

.tab_none {
	display: none;
}

.pc_none {
	display: block;
}

/** -----------------------------------
    テキスト
-------------------------------------**/
h2.title-en {
	font-family: "EB Garamond" ,serif;
	font-weight: 600;
	font-size: 60px;
	line-height: 1.6;
	letter-spacing: 0.03em;
	text-align: left;
}

h2.title-jp {
	font-family: "Shippori Mincho" ,serif;
	font-weight: bold;
	font-size: 24px;
	line-height: 1;
	letter-spacing: 0.06em;
}

h3.large {
	font-weight: 500;
	font-size: 28px;
	line-height: 1.6;
	letter-spacing: 0.03em;
	text-align: center;
	margin-left: 10px;
}

h3.medium {
	font-weight: bold;
	font-size: 22px;
	line-height: 1.6;
	letter-spacing: 0.03em;
	text-align: center;
}

h3.medium-en {
	font-weight: 400;
	font-size: 16px;
	line-height: 2.25;
	letter-spacing: 0.03em;
	text-align: center;
}

h3.small {
	font-weight: 600;
	font-size: 18px;
	line-height: 1.6;
	letter-spacing: 0.05em;
	text-align: center;
}

h3.ex-small {
	color: #ffffff;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.6;
	letter-spacing: 0.03em;
	text-align: center;
}

p.large {
	font-weight: 400;
	font-size: 18px;
	line-height: 2;
	letter-spacing: 0.06em;
}

p.medium {
	font-weight: 400;
	font-size: 16px;
	line-height: 2;
	letter-spacing: 0.06em;
	text-align: center;
}

p.small {
	font-weight: 400;
	font-size: 14px;
	line-height: 1.75;
	letter-spacing: 0.03em;
}

p.sub {
	font-size: 11px;
	line-height: 1.75;
	letter-spacing: 0.03em;
}

/** -----------------------------------
    見出しのレイアウト 
-------------------------------------**/

.section-title {
	display: inline-block;
	text-align: left;
	margin-bottom: 175px;
	position: relative;
	
}

.title-en {
	display: inline-block;
	padding: 0 70px 10px 30px;
	position: relative;
}

.title-en::before {
    background-color: #000;
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
}

.title-en::after {
    background-color: #000;
    content: "";
    display: block;
    height: 1px;
    position: absolute;
    bottom: 15px;
    right: -50px;
    width: 200px;
	transform: rotate(116deg);
}

.title-jp {
	position: absolute;
	text-align: left;
	right: 0;
	transform: translateX(60%);
	margin-top: 27px;
}

/** -----------------------------------
    ボタン 
-------------------------------------**/


/** ----------上下線ボタン_PC-------------------**/
.bt-border {
	display: block;
	width: 300px;
	height: 80px;
	border: none;
	border-top: 1px solid #222222;
	border-bottom: 1px solid #222222;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	position: relative;
	overflow: hidden;
}

.bt-border a {
		/* 修正：文字と矢印の位置をフレックスボックスで調整 */
		display: flex; /* 横並びに変更 */
		justify-content: center; /* 文字と矢印を中央配置 */
		align-items: center; /* 縦方向の中央揃え */
		width: 100%; /* ボタン全体をクリック可能に */
		height: 100%; /* ボタン全体をクリック可能に */
		position: relative;
		z-index: 1;
		margin: 0; /* 修正：間隔をリセット */
}

.bt-border::before {
	content: "";
	position: absolute;
	width: 0px;
	height: 80px;
	top: 0;
	left: 0;
	background: #222222;
	transition: 1s;
	z-index: 0; 
}
.bt-border:hover::before {
	width: 100%;
}

.bt-border a::after {
	content: " ";
	display: inline-block; /* 修正：インラインブロックに変更 */
	background-image: url(../images/arrows_PC.png);
	background-size: contain; /* 修正：背景サイズを調整 */
	background-repeat: no-repeat; /* 修正：背景の繰り返しを防止 */
	width: 16px;
	height: 17px;
	margin-left: 35px; /* 修正：文字と矢印の間隔を固定 */
}

.bt-border:hover a {
	color: #ffffff;
	z-index: 1;
	transition: color 3s;
}

.bt-border:hover a::after {
	background-image: url(../images/arrows_white_PC.png); /* ホバー時の白い矢印画像に変更 */
	transition: 3s;
}


/** ----------立体ボタン_PC-------------------**/

.bt-3d {
	display: block;
	width: 300px;
	height: 80px;
	background: #ffffff; /* ボタンの塗りつぶし */
	border: 1px solid #222222;
	box-shadow: 3px 3px 0px #222222; /* 角度125°のドロップシャドウ */
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	position: relative;
	overflow: hidden;
	transition: box-shadow 0.3s ease, transform 0.3s ease; /* スムーズな遷移を追加 */
}

.bt-3d:hover {
	box-shadow: none; /* ホバー時に平面に戻る */
	transform: translate(3px, 3px); /* シャドウ分だけボタンを移動 */
}

.bt-3d a {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 1;
}

.bt-3d a::after {
	content: " ";
	display: inline-block;
	background-image: url(../images/arrows_PC.png); /* 初期矢印画像 */
	background-size: contain; /* 矢印画像のサイズを調整 */
	background-repeat: no-repeat; /* 繰り返しを防止 */
	width: 16px;
	height: 17px;
	margin-left: 35px; /* 文字と矢印の距離を一定に */
}



/** ----------真っ黒ボタン_PC-------------------**/

.bt-black {
	display: block;
	width: 300px;
	height: 80px;
	background-color: #222222;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	position: relative;
}

.bt-black a {
	color:#ffffff;
	/* 文字と矢印の位置をフレックスボックスで調整 */
	display: flex; /* 横並びに変更 */
	justify-content: center; /* 文字と矢印を中央配置 */
	align-items: center; /* 縦方向の中央揃え */
	width: 100%; /* ボタン全体をクリック可能に */
	height: 100%; /* ボタン全体をクリック可能に */
	position: relative;
	z-index: 1;
	margin: 0; /* 修正：間隔をリセット */
}

.bt-black a::after {
	content: " ";
	display: inline-block; /* 修正：インラインブロックに変更 */
	background-image: url(../images/portfoliolink.png);
	background-size: contain; /* 修正：背景サイズを調整 */
	background-repeat: no-repeat; /* 修正：背景の繰り返しを防止 */
	width: 24px;
	height: 24px;
	margin-left: 35px; /* 修正：文字と矢印の間隔を固定 */
}

.bt-black:hover {
	background-color: #ffffff;
	border: 2px solid #222222;
	transition: background-color 0.3s , border 0.3s;
}

.bt-black a:hover {
	color: #222222;
	transition: color 0.3s;
}

.bt-black:hover a::after {
	background-image: url(../images/portfoliolink-hover.png); /* ホバー時の黒いリンク画像に変更 */
	transition: 0.3s;
}


/** -----------------------------------
    ヘッダー
	【残課題】ポップアップメニューの下が、スクロールバー分隙間があいてしまう
-------------------------------------**/

#header {
	width: 100%;
	height: 100px;
	position: fixed;
	top: 0;
    z-index: 100;
	background-color: transparent;
}

.gnav-wrap {
    display: flex;
    justify-content: space-between;
	align-items: center;
}

.gnav-wrap h1 {
    width: 160px;
	height: 50px;
	margin: 25px 40px;
}

.gMenu {
	right: 0;
	top: 0;
	width: 100%;
	z-index: 99;
}
  /* メニューアイコンを画面右上に固定しています */
.gMenu .menu-icon {
	cursor: pointer;
	position: absolute;
	right: 32px;
	top: 32px;
	height: 32px;
	z-index: 1;
}
  /* メニューアイコン（三本線）の真ん中の線です */
.gMenu .menu-icon .navicon {
	background: #ffffff; /* 色は自由に変更可能です */
	display: block;
	height: 2px; /* 太さ */
	width: 40px; /* 長さ */
	position: relative;
	transition: 0.4s ease-out; /* 形が変わる時のアニメーション */
}
  /* メニューアイコン（三本線）の上と下の線を疑似要素で追加 */
.gMenu .menu-icon .navicon::before,
.gMenu .menu-icon .navicon::after {
	background: #ffffff; /* 色は自由に変更可能です */
	content: '';
	display: block;
	height: 100%;
	position: absolute;
	transition: all .4s ease-out; /* 形が変わる時のアニメーション */
	width: 100%;
}
.gMenu .menu-icon .navicon::before {top: 32px;} /* 位置を上にずらしています */
.gMenu .menu-icon .navicon::after {top: 16px;} /* 位置を下にずらしています */


/* 表示されるメニューです */
.gMenu .menu {
	position: fixed;
	right: 0;
	top: 0;
	background-color: #e7f2f8;
	overflow: hidden;
	width: 190px;
	max-height: 0; /* ★最初は高さを0にして非表示状態に */
	transition: max-height .6s; /* 表示されるときのアニメーション */
	text-align: center;
	z-index: 0;
	opacity: 0.95;
}
  /* メニュー部分のデザイン */
.gMenu .menu li:first-of-type {
	padding-top: 75px;
}

.gMenu .menu li {
	display: flex;
	justify-content: flex-start;
}
.gMenu .menu li a.menu-item {
	display: inline-block;
	padding: 22px 0 20px 22px;
	text-decoration: none;
	text-transform: uppercase;
	transition: transform 0.4s ease, color 0.3s ease; /* ホバー効果のアニメーションを追加 */
	text-align: left;
}

/* メニュー内のテキスト設定 */
.menu-item .en {
	display: block;
	font-family: "Noto Sans JP" ,sans-serif;
	font-weight: 500;
	font-size: 20px;
	line-height: 1;
	letter-spacing: 0;
	color: #222222;
}

.menu-item .jp {
	display: block;
	font-family: "Noto Sans JP" ,sans-serif;
	font-weight: 400;
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0.05em;
	color: #222222;
	margin-top: 5px;
}

/* ホバー効果 */
.gMenu .menu li a.menu-item:hover {
	transform: scale(1.1) translateX(5px); /* 右側に向けて移動 */
}

/* 下線のアニメーション */
.gMenu .menu li a:hover::after {
	content: '';
	position: absolute;
	bottom: 16px;
	left: 0;
	height: 1px;
	width: 0;
	background-color: #222222;
	width: calc(100% + 5px); /* 文字の右端+3pxまで拡張 */
}

.gMenu .menu li a.no-hover:hover::after {
	content: none; /* ホバー時の効果を無効化 */
}

.gMenu .menu li a::after {
	content: '';
	position: absolute;
	bottom: 16px;
	left: 0;
	height: 1px;
	width: 0;
	background-color: #222222;
}


.menu .bt-bl-s {
	display: block;
	width: 150px;
	height: 40px;
	background-color: #222222;
	margin:22px auto;

}

.menu .bt-bl-s a {
	display: flex;
	align-items: center;
	justify-content: center;
	color:#ffffff;
	font-size: 12px;
	font-weight: 500;
	letter-spacing: 0.06em;
	width: 100%; /* ボタン全体をクリック可能に */
	height: 100%; /* ボタン全体をクリック可能に */
	z-index: 1;
}

.menu .bt-bl-s a:hover {
	background-color: #e7f2f8;
	border: 1px solid #222222;
	color: #222222;
	transition: background-color 0.4s , border 0.4s, color 0.4s;
}


  /* チェックボックスは常に非表示です */
.gMenu .menu-btn {
	display: none;
}
  /* ▼▼▼以下はチェックボックスがONの時の状態です▼▼▼ */
.gMenu .menu-btn:checked ~ .menu {
	width: 190px;
	max-height: 100vh;  /* ★チェックボックスがオンの時高さを338pxにして表示させます */
	transition: max-height .6s;
}

  /* メニューボタンの中央の線を非表示に */
.gMenu .menu-btn:checked ~ .menu-icon .navicon {background: transparent;}

  /* メニューボタンの上下の線を45度傾けて✕印を作ります */
.gMenu .menu-btn:checked ~ .menu-icon .navicon::before {
	background-color: #222222;
	transform: rotate(-45deg);top: 16px;
}
.gMenu .menu-btn:checked ~ .menu-icon .navicon::after {
	background-color: #222222;
	transform: rotate(45deg);top: 16px;
}


/** -----------------------------------
    メインビジュアル
	【残課題】ポップアップメニューの下が、スクロールバー分隙間があいてしまう
-------------------------------------**/

#mainvisual {
	width: 100%;
	height: 100vh;
	position: relative;
}

#mainvisual .visual-wrap {
	width: 100%;
  	height: 100%; /* 親要素の高さに合わせる */
}

#mainvisual .mv-img {
	width: 100%; /* 横幅は100% */
	height: 100%; /* 親要素の高さに合わせる */
	position: absolute;
	display: flex;
}

#mainvisual .mv-img img {
	width: 50%;
	height: 100%;
	object-fit: cover; /* 画像が縦横比を保って親要素のサイズに合わせて表示される */
}


#mainvisual .copy-wrap {
	position: absolute;
	width: 100%;
	top: 32%;
}

#mainvisual .typing.item1 {
	position: absolute;
	left: 12vw;
	z-index: 2;
}

#mainvisual .typing.item2 {
	position: absolute;
	left: 35vw;
	z-index: 3;
	margin-top: 8%;
}

/* タイピング効果の設定 */
#mainvisual p.typing {
	font-size: 4.66vw;
	font-family: 'Shippori Mincho', serif;
	line-height: 2;
	font-weight: 500;
	letter-spacing: 0em;
	overflow: hidden;
	white-space: nowrap;
	display: inline-block;
	color: #222222;
	position: relative;
	z-index: 1;
	opacity: 0; /* 初期状態では透明 */
	padding: 0 1.5vw 0 2.64vw;
}

/* 背景のアニメーション */
#mainvisual p.typing::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #e7f2f8; /* 水色 */
	z-index: -1; /* 背景はテキストの後ろ */
	opacity: 0;
	transition: opacity 0.3s;
}

/* 背景のアニメーション:javaに関連するのでデバッグ時注意 */
#mainvisual p.typing.show-background::before {opacity: 1;}
#mainvisual p.typing.show-background {opacity: 1; /* 背景が表示されるとテキストも表示 */}

/* タイピングカーソル */
#mainvisual p.typing::after {
	content: "|";
	position: absolute;
	right: -3px;
	top: 0;
	animation: typingCursor 0.5s step-start infinite;
}

/* カーソルのアニメーション調整 */
@keyframes typingCursor {
	from {
		opacity: 1;
	}
	to {
		opacity: 1;
	}
}

#mainvisual p.typing.typing-done::after {
	display: none;
}

/* サブコピーの設定 */
#mainvisual .sub-copy {
	font-family:'Shippori Mincho',serif ;
	font-size: 2.3vw;
	font-weight: 500;
	letter-spacing: 0.05em;
	line-height: 1;
	color: #ffffff;
	text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.4);
}

#mainvisual .sub-copy.item1 {
	position: absolute;
	top: 0;
	left: 15vw;
	margin-top: -3%;
}

#mainvisual .sub-copy.item2 {
	position: absolute;
	top: 0;
	left: 51vw;
    margin-top: 18%;
}

#mainvisual .scroll {
	position: absolute;
	bottom: 0;
	width: 100%;
	text-align: center;
}

#mainvisual .scroll img.sun {
	width: 2.78vw;
	height: auto ;
}

#mainvisual .scroll img.bar {
	width: 1px;
	height: 2.78vw;
}

#mainvisual .scroll p {
	color: #ffffff;
	font-weight: 400;
	text-align: center;
}

#mainvisual .scroll p.first {
	font-size: 10px;
	line-height: 1;
	letter-spacing: 0.05em;
	margin: 0  0 5px 0;
}

#mainvisual .scroll p.second {
	font-size: 0.764vw;
	line-height: 1;
	letter-spacing: 0.18em;
	margin-bottom: 10px;
}

/* sub-copyとscrollの浮き上がるアニメーション */
#mainvisual .sub-copy,
#mainvisual .scroll {
	opacity: 0; /* 初期状態は透明 */
	transform: translateY(30px); /* 少し下に配置 */
	transition: opacity 1s ease-out, transform 1s ease-out; /* 透明度と位置を変化させる */
}

#mainvisual .sub-copy.show,
#mainvisual .scroll.show {
	opacity: 1;
  	transform: translateY(0); /* 元の位置に戻る */
}

@keyframes scrollAnimation {
	0% {
		transform: scaleY(0);
		transform-origin: top;
	}
	50% {
		transform: scaleY(1);
		transform-origin: top;
	}
	50.1% {
		transform: scaleY(1);
		transform-origin: bottom;
	}
	100% {
		transform: scaleY(0);
		transform-origin: bottom;
	}
}

/* scroll-barが流れるように動くキーフレームアニメーションの適用 */
.scroll img.bar {
	animation-name: scrollAnimation;
	animation-duration: 3s;
	animation-timing-function: ease-out;
	animation-iteration-count: infinite;
}

/** -----------------------------------
    LPセクション1章目
	【残課題】ＸＸＸ
-------------------------------------**/
#lp .lp1 {
	padding-top: 50px;
}

#lp .lp1 p.lp-top {
	font-size: 35px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.03em;
	text-align: center;
	margin-bottom: 100px;
}

#lp .lp1 .item.left {
	position: relative;
}

#lp .lp1 .item.left p {
	font-size: 20px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: 0.03em;
	text-align: center;
}

#lp .lp1 .item.left p.think-top {
	position: absolute;
	top: 20%;
	left: 50%;
	transform: translateX(-50%);
	
}

#lp .lp1 .item.left .think-bottom {
	width: 80%;
	position: absolute;
	bottom: 23%;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
	justify-content: space-around;

}


#lp .lp1 .criant {
    display: flex;
    justify-content: space-around;
	height: 33%;
}

#lp .lp1 .criant .copy {
	margin-right: 5vw;
}

#lp .lp1 .criant .copy p {
	font-size: 20px;
	font-weight: 500;
	line-height: 1;
	letter-spacing: 0.03em;
	text-align: center;
}

#lp .lp1 .criant .copy p.big {
	font-size: 24px;
	margin: 17% 0 8px 0;
}

#lp .lp1 .criant.rev {
	flex-direction: row-reverse;
}

#lp .lp1 .criant.rev .copy {
	margin-right: 0;
}

#lp .lp1 .criant img.owner {
	width: 100px;
	height: 150px;
}

#lp .lp1 .criant img.ceo {
	width: 157px;
	height: 150px;
}

#lp .lp1 .criant img.fleelance {
	width: 117px;
	height: 150px;
}

/** -----------------------------------
    LPセクション2章目
	【残課題】文字サイズを小さくしていくか、レスポンシブ要検討
-------------------------------------**/

#lp .lp2 {
	margin: 150px 0;
	position: relative;
	
}

#lp .lp2 > div {
    position: relative; /* p.top-copy の基準点にする */
    display: inline-block;
}

#lp .lp2 img {
	width: 100%;
}

#lp p.top-copy {
	font-family: 'Shippori Mincho',serif;
	font-size: 40px;
	font-weight: 400;
	letter-spacing: 0.05em;
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 960px;
}


/** -----------------------------------
    LPセクション3章目
	【残課題】ＸＸＸ
-------------------------------------**/

#lp .lp3 h3.medium {
	text-align: left;
	margin-bottom: 30px;
}

#lp .lp3 p.medium {
	text-align: left;
}

#lp .lp3 .item {
	margin-bottom: 60px;
}

#lp .lp3 ul {
	display: flex;
	padding: 45px 0;
	justify-content: space-around;
}

#lp .lp3 li p.point {
	font-weight: 600;
	font-size: 22px;
	line-height: 1.25;
	letter-spacing: 0.05em;
	text-align: center;
	position: relative;

}

#lp .lp3 li p.point::before {
	content: '';
	display: block;
	width: 117px;
	height: 117px;
	background: url(../images/workspoint.png) no-repeat center/contain ;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: -1;
}

#lp .lp3 .item .bt-border {
	margin: 0 auto;
} 

#lp  {
	/* LPセクションの最後の余白を調整 */
	padding-bottom: 90px;
}

/** -----------------------------------
    ABOUT SAKU
	【残課題】ＸＸＸ
-------------------------------------**/

#aboutsaku {
	padding-top: 0;
}


/** -----------------------------------
    SERVICE
	【残課題】ＸＸＸ
-------------------------------------**/


#service .subtitle {
	display: flex;
	align-items: center;
	margin-bottom: 40px;
}
#service .subtitle img {
	width: 30px;
	height: 30px;
}



/* サービスカード基本の設定 */

#service .servicecard {
	background-color: #e7f2f8;
	border-radius: 20px;
	margin-bottom: 30px;
	box-shadow: 8px 10px 15px rgba(181, 190, 195, 0.4);
}

#service .servicename {
	padding: 30px 0 35px 0;
	position: relative;
}

#service .servicename h3 {
	text-align: left;
	margin-left: 65px;
}

#service .servicename::before {
	content: "";
	display: block;
	width: 3px;
	height: 70px;
	background-color: #002f63;
	position: absolute;
	left: 46px;
	top: 50%;
	transform: translateY(-50%);
}

#service .explain .servicecard .item.left {
	width: 125px;
	margin: 15px 38px 0 75px;
}

#service .explain .servicecard.first .item.left {
	width: 150px;
	margin: 5px 26px 0 62px;
}

#service .explain .servicecard .item.right {
	width: 723px;
}

#service .allmenu {
	margin-top: 25px;
}

#service .allmenu h3.small {
	width: 75px;
	height: 30px;
	font-weight: 500;
	font-size: 18px;
	line-height: 1.5;
	color: #ffffff;
	background-color: #002f63;
	border-radius: 15px;
}

/* サービスカード1枚目の設定 */

#service .allmenu .hp {
	display: flex;
	margin-bottom: 15px;
}

#service .allmenu .hp p.medium {
	margin-left: 20px;
	line-height: 1.75;
}

#service .allmenu .lp-menu {
	display: flex;
}

#service .allmenu .lp-menu p.medium {
	margin-left: 20px;
	line-height: 1.75;
}

#service .pricelink {
	text-align: right;
	padding: 0 20px 20px 0;
}

#service .pricelink img {
	width: 40px;
	margin-right: 13px;
}

#service .pricelink p.sub {
	font-weight: 500;
	line-height: 1;
}

#service .pricelink a:hover {
	opacity: 0.7;
}

/* サービスカード2枚目の設定 */

#service .servicecard.second .allmenu h3.small {
	width: 150px;
	height: 30px;
	margin-bottom: 10px;
}

#service .servicecard.second .allmenu p.medium {
	text-align: left;
	margin-left: 50px;
	position: relative;
}

#service .servicecard.second .allmenu p.medium::before {
	content: "";
	background: url(../images/dot_servicemenu.png) no-repeat center / contain;
	width: 10px;
	height: 10px;
	position: absolute;
	left: -20px;
	top: 12px;
	
}

#service .servicecard.second .allmenu .linesetup {
	margin-bottom: 20px;
}

#service .servicecard .var {
	display: flex;
}

#service .explain .servicecard .item.left img {
	margin: 15px 0;
}

/* サービスカード3枚目の設定 */

#service .servicecard.second .allmenu .webdesign {
	margin-bottom: 20px;
}

#service .explain .servicecard .item.left img {
	margin: 5px 0;
}

/* サービスカード4枚目の設定 */
#service .servicecard.last .allmenu h3.small {
	width: 150px;
	height: 30px;
	margin-bottom: 10px;
}

#service .servicecard.last .allmenu p.medium {
	text-align: left;
	margin-left: 50px;
	position: relative;
}

#service .servicecard.last .allmenu p.medium::before {
	content: "";
	background: url(../images/dot_servicemenu.png) no-repeat center / contain;
	width: 10px;
	height: 10px;
	position: absolute;
	left: -20px;
	top: 12px;
	
}

#service .servicecard.last .allmenu p.sub {
	margin: 5px 0 0 30px;
}

#service .servicecard.last .allmenu .websession {
	margin-bottom: 20px;
}

#service .servicecard.last .allmenu .videoedit {
	margin-bottom: 20px;
}


#service .explain .servicecard.last .item.left {
	margin-top: 30px;
}

#service .explain .servicecard.last .item.left img {
	margin: 10px 0;
}

/* ---------------------------------------
サービス｜対応できないもの一覧
---------------------------------------- */

#service .explain.second {
	margin-top: 130px;
}

#service .explain.second p.large {
	margin-left: 40px;
}

#service .explain.second {
	margin-top: 100px;
}

#service .explain.second .servicecard {
	background-color: #f2f2f2;
	border-radius: 20px;
	/* margin-bottom: 30px; */
	box-shadow: 8px 10px 15px rgba(181, 190, 195, 0.4);
	margin-top: 30px;
}

#service .explain.second .col-3 {
	padding: 50px 0;
}

#service .explain.second .col-3  .down {
	margin: 20px 15px 0 15px;
}

#service .explain.second .col-3  .top img {
	margin-top: -75px;
}

#service .explain.second .col-3  .item.server p.small {
	margin-bottom: 20px;
}

#service .explain.second .col-3  .item.server p.sub {
	margin: 0 0 5px 30px;
	position: relative;
}

#service .explain.second .col-3  .item.server p.sub::before {
	content: "";
	background: #616161 no-repeat center / contain;
	width: 8px;
	height: 8px;
	border-radius: 4px;
	position: absolute;
	left: -15px;
	top: 50%;
	transform: translateY(-50%);
}

#service .explain.second .col-3  .item.illust h3.small {
	margin-top: 16px;
}


/* ---------------------------------------
ここまで修正済


---------------------------------------- */

#service .schedule {
	margin: 0 0 60px 90px;
}

#service .schedule ul {
	display: flex;
	position: relative;
}

#service .schedule ul::before {
	content: "";
	background: url(../images/dot_coretime.png) no-repeat center / contain;
	width: 18px;
	height: 18px;
	position: absolute;
	left: -45px;
	top: 11px;
}

#service .schedule h3.small {
	text-align: left;
	margin-right: 30px;
	line-height: 2;
}

#service .mtg {
	margin-left: 45px;
}

#service .mtg h3.small {
	width: 250px;
	height: 40px;
	font-weight: 500;
	font-size: 18px;
	line-height: 2;
	color: #ffffff;
	background-color: #002f63;
	border-radius: 20px;
}

#service .mtg p.medium {
	text-align: left;
	margin: 16px 0;
}

#service .item .bt-border {
	margin: 80px auto 0 auto;
} 

#service .explain.final {
	margin-top: 130px;
}







#portfolio p {
	text-align: center;
}

#portfolio a.button-black {
	text-align: center;
}

#portfolio p.sub {
	margin-top: 20px;
}

#portfolio .btsection {
	margin-top: 80px;
	display: flex;
	justify-content: center;
}

#footer {
	/* 背景色#b2c0d0 */
	background-color: #b2c0d0;
	/* 文字は左右中央揃え */
	text-align: center;
}

#footer ul.footer-link {
	display: flex;
	justify-content: center;
	padding-top: 150px;
}
#footer ul.footer-link li {
	margin: 0 1.53vw;
}

#footer ul.footer-link li a {
	color: #222222;
	font-size: 18px;
	line-height: 2;
	letter-spacing: 0.03em;
}

#footer ul.footer-link li a:hover {
	opacity: 0.7;
}

#footer p.large {
	color: #222222;
	margin: 50px 0;
}

#footer ul.footer-snslink {
	display: flex;
	justify-content: center;
	padding-bottom: 150px;
}

#footer ul.footer-snslink li {
	width: 63px;
	height: 63px;
	margin: 0 7px;
}

#footer ul.footer-snslink li a img {
	width: 100%;
	height: auto;
}

#footer ul.footer-snslink li a:hover {
	opacity: 0.7;
	transition: 0.3s
}

/*===============================================
PC : 画面の横幅が769px以上
=================================================*/

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



/*ここからメディアクエリで各デバイスサイズに書き分けます
CSSは上から下に継承されるので、変化させたいところだけ書けばOK*/



/*================================================
Tablet : 画面の横幅が768pxまで
==================================================*/
@media screen and (max-width: 768px){
	.example {
		font-size: 30px;
		color: #2D81B1;
	}
}


/*================================================
Smartphone :  画面の横幅が640pxまで
=================================================*/
@media screen and (max-width:640px){
	.example {
		font-size: 20px;
		color: #AD8651;
	}
}