@charset "utf-8";
/* ==========================================================================
 * bundle_base_pc.css
 *
 * PC用（min-width: 737px で読み込む）
 * 2026/09/21作成（フェーズ29）。
 *
 * 目的: テーマルートに散らばっていたCSSを /css/ に集約し、
 *   head のレンダリングブロッキングCSSを 1本 減らす。
 *
 * 中身: 以下2ファイルを header.php の読み込み順のまま連結。
 *     1. style.css （テーマルートにあったもの）
 *     2. module.css
 *   値の変更・並べ替え・重複排除は一切していない。
 *
 * 加えた変更は次の2点だけ:
 *   (1) style.css の先頭にあった @charset と Theme Name コメントを削除
 *       （@charset はこのファイルの先頭に1つだけ置いた）
 *   (2) style.css 由来の相対パスを2箇所書き換えた。
 *       元ファイルはテーマルートにあったため ../ が不要だったが、
 *       このファイルは /css/ に置くため付け足した:
 *         url(img/section-header-link.png)         -> url(../img/section-header-link.png)
 *         url('fonts/poppins-v24-latin-400.woff2') -> url('../fonts/poppins-v24-latin-400.woff2')
 *
 * 注意: テーマルートの style.css は WordPress がテーマを認識するために必要なので
 *   削除できない。Theme Name ヘッダーだけのスタブとして残してある。
 *   元ファイルを修正したら、この結合ファイルも再生成すること。
 * ========================================================================== */


/* ===== 1/2: style.css ===== */
/***************************
 *
 * ベース
 *
 **************************/
html, body, div, span, object, iframe,
h1, h2, h3, p, blockquote, /* pre, */
abbr, address, cite, /* code, */
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:16px;
	font-style: normal;
	font-weight: 400;
	vertical-align:baseline;
	background:transparent;
	font-family: 'Noto Sans JP', "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;

}
html {
	overflow: auto;
}

body {
	line-height:1;
	color: #222;
	position: relative;
	letter-spacing: 0.02em;
	/* letter-spacing: 0.05em; */
	min-width: 1200px;
}

article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section { 
	display:block;
}

ol, ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

a {
	margin:0;
	padding:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
	color: #222;
	text-decoration: none;
}
a:hover {
	text-decoration: underline;
	color: #aaa;
	-webkit-transition: .3s ease-in-out;
	transition: .3s ease-in-out;
}

ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}

mark {
	background-color:#ff9;
	color:#000; 
	font-style:italic;
	font-weight:bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom:1px dotted;
	cursor:help;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

hr {
	display:block;
	height:1px;
	border:0;	
	border-top:1px solid #cccccc;
	margin:1em 0;
	padding:0;
}

input, select {
	vertical-align:middle;
}

img {
	vertical-align: top;
	font-size:0;
	line-height: 0;
	max-width: 100%;
	height: auto;
	width /***/:auto;
}


/***************************
 *
 * レイアウト
 *
 **************************/
body {
	margin: 0;
}
.l-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	text-align: left;
	-webkit-transition: all .5s ease;
	transition: all .5s ease;
    animation: fadeIn 2s ease 0s 1 normal;
    -webkit-animation: fadeIn 2s ease 0s 1 normal;
	z-index: 5;
	color: #333;

	background-color: #f7f8f8;
}
.l-wrap.is-hidden {
	overflow: hidden;
	
}
@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

.l-wrap-inner {
	

}
.overlay {
	content: "";
	display: block;
	width: 0;
	height: 0;
	background-color: rgba(0, 0, 0, 0.5);
	position: absolute;
	top: 0;
	left: 0;
	z-index: 90;
	opacity: 0;
	transition: opacity .5s;
}
.overlay.open {
	width: 100%;
	height: 100%;
	opacity: 1;
}
.l-header {
	width: 100%;
	height: 80px;
	box-sizing: border-box;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 100;
	background: white;
	min-width: 1100px;
}

@keyframes slideDown {
	from {
		top: -100px;
		opacity: 0;
	}

	to {
		top: 0;
		opacity: 1;
	}
}

.l-nav {

	height: 80px;
	z-index: 100;
	position: absolute;
	right: 0;
	top: 0;
}

.l-main {

	position: relative;
	display: block;
}

.l-main-page {

}

.l-contents {
	position: relative;

	margin: 0 auto;

}
.l-1200 {
	width: 1200px;
	margin: 0 auto;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;
	-webkit-flex-wrap: nowrap;
	flex-wrap: nowrap;		
}
.l-1200 .l-content {
	width: 860px;
}
.l-content.l-content-post {
	background: white;
	box-sizing: border-box;

}
.l-contents.is-front {
	margin-top: 0;
}

.has-sidebar {
	width: 1050px;
	margin: 0 auto;
	
}
.l-page-l {
	float: left;
	width: 750px;
}


.l-sidebar {
	width: 270px;
	float: right;
	top: 0;
	position: -webkit-sticky;
	position: sticky;
}

.l-footer {
	clear: both;
	background: #354262;
	padding: 0px;
	position: relative;
	overflow: hidden;
}


.sp {
	display: none !important;
}
.br-sp {
	display: none;
}
.none {
	display: none;
}

.br-1070 {
	display: none;
}
.br-1100 {
	display: none;
}
.link-off {
	pointer-events: none;
	cursor: default;
	text-decoration: none;	
}
/* ==========================================================
   .screen-reader-text クラスの追加
   （PageSpeed Insights「エージェントのアクセシビリティ」対応・2026/09/04追加）
   背景: sidebar.phpの検索フォーム、archive-products.php/functions.phpの
   商品カードリンクで、視覚的には隠すがスクリーンリーダー/AIエージェントには
   読ませる代替テキスト用のクラスが必要になったが、テーマ内に未定義だったため追加。
   ========================================================== */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

/* ==========================================================
   FontAwesome廃止に伴うインラインSVGアイコンのサイズ調整
   （未使用CSS削減対応・2026/09/05追加）
   背景: fa-search/fa-hashtag/fa-angle-downをインラインSVGに置き換えた
   (functions.phpのprimoposto_icon_svg()参照)ため、アイコンフォントと
   同じ見た目になるよう文字サイズに追従するスタイルを追加。
   ========================================================== */
.icon-svg {
	display: inline-block;
	width: 1em;
	height: 1em;
	fill: currentColor;
	vertical-align: -0.125em;
}

/* ==========================================================
   Poppinsのセルフホスト化（未使用CSS削減対応・2026/09/05追加）
   背景: fonts.googleapis.com経由のPoppins読み込みを廃止し、テーマ内の
   fonts/poppins-v24-latin-400.woff2（ラテン文字のみ、約7.7KB）から配信する。
   Google Fonts側の元データ(v24, latin subset)と同一のunicode-rangeを指定。
   ========================================================== */
@font-face {
	font-family: 'Poppins';
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url('../fonts/poppins-v24-latin-400.woff2') format('woff2');
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==========================================================
 * 未使用CSS削減対応: module_top.cssの共通レイアウトルールをこちらにも保持
 * (2026/09/05 追加)
 * ----------------------------------------------------------
 * 背景: PageSpeed Insightsの「使用していないCSS」監査で、module_top.css/
 *   module_top_sp.css(合計約16KB)がホームページ以外の全テンプレート
 *   (page.php/single-products.php/single_blog.php/archive-products.php)でも
 *   一律読み込まれていたが、ブログ記事・商品ページ・固定ページ・商品一覧の
 *   4種類のページで実際にブラウザ確認したところ、ファイル内のホームページ専用
 *   ブロック(main-visual/main-mail/main-blog/main-case/main-news/main-letter/
 *   main-down、ファイル全体の9割)は一切使われていなかった。一方.paper-r/.paper-l/
 *   .paper-c/.paper-c-sm/.section-header関連の少数のルールはホームページ以外でも
 *   実際に使われており(かつ他のCSSファイルに重複定義なし、確認済み)、これらを
 *   削除するとホームページ以外の見た目が崩れる。そのため、このルールだけを
 *   全ページ共通で読み込まれるstyle.css側にも保持したうえで、module_top.cssの
 *   読み込み自体をホームページ(index.php)のみに限定することにした。
 * 内容: module_top.cssから該当ルールをそのままコピー(画像パスのみ../img/→img/に
 *   調整。style.cssはテーマルート直下にあるため)。
 * ========================================================== */
.paper-r {
	background: white;
	margin-left: 90px;
	box-shadow: 5px 5px 15px #ddd;
	position: relative;
	z-index: 1;
}
.paper-l {
	background: white;
	margin-right: 90px;
	box-shadow: 5px 5px 15px #ddd;
	position: relative;
}
.paper-c {
	background: white;
	max-width: 1025px;
	width: 100%;
	margin: 0 auto;
	box-shadow: 5px 5px 15px #ddd;
	position: relative;
	padding: 50px 100px;
	box-sizing: border-box;
}
.paper-c-sm {
	background: white;
	max-width: 750px;
	width: 100%;
	margin: 0 auto;
	box-shadow: 5px 5px 15px #ddd;
	position: relative;
	padding: 50px 50px;
	box-sizing: border-box;
}
.paper-c-sm .box-content {
	padding: 0;
}
.paper-l .box-content {
	padding-left: 170px;
	max-width: 1300px;
}
.section-header {
	padding: 0 80px;
	width: 100%;
	max-width: 1280px;
	margin: 0 auto 70px;
	position: relative;
}
.section-header .section-header-l {
	border-left: 1px solid #1c1a8a;
	padding: 30px 40px;
}
.section-header .section-title {
	font-size: 28px;
	font-weight: bold;
	color: #333333;
	line-height: 1.28em;
}
.section-header .section-caption {
	font-size: 20px;
	color: #1d2088;
	margin-top: 10px;
}
.section-header .section-header-link {
	position: absolute;
	right: 250px;
	top: 50%;
	margin-top: -22px;
}
.section-header .section-header-link a {
	font-size: 14px;
	color: #333333;
	font-weight: bold;
	display: block;
	background: url(../img/section-header-link.png) right center no-repeat;
	background-size: 44px 44px;
	height: 44px;
	line-height: 44px;
	padding-right: 60px;
}
.section-header-solo {
	margin-left: 90px;
}


/* ===== 2/2: module.css ===== */
/***************************
 *
 * モジュール
 *
 **************************/

input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}
/* 
一般
*/
img{

}
.clear {
	clear: both;
}
.clearfix:after {
	clear: both;
	height: 0px;
	display: block;
	content: ".";
	visibility: hidden;
}
.fl-r {
	float: right;
}
.fl-l {
	float: left;
}
.mb-0 {
	margin-bottom: 0 !important;
}

.pt-50 {
	padding-top: 50px !important;
}
.pb-50 {
	padding-bottom: 50px !important;
}
.pt-70 {
	padding-top: 70px !important;
}
.pb-70 {
	padding-bottom: 70px !important;
}
.pt-40 {
	padding-top: 40px !important;
}
.pb-40 {
	padding-bottom: 40px !important;
}
.mlr-0 {
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.mt-40 {
	margin-top: 40px !important;
}
.mt-50 {
	margin-top: 50px !important;
}
.mb-40 {
	margin-bottom: 40px !important;
}
.mb-50 {
	margin-bottom: 50px !important;
}
.mt-100 {
	margin-top: 100px !important;
}
.mb-100 {
	margin-bottom: 100px !important;
}
.fz-20 {
	font-size: 20px !important;
}
.fz-24 {
	font-size: 24px !important;
}
.m-auto {
	margin-left: auto !important;
	margin-right: auto !important;
}
.nrw {
	transform: scaleX(0.97);
	transform-origin: 0 0;	
	/*width: 103%;*/
}


.fx {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;	
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;	
}
.fx-bottom {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;	
}
.fx-center {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;	
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;	
}
.fx-middle {
	display: flex;
	align-items: center;
	flex-direction: column;
	-webkit-justify-content: center;
	justify-content: center;	
}



/* 
カラー
*/
.blue {
	color: #1c1a8a !important;
}
.orange {
	color: #ec6a1e !important;
}
.gray {
	color: #666666 !important;
}
.pink {
	color: #e5004f !important;
}
.red {
	color: #ed2856 !important;
}

/* 
OVER
*/
@keyframes flash {
      0% {
          opacity: 1;
      }

      100% {
          opacity: 0.5;
      }
  }

.over {
	-webkit-transition: 1s ease;
	-moz-transition: 1s ease;
	-ms-transition: 1s ease;
	-o-transition: 1s ease;
	transition: 1s ease;		
}

.over:hover {
	-ms-filter: "alpha(opacity=7)";
	opacity: 0.3;
	-webkit-transition: 0s ease;
	-moz-transition: 0s ease;
	-ms-transition: 0s ease;
	-o-transition: 0s ease;
	transition: 0s ease;	
}


.zoom {
	
}
.zoom:hover {
	-webkit-transform: scale(1.5);
	transform: scale(1.5);	
	-webkit-transition: 0.5s ease;
	-moz-transition: 0.5s ease;
	-ms-transition: 0.5s ease;
	-o-transition: 0.5s ease;
	transition: 0.5s ease;		
}


.underbar {
  width: 0;
  height: 1px;
  background: rgba(34,34,34,0);
  top: 20px;
  position: absolute;
  -webkit-transition: 0.5s ease;
}


/* 
フォント
*/
.serif {
	font-family: ten-mincho, serif;
	font-weight: 400;
	font-style: normal;	
}
.serif-all * {
	font-family: ten-mincho, serif;
	font-weight: 400;
	font-style: normal;		
}
.serif-t {
	font-family: ten-mincho-text, serif;
	font-weight: 400;
	font-style: normal;
}
.serif-t-all * {
	font-family: ten-mincho-text, serif;
	font-weight: 400;
	font-style: normal;
}
.it {
	font-style: italic;	
}


.en {
	font-family: 'Poppins', sans-serif;
}
.en-all * {
	font-family: 'Poppins', sans-serif;
}


/* 
ボタン
*/
.btn {
	margin: 50px auto;
	width: 260px;
	position: relative;
	z-index: 5;
}
.btn-340 {
	width: 340px;
}
.btn a, .btn span {
	line-height: 42px;
	display: block;
	text-align: center;
	color: #fff;
	font-size: 16px;
	font-weight: bold;
	border: 2px solid #1c1a8a;
	text-decoration: none !important;
	position: relative;
	background: #1c1a8a;
	border-radius: 30px;
}
.btn a:hover, .btn span:hover {
	background: white;
	color: #1c1a8a;
}
  /* 20250718追加 */
.btn-primary-blue {
  /* 背景色、文字色、枠線を強制的に設定 */
  background: #38a9eb !important; /* 指定の背景色を強制適用 */
  color: #ffffff !important;      /* 文字色を強制適用 */
  border-color: #38a9eb !important; /* 枠線色を強制適用 */
}

.btn-primary-blue:hover {
  /* ホバー時のスタイルも強制的に設定 */
  background: white !important;     /* ホバー時は白背景を強制適用 */
  color: #38a9eb !important;        /* ホバー時は指定の青文字を強制適用 */
  border-color: #38a9eb !important; /* ホバー時の枠線も青に強制適用 */
}

.btn-350 {
	width: 350px;
}
.btn-350 a, .btn-350 span {
	line-height: 42px;
	display: block;
	text-align: center;
	color: #fff;
	font-size: 24px;
	font-weight: bold;
	border: 2px solid #940000;
	text-decoration: none !important;
	position: relative;
	background: #AA0000;
	border-radius: 30px;
  padding: 20px 0; /* 上下のパディングを追加 */
  cursor: pointer; /* カーソルをポインターに変更 */
}
.btn-350 a:hover, .btn-350 span:hover {
	background: white;
	color: #AA0000;
}

.btns {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: center;
	justify-content: center;	
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;	
}
.btns .btn {
	margin-left: 15px;
	margin-right: 15px;
}

.no-link {
	pointer-events: none;
}

/* 
BG
*/
.bg-gray {
	background-color: #eeeeee;
	padding: 1px 0 1px;
}
.line-r {
	background: url(../img/line-r.png) right top no-repeat;
	background-size: contain;
	width: 100%;
	height: 342px;
	position: absolute;
	right: 0;
	top: 0;
}
.line-l {
	background: url(../img/line-l.png) left top no-repeat;
	background-size: contain;
	width: 100%;
	height: 684px;
	position: absolute;
	left: 0;
	top: 0;
}


/* 
アイコン
*/


/*
ANIMATE
*/
@keyframes fade-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes slide-in-1 {
  0% { transform: translateY(0.7vw); }
  100% { transform: translateY(0); }
} 
@-webkit-keyframes shake {
	from, to {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	5%, 15%, 25%, 35%, 45% {
		-webkit-transform: translate3d(-10px, 0, 0);
		transform: translate3d(-10px, 0, 0);
	}

	10%, 20%, 30%, 40% {
		-webkit-transform: translate3d(10px, 0, 0);
		transform: translate3d(10px, 0, 0);
	}
}

@keyframes shake {
	from, 12% {
		-webkit-transform: translate3d(0, 0, 0);
		transform: translate3d(0, 0, 0);
	}

	2%, 6%, 10% {
		-webkit-transform: translate3d(-10px, 0, 0);
		transform: translate3d(-10px, 0, 0);
	}

	4%, 8% {
		-webkit-transform: translate3d(10px, 0, 0);
		transform: translate3d(10px, 0, 0);
	}
}
@-webkit-keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 30%, 0);
		transform: translate3d(0, 30%, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}

@keyframes fadeInUp {
	from {
		opacity: 0;
		-webkit-transform: translate3d(0, 30%, 0);
		transform: translate3d(0, 30%, 0);
	}

	to {
		opacity: 1;
		-webkit-transform: none;
		transform: none;
	}
}
.list-anim > li {
	opacity: 0;
}
.list-anim > li.anim-start {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: shake;
	animation-name: shake;
	visibility: visible !important;
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
}
.anim-fade-1 {
	opacity: 0;
}
.anim-fade-1.anim-start {
	-webkit-animation-duration: 1s;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: shake;
	animation-name: shake;
	visibility: visible !important;
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
}
.anim-fade-2 {
	opacity: 0;
}
.anim-fade-2.anim-start {
	-webkit-animation-duration: 1;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: shake;
	animation-name: shake;
	visibility: visible !important;
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	-ms-animation-delay: 0.5s;
	-o-animation-delay: 0.5s;
	animation-delay: 0.5s;
}
.anim-fade-3 {
	opacity: 0;
}
.anim-fade-3.anim-start {
	-webkit-animation-duration: 1;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: shake;
	animation-name: shake;
	visibility: visible !important;
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	-ms-animation-delay: 1s;
	-o-animation-delay: 1s;
	animation-delay: 1s;
}
.anim-fade-4 {
	opacity: 0;
}
.anim-fade-4.anim-start {
	-webkit-animation-duration: 1;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: shake;
	animation-name: shake;
	visibility: visible !important;
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
	-webkit-animation-delay: 1.5s;
	-moz-animation-delay: 1.5s;
	-ms-animation-delay: 1.5s;
	-o-animation-delay: 1.5s;
	animation-delay: 1.5s;
}
.anim-fade-5 {
	opacity: 0;
}
.anim-fade-5.anim-start {
	-webkit-animation-duration: 1;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: shake;
	animation-name: shake;
	visibility: visible !important;
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
	-webkit-animation-delay: 2s;
	-moz-animation-delay: 2s;
	-ms-animation-delay: 2s;
	-o-animation-delay: 2s;
	animation-delay: 2s;
}
.anim-fade-6 {
	opacity: 0;
}
.anim-fade-6.anim-start {
	-webkit-animation-duration: 1;
	animation-duration: 1s;
	-webkit-animation-fill-mode: both;
	animation-fill-mode: both;
	-webkit-animation-name: shake;
	animation-name: shake;
	visibility: visible !important;
	-webkit-animation-name: fadeInUp;
	animation-name: fadeInUp;
	-webkit-animation-delay: 2.5s;
	-moz-animation-delay: 2.5s;
	-ms-animation-delay: 2.5s;
	-o-animation-delay: 2.5s;
	animation-delay: 2.5s;
}
.anim-blur-1 {
	opacity: 0;
	transition: 2s;
	-webkit-filter: blur(15px);
	filter: blur(15px);
	transform: scale(1.1);
}
.anim-blur-1.anim-start {
	opacity: 1;
	-webkit-filter: blur(0px);
	filter: blur(0px);
	transform: scale(1);	
}
.anim-blur-2 {
	opacity: 0;
	transition: 2s;
	transition-delay: 0.5s;
	-webkit-filter: blur(15px);
	filter: blur(15px);
	transform: scale(1.1);
}
.anim-blur-2.anim-start {
	opacity: 1;
	-webkit-filter: blur(0px);
	filter: blur(0px);
	transform: scale(1);	
}
.anim-blur-3 {
	opacity: 0;
	transition: 2s;
	transition-delay: 1s;
	-webkit-filter: blur(15px);
	filter: blur(15px);
	transform: scale(1.1);
}
.anim-blur-3.anim-start {
	opacity: 1;
	-webkit-filter: blur(0px);
	filter: blur(0px);
	transform: scale(1);	
}
.anim-blur-4 {
	opacity: 0;
	transition: 2s;
	transition-delay: 1.5s;
	-webkit-filter: blur(15px);
	filter: blur(15px);
	transform: scale(1.1);
}
.anim-blur-4.anim-start {
	opacity: 1;
	-webkit-filter: blur(0px);
	filter: blur(0px);
	transform: scale(1);	
}
.anim-blur-5 {
	opacity: 0;
	transition: 2s;
	transition-delay: 2s;
	-webkit-filter: blur(15px);
	filter: blur(15px);
	transform: scale(1.1);
}
.anim-blur-5.anim-start {
	opacity: 1;
	-webkit-filter: blur(0px);
	filter: blur(0px);
	transform: scale(1);
}
.anim-concept-pic-1 {
	opacity: 0;
	transform: translateX(100%);
}
.anim-concept-pic-1.anim-start {
	opacity: 1;
	transform: translateX(0%);
	transition: 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}
.anim-concept-pic-2 {
	opacity: 0;
	transform: translateX(-100%);
}
.anim-concept-pic-2.anim-start {
	opacity: 1;
	transform: translateX(0%);
	transition: 1s cubic-bezier(0.455, 0.03, 0.515, 0.955);
}

/* 
ボックス
*/
.box-content {
	width: 100%;
	max-width: 1187px;
	padding: 0 80px;
	box-sizing: border-box;
	margin: 0 auto;
	position: relative;
	box-sizing: border-box;
}
.box-1100 {
	width: 1100px;
	margin: 0 auto;
	position: relative;
}
.box-700 {
	width: 700px;
	margin: 0 auto;
	position: relative;
}
.box-720 {
	width: 720px;
	margin: 0 auto;
	position: relative;
}
.box-800 {
	width: 800px;
	margin: 0 auto;
	position: relative;
}
.box-840 {
	width: 840px;
	margin: 0 auto;
	position: relative;
}
.box-900 {
	width: 900px;
	margin: 0 auto;
	position: relative;
}
.box-960 {
	width: 960px;
	margin: 0 auto;
	position: relative;
}
.box-980 {
	width: 980px;
	margin: 0 auto;
	position: relative;
}
.box-1000 {
	width: 1000px;
	margin: 0 auto;
	position: relative;
}
.box-1024 {
	width: 1024px;
	margin: 0 auto;
	position: relative;
}
.box-1040 {
	width: 1040px;
	margin: 0 auto;
	position: relative;
}
.box-1090 {
	width: 1090px;
	margin: 0 auto;
	position: relative;
}
.box-1100 {
	width: 1100px;
	margin: 0 auto;
	position: relative;
}
.box-1200 {
	width: 1200px;
	margin: 0 auto;
	position: relative;
}


/* 
ヘッダー
*/
.header-inner {
	height: 80px;
	box-sizing: border-box;
	padding-top: 18px;
box-shadow: 0px 0px 15px #ddd;
}
.header-logo {
	width: 223px;
	height: 44px;
	margin-left: 78px;

}
.header-logo a {
	display: block;
	background: url(../img/primoposto_webtop_logo.svg) 0 0 no-repeat;
	background-size: contain;
	text-indent: -9999em;
	width: 100%;
	height: 100%;
}
.header-logo:hover {
	opacity: 0.7;
}




/*
GLOBAL NAVI	
*/
.l-nav .menu {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-end;
	justify-content: flex-end;
	flex-wrap: nowrap;
	margin-right: 265px;
}
.l-nav .menu > li {
	margin: 0 17px;
	padding: 20px 0;
	position: relative;
}
.l-nav .menu > li > a {
	display: block;
	color: #333333;
	font-size: 14px;
	line-height: 40px;
	box-sizing: border-box;
	position: relative;

}
.l-nav .menu > li:hover > a, .l-nav .menu > li.is-active > a {
	color: #1d2088;
	border-bottom: 2px solid #1d2088;
	text-decoration: none;
	-webkit-transition: 0.3s ease;
	-moz-transition: 0.3s ease;
	-ms-transition: 0.3s ease;
	-o-transition: 0.3s ease;
	transition: 0.3s ease;
}
.l-nav .menu > li:hover .sub {
	display: block;
	opacity: 1;
	z-index: 90;
	
}
.l-nav .menu .sub {
/* 	box-shadow: 7px 7px 0 0px rgba(0,0,0, 0.2); */
box-shadow: 0px 0px 15px #ddd;
	background: white;
	position: absolute;
	left: 0;
	top: 80px;
	width: 367px;
	box-sizing: border-box;
	animation-duration: 0.5s;
	animation-name: fade-in;
	-moz-animation-duration: 0.5s;
	-moz-animation-name: fade-in;
	-webkit-animation-duration: 0.5s;
	-webkit-animation-name: fade-in;
	padding: 25px;
	display: none;
	opacity: 0;
}
.l-nav .menu .sub.is-active {
	transform: translate(0%);
}
.l-nav .menu .sub .sub-title {
	text-align: left;
	font-size: 14px;
	color: #333333;
	margin-bottom: 15px;
}
.l-nav .menu .sub .sub-menu {
	margin-bottom: 20px;
}
.l-nav .menu .sub .sub-menu:last-child {
	margin-bottom: 0;
}
.l-nav .menu .sub .sub-menu > li {
	line-height: 2em;
	position: relative;
}

.l-nav .menu .sub .sub-menu > li > a {
	display: block;
	color: #666666;
	font-size: 14px;
	padding-left: 20px;
}
.l-nav .menu .sub .sub-menu > li > a:hover {
	color: #1d2088;
}
.l-nav .menu .sub .sub-menu > li > a:before {
	content: "";
	display: block;
	width: 12px;
	height: 1px;
	background: #1d2088;
	position: absolute;
	left: 0;
	top: 17px;
}
.l-nav .nav-contact {
	width: 167px;
	margin: 0;
	position: absolute;
	right: 75px;
	top: 20px;
}
.l-nav .nav-contact a {
	display: block;
	color: white;
	text-align: center;
	font-size: 14px;
	background-color: #1c1a8a;
	line-height: 36px;
	height: 40px;
	border-radius: 30px;
	border: 2px solid #1c1a8a;
	box-sizing: border-box;
}
.l-nav .nav-contact a:hover {
	color: #1c1a8a;
	background: white;
	text-decoration: none;
}
@media all and (max-width: 1160px) {
	.l-nav .menu > li {
		margin: 0 10px;
	}
	.l-nav .menu > li > a {
		font-size: 12px;
	}
}
/*
パンくず
*/
.bread {
	vertical-align: top;
	top: 0;
	width: 100%;
	z-index: 3;
	height: 30px;

	background: #474747;
}
.bread ul {
	line-height: 30px;
	margin: 0 auto;
	padding-left: 15px;
	vertical-align: top;	
}
.bread li {
	display: inline-block;
	font-size: 13px;
	color: #cccccc;
	vertical-align: top;
}
.bread li * {
	font-size: 13px;
	color: #cccccc;
}
.bread li a {
	color: #cccccc !important;
	text-decoration: none;
	display: inline-block;
	vertical-align: top;
}
.bread i {
	padding: 0 5px;
}
.bread li:first-child i {
	
}
.bread .bullet {

}
/* .bread .bullet:before {
	color: white;
	content: "/";
} */
.bread li:after {
	content: "";
	/* 2026/9/21 angle-bread.png(404)-> inline SVG */
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 30'%3E%3Cpath d='M4 10.5L8.5 15L4 19.5' fill='none' stroke='%23cccccc' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center center no-repeat;
	background-size: contain;
	display: inline-block;
	margin: 0 5px;

	width: 12px;
	height: 30px;
}
.bread li:last-child:after {
	content: none;
}

/*
タグ
*/
.tags {
	
}
.tags br {
	display: none;
}
.tags a {
	display: inline-block;
	font-size: 14px;
	color: #222;
	background: white;
	border: 1px solid #cccccc;
	margin-right: 8px;
	margin-bottom: 8px;
	padding: 8px;
}
.tags a:hover {
	text-decoration: none;
	background: #222;
	color: white;
}


/*
サイドバー
*/
.box-side {
	box-shadow: 5px 5px 15px #ddd;
	position: relative;
	padding: 15px;
	box-sizing: border-box;	
	margin-bottom: 30px;
	background: white;
}
.box-side h2 {
	text-align: left;
	font-size: 18px;
	font-weight: bold;		
}
.box-side h2:after {
	content: "";
	display: block;
	width: 40px;
	height: 1px;
	background: #1d2088;
	margin: 15px 0 20px;	
}
.list-side {
	
}
.list-side li {
	line-height: 1.6em;
	position: relative;

}
.list-side li:before {
	content: "●";
	color: #1d2088;
	position: absolute;
	left: 0;
	top: 0px;
	font-size: 12px;
}
.list-side li a {
	padding-left: 20px;	
	display: block;
	
}
.wpp-list {
	
}
.wpp-list li {
	line-height: 1.5em;
	border-bottom: 1px solid #f7f8f8;
	padding: 10px 0 10px;
}
.wpp-list li img {
	width: 100px;
	display: inline;
	float: left;
	margin: 0 1rem 0 0;
	border: none;
}
.side-search .s {
	border: none;
	padding: 0;
	margin: 0;
	background: none;
	border-bottom: 1px solid #1d2088;	
	width: 100%;
	font-size: 18px;
	box-sizing: border-box;
	display: block;
	padding-right: 30px;
}
.side-search button {
	border: none;
	padding: 0;
	margin: 0;
	background: none;	
	color: #1d2088;
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 3;
}

/*
フッター
*/
.page-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 55;
	width: 14px;
}
.footer-top {
	border-bottom: 1px solid #8b9597;
	max-width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}
.footer-nav {
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: space-between;
	justify-content: space-between;	
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;	
}
.footer-nav > li {
	line-height: 60px;
	margin: 0 5px;
}
.footer-nav > li > a {
	color: #8b9597;
	font-size: 12px;
}
.footer-nav > li > a:hover, .footer-nav > li.is-active > a {
	color: white;
}

.footer-logo {
	width: 180px;
	margin: 55px auto 15px;
}

.copyright {
	text-align: center;
	color: #8b9597;
	font-size: 12px;
	padding-bottom: 50px;
}



/*
NEW ENTRY
*/
.list-entry {
	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;	
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.list-entry .entry {
	position: relative;
	width: 29.6%;
	max-width: 350px;
	background: #fff;
	margin-bottom: 40px;
	box-sizing: border-box;
	padding: 25px;
	background: url(../img/entry-top.png) center top no-repeat, url(../img/entry-bottom.png) center bottom no-repeat;
	background-size: 100% auto;
	margin-right: 5.4%;
}
.list-entry .entry:nth-child(3n) {
	margin-right: 0;
}
.list-entry .entry .entry-link {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 3;
}
.list-entry .entry .entry-link:hover + .entry-pic img {
	opacity: 0.7;
}
.list-entry .entry .entry-link:hover + .entry-pic + .entry-content .entry-title {
	text-decoration: underline;
}
.list-entry .entry .entry-pic {
	
}
.list-entry .entry .entry-pic img {
	width: 100%;
	border-radius: 20px;
}

.list-entry .entry .entry-content {
	background-color: #f7f8f8;
	border-radius: 20px;;
	margin-top: 28px;
	padding: 20px;
	position: relative;
}
.list-entry .entry .entry-content:after {
	content: "";
	display: block;
	position: absolute;
	right: 20px;
	bottom: 15px;
	width: 44px;
	height: 44px;
	background: url(../img/section-header-link.png) 0 0 no-repeat;
	background-size: contain;
}
@media all and (max-width: 1050px) {
	.list-entry .entry .entry-content:after {
		position: static;
		margin: 10px auto;
	}
}
.list-entry .entry .entry-content .entry-info {
	margin-bottom: 15px;
}
.list-entry .entry .entry-content .entry-info .entry-cat {
	position: relative;
	z-index: 4;
	display: inline-block;
}
.list-entry .entry .entry-content .entry-info .entry-cat a {
	font-size: 15px;
	color: #222;
}
.list-entry .entry .entry-content .entry-time {
	font-size: 12px;
	color: #999999;
	display: block;
	margin-bottom: 10px;
	/* position: absolute;
	left: 20px;
	bottom: 30px; */
}

.list-entry .entry .entry-content .entry-title {
	font-size: 18px;
	font-weight: bold;
	min-height: 81px;
	color: #1c1a8a;
	line-height: 1.5em;
	margin-bottom: 15px;
	text-align: center;
	display: flex;
	align-items: center;
	flex-direction: column;
	-webkit-justify-content: center;
	justify-content: center;
}
.list-entry .entry .entry-content .entry-text {
	font-size: 14px;
	color: #636363;
	line-height: 1.6em;
	min-height: 66px;
	margin-bottom: 20px;
}
.list-entry .entry .entry-content .entry-text p {
	font-size: 14px;
}

/*
NEW CASE
*/
.list-case {
	position: relative;
	display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;	
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
}
.list-case .case {
	position: relative;
	width: 29.6%;
	max-width: 350px;
	background: #fff;
	margin-bottom: 40px;
	box-sizing: border-box;
	padding: 25px;
	background: url(../img/entry-top.png) center top no-repeat, url(../img/entry-bottom.png) center bottom no-repeat;
	background-size: 100% auto;
	margin-right: 5.4%;
}
.list-case .case:nth-child(3n) {
	margin-right: 0;
}

.list-case .case .case-pic {
	
}
.list-case .case .case-pic img {
	width: 100%;
}
.list-case .case .case-content:before {
	content: "";
	display: block;
	background: #1c1a8a;
	height: 1px;
	width: 60px;
	margin: 0 auto;
}
.list-case .case .case-content {
	padding: 0 10px;
	position: relative;
}
.list-case .case .case-content .case-title {
	font-size: 16px;
	font-weight: normal;
	color: #212121;
	line-height: 1.5em;
	margin-bottom: 15px;
	text-align: center;
	padding-top: 20px;
}
.list-case .case .case-content .case-text {
	font-size: 14px;
	color: #636363;
	line-height: 1.6em;
	min-height: 66px;
	margin-bottom: 20px;
}
.list-case .case .case-content .case-link {
	text-align: center;
}
.list-case .case .case-content .case-link a {
	font-weight: bold;
	font-size: 14px;
}
.list-case .case .case-content .case-link a:hover {
	opacity: 0.7;
	text-decoration: none;
}
.list-case .case .case-content .case-link a:before {
	content: "";
	display: inline-block;
	background: url(../img/case-link.png) 0 0 no-repeat;
	background-size: contain;
	width: 44px;
	height: 44px;
	vertical-align: middle;
	margin-right: 15px;
}
/*
LIST NEWS
*/
.list-news {
	
}
.list-news .news {
	position: relative;
	/* display: -webkit-flex;
	display: flex;
	-webkit-justify-content: flex-start;
	justify-content: flex-start;	
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap; */
	padding: 30px 0 30px;
	/* border-bottom: 1px dotted #cccdcd; */
	background: url(../img/border.png) left bottom repeat-x;
	background-size: 1028px 2px;
}
.list-news .news .news-link {
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: 5;
}
.list-news .news .news-link:hover + .news-pic + .news-content .news-title {
	text-decoration: underline;
}
.list-news .news .news-link:hover + .news-pic img {
	opacity: 0.7;
}
.list-news .news .news-pic {
	width: 300px;
	position: absolute;
	left: 0;
	top: 30px;
}
.list-news .news .news-pic img {
	border-radius: 20px;
}
.list-news .news .news-content {
	padding-left: 330px;
	min-height: 224px;
}
.list-news .news .news-content .news-title {
	font-size: 18px;
	font-weight: bold;
	color: #1c1a8a;
	margin-bottom: 15px;
}
.list-news .news .news-content .news-text {
	line-height: 1.5em;
	margin-bottom: 20px;
}
.list-news .news .news-content .news-text p {
	font-size: 14px;
	color: #636363;
	margin: 0;
}
.list-news .news .news-content .news-time {
	font-size: 12px;
	color: #999999;
}
.list-news .news .news-content .news-link-2 {
	position: absolute;
	right: 0;
	bottom: 30px;
}
.list-news .news .news-content .news-link-2 a {
	font-size: 14px;
	font-weight: bold;
	color: #333333;
	background: url(../img/section-header-link.png) right 0 no-repeat;
	background-size: 44px 44px;
	height: 44px;
	line-height: 44px;
	padding-right: 55px;
	display: block;
	text-decoration: none;
}