@charset "utf-8";

/*------------------------------------------------------------------
/
/	STYLE:PC
/
------------------------------------------------------------------*/
html {}
body {
	margin: 0 auto;
	font-size:100%;
	color: #333;
	line-height: 1.6;
	background:#fff;
}
a {
	color: #777;
	text-decoration: none;
}
a:hover {}
a:visited {}
a:hover {}

/* common
-------------------------------------------------------*/
.sp {display: none;}
.text-center{text-align:center;}
.text-right{text-align:right;}
.text-left{text-align:left;}

.area{width:100%;}
.area-in{
	width:980px;/* 任意の幅 */
	margin: 0 auto;
}

* header:after, * footer:after, * main, * section:after, * article:after, * div:after, * ul:after, * ol:after, * dl:after{
	content: "";
	clear: both;
	display: block;
}

/* header
-------------------------------------------------------*/
#header{}
#header .in{
	width:980px;
	margin: 0 auto;
	padding:10px 0;
}
#header .in h1{
	font-size:12px;
}
#header .branding{}
#header .branding .logo{
	float:left;
}
#header .branding .contact{
	float:right;
}
#header .branding .contact li{
	float:left;
}
.btn-tel {
	padding: 2px 0 2px 44px;
	font-size: 28px;
	font-weight: bold;
	line-height: 1;
	background-image: url(../images/icon_tel.png?0);
	background-repeat: no-repeat;
	background-position: left 2px;
}

/* footer
-------------------------------------------------------*/
#footer{
	border-top:3px solid #0AA7DA;
	padding:30px 0 0 0;
}
#footer .copy{
	color:#fff;
	background:url(../images/bg01.jpg) repeat;
	padding:10px 0;
	text-align:center;
	font-size:10px;
}
#footer ul{
	text-align:center;
}
#footer ul li{
	display:inline-block;
	vertical-align: middle;
}
#footer p{
	font-size:14px;
	text-align:center;
	padding:10px 0 30px 0;
}
#footer .logo{
	padding-bottom:0;
}
.btn-tel2 {
	margin-left: 0;
	padding: 2px 0 0 44px !important;
	font-size: 28px !important;
	font-weight: bold;
	line-height: 1;
	text-align: left !important;
	background-image: url(../images/icon_tel.png?0);
	background-repeat: no-repeat;
	background-position: left 2px;

}

/* visual
-------------------------------------------------------*/
#visual{
	text-align:center;
	background:url(../images/visual_bg.png) repeat-x left bottom #f7f7f7;
}

/*=======================================================
	以下コンテンツのセクションごと
=======================================================*/

/* #area common
-------------------------------------------------------*/
.bg01{
	background:url(../images/bg01.jpg) repeat;
}
.area-contact{
	position:relative;
	margin:0 auto;
	padding:40px 0;
	text-align:center;
}
.area-contact.bar01{
	border-top:3px solid #00A3D9;
}
.area-contact ul{}
.area-contact ul li{
	display:inline-block;
	vertical-align:middle;
}
.aside01{}
.title01{
	background:url(../images/bg01.jpg) repeat;
	text-align:center;
	position:relative;
	margin-bottom:50px;
}
.title01:before{
	content:'';
	position:absolute;
	background:url(../images/arrow01.png) no-repeat center bottom;
	width:78px;
	height:18px;
	bottom:-18px;
	left:0;
	right:0;
	margin:0 auto;
}
.title02{
	border-bottom:3px solid #00A3D9;
	text-align:center;
	margin-bottom:40px;
}
.btn-tel3 {
	padding: 2px 0 2px 60px;
	font-size: 38px;
	font-weight: bold;
	line-height: 1;
	background-image: url(../images/icon_tel2.png?0);
	background-repeat: no-repeat;
	background-position: left 2px;
	text-align: left;
}

/* #area01
-------------------------------------------------------*/
#area01 ul{
	padding:20px 0;
	text-align:center;
}
#area01 ul li{
	display:inline-block;
	vertical-align:middle;
}

/* #area02
-------------------------------------------------------*/
#area02{}
#area02 article{
	margin-bottom:50px;
}
#area02 .box{
	background:#F5F7DD;
	padding:50px 50px 50px 200px;
	box-sizing:border-box;
	position:relative;
}
#area02 .box:before{
	content:'';
	position:absolute;
	background:url(../images/area02_img02.png) no-repeat left bottom;
	width:139px;
	height:179px;
	left:0;
	bottom:0;
}
#area02 .box p{
	font-size:23px;
	line-height:1.58;
}

/* #area03
-------------------------------------------------------*/
#area03{
	background:#f7f7ee;
}
#area03 article{
	padding:60px 0;
	border-bottom:1px solid #00A3D9;
}
#area03 article:first-of-type{
	padding-top:0;
}
#area03 dl{}
#area03 dl dt{
	float:left;
}
#area03 dl dd{
	float:right;
	width:760px;
}
#area03 dl dd h4{
	margin-bottom:20px;
}
#area03 dl dd p{
	font-size:16px;
}

/* #area04
-------------------------------------------------------*/
#area04 article{
	padding:0 0 60px 0;
}

/* #area05
-------------------------------------------------------*/
#area05 article{
	padding:0 0 80px 0;
}
#area05 ul li{
	float:left;
	width:300px;
	padding:20px;
	box-sizing:border-box;
	border:1px solid #0AA7DA;
	margin-right:40px;
}
#area05 ul li:last-of-type{
	margin-right:0;
}
#area05 ul li .text{
	background:#F7F7EE;
	padding:10px;
	box-sizing:border-box;
	border-radius:5px;
}
#area05 .box{
	background:#F5F7DD;
	padding:20px 20px 20px 200px;
	box-sizing:border-box;
	position:relative;
}
#area05 .box:before{
	content:'';
	position:absolute;
	background:url(../images/area05_img04.png) no-repeat left bottom;
	width:151px;
	height:181px;
	left:0;
	bottom:0;
}
#area05 .box p{
	font-size:23px;
}
#area05 .notes {
    margin: 0;
    padding: 35px 0 0;
}
#area05 .notes ul {}
#area05 .notes ul li{
    position: relative;
	width:100%;
    font-size: 14px;
	padding: 2px 2px 2px 28px;
	box-sizing:border-box;
	border:none;
	margin: 0 0 6px;
}
#area05 .notes ul li::before{
    content: "";
    position: absolute;
    top: 9px;
    left: 10px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #bfbfbf;
}

/* #area06
-------------------------------------------------------*/
#area06 article{
	padding-bottom:60px;
}
#area06 dl{
	border:1px solid #D6D6D6;
	border-bottom:5px solid #eee;
	padding:20px;
	box-sizing:border-box;
	border-radius:5px;
	margin-bottom:30px;
}
#area06 dl dt,
#area06 dl dd{
	display:table-cell;
	vertical-align:top;
}
#area06 dl dt{
	padding-right:20px;
}
#area06 dl dd h4{
	color:#00A3D9;
	border-bottom:1px solid #00A3D9;
	font-size:23px;
	margin-bottom:20px;
	padding-bottom:10px;
}
#area06 dl dd h4 span{
	font-size:16px;
}

/* #area07
-------------------------------------------------------*/
#area07 ol li{
	list-style:none;
	padding-bottom:60px;
	position:relative;
	background:url(../images/area07_arrow01.png) no-repeat center 80%;
}
#area07 ol li:last-of-type{
	background:none;
}

/* #area08
-------------------------------------------------------*/
#area08{
	background:url(../images/area08_bg.jpg) no-repeat center center;
	background-size:cover;
	padding:90px 0;
}
#area08 .box{
	padding:20px;
	background:#fff;
	box-sizing:border-box;
	border-radius:5px;
	margin-bottom:20px;
}
#area08 .box dl dt,
#area08 .box dl dd{
	padding:0 0 10px 50px;
}
#area08 .box dl dt{
	color:#3F1F00;
	background:url(../images/area08_q.png) no-repeat left top;
	font-size:23px;
	border-bottom:1px solid #DDC5A9;
	margin-bottom:10px;
}
#area08 .box dl dd{
	background:url(../images/area08_a.png) no-repeat left top;
}

/* #contact/#area09
-------------------------------------------------------*/
#contact{
	padding:0 0 70px 0;
}
#contact .contact-form{}
#contact .contact-form.sent{
	margin-bottom:150px;
}
#contact .contact-form .in{
	border:1px solid #D6D6D6;
	width:100%;
}
#contact .contact-form .in dl{
	display:table;
	width:100%;
}
#contact .contact-form .in dl dt,
#contact .contact-form .in dl dd{
	display:table-cell;
	vertical-align:middle;
	padding:10px;
	box-sizing:border-box;
}
#contact .contact-form .in dl dt{
	background: rgb(255,255,255);
	background: -moz-linear-gradient(top,  rgba(255,255,255,1) 0%, rgba(238,238,238,1) 100%);
	background: -webkit-linear-gradient(top,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
	background: linear-gradient(to bottom,  rgba(255,255,255,1) 0%,rgba(238,238,238,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#eeeeee',GradientType=0 );

	border-bottom:1px solid #D6D6D6;
	border-right:1px solid #D6D6D6;
	color:#3F1F00;
	font-size:16px;
	position:relative;
}
#contact .contact-form .in dl dt:before{
	content:'';
	position:absolute;
	top:0;
	bottom:0;
	right:10px;
	margin:auto 0;
	width:50px;
	height:22px;
}
#contact .contact-form .in dl dt.hissu:before{
	background:url(../images/hissu.png) no-repeat right center;
}
#contact .contact-form .in dl dt.nini:before{
	background:url(../images/nini.png) no-repeat right center;
}
#contact .contact-form .in dl:last-of-type dt{
	border-bottom:none;
}
#contact .contact-form .in dl dd{
	width:760px;
	border-bottom:1px solid #D6D6D6;
}
#contact .contact-form .in dl:last-of-type dd{
	border-bottom:none;
}
#contact .contact-form .form-text01{
	width:510px;
	height:40px;
	border:1px solid #D6D6D6;
	box-sizing: border-box;
	background:#F0F0E1;
}
#contact .contact-form .form-textarea01{
	width:610px;
	height:110px;
	border:1px solid #D6D6D6;
	box-sizing: border-box;
	background:#F0F0E1;
}
#contact .contact-form .contact-btnarea{
	margin-top:30px;
	text-align:center;
}
#contact .contact-form .form-btn{
	width:270px;
	height:60px;
	color:#fff;
	font-size:22px;
	text-align:center;
	line-height:60px;
	border:none;
	border-radius:5px;
}
.form-btn-conf, .form-btn-send{background:#FF9424;}
.form-btn-back{background:#00a2d9;}
#contact .contact-form .contact-caution{
	color:#dd0000;
	margin-bottom:20px;
}
#contact .form-btn-2cols li{
	display:inline-block;
	vertical-align:middle;
	margin-right:10px;
}
#contact .form-btn-2cols li:last-child{margin-right:0;}
#contact .form-sent{
	font-size:16px;
	margin-bottom:100px;
}
#contact .form-sent-message{
	font-size:25px;
	font-weight:bold;
	color:#ff8000;
	margin-bottom:20px;
}


/* #area10
-------------------------------------------------------*/

/* #contact
-------------------------------------------------------*/

/* #area09
-------------------------------------------------------*/
#area09 article{
	padding-bottom:60px;
}
#area09 dl{
	border:1px solid #D6D6D6;
	border-bottom:5px solid #eee;
	padding:20px;
	box-sizing:border-box;
	border-radius:5px;
	margin-bottom:30px;
}
#area09 dl dt,
#area09 dl dd{
	display:table-cell;
	vertical-align:top;
}
#area09 dl dt{
	padding-right:20px;
}
#area09 dl dd h4{
	color:#00A3D9;
	border-bottom:1px solid #00A3D9;
	font-size:23px;
	margin-top:20px;
	margin-bottom:20px;
	padding-bottom:10px;
}
#area09 dl dd h4 span{
	font-size:16px;
}


/* #area9
-------------------------------------------------------*/

#popupOverlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.3);
    z-index: 999;
}
#popupMessage {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 62, 141, 0.9);
    color: #fff;
    padding: 0;
    border-radius: 8px;
    z-index: 1000;

}
#popupMessage p {
    font-size: 26px;
    line-height: 1.7em;
    margin: 1px;
    padding: 1px;
}
#popupMessage .close {
    margin-top: 10px;
    text-align: center;
}
#popupMessage .close span {
    display: inline-block;
    font-size: 20px;
    font-weight: bold;
    margin: 0;
    padding: 5px 10px;
    text-align: center;
    color: #fff;
    width: 300px;
    max-width: calc(100% - 20px);
    border-radius: 26px;
    background: #00c2ff;
}
#popupClose {
    cursor: pointer;
    margin: 0;
    padding: 25px 30px;
}
@media screen and (max-width: 767px) {
    #popupMessage {
        left: 10%;
        transform: translate(-5%, -50%);
    }
    #popupMessage p {
        font-size: 20px;
    }
    #popupMessage .close span {
        font-size: 15px;
        width: calc(100% - 20px);
        max-width: initial;
    }
    #popupClose {
        padding: 30px;
    }
}

/* ======================================================
   FINAL: Footer compact（PC向け／/sp/には影響なし）
   ─ ロゴ・説明画像・CTA・電話のサイズを明示して高さを詰める
   ─ 横並びをflexにして中央寄せ
====================================================== */
:root{
  --f-logo-h: 120px;   /* フッターロゴの高さ */
  --f-desc-h: 26px;   /* 左のグレー説明画像の高さ */
  --f-cta-h: 48px;    /* 右のオレンジCTAの高さ */
  --f-tel-fs: 24px;   /* 電話番号の文字サイズ */
  --f-gap: 20px;      /* 横方向の間隔 */
  --f-pad-y: 12px;    /* フッター上下の余白 */
}

/* 余白を詰める */
#footer{
  padding: var(--f-pad-y) 0 0 0 !important;
  border-top: 3px solid #0AA7DA; /* 既存維持 */
}

/* ロゴを適正サイズに */
#footer .logo img{
  height: var(--f-logo-h) !important;
  width: auto !important;
  display: block !important;
  margin: 0 auto !important;
}

/* 連絡ブロック（説明画像＋電話／CTA）を横並び中央寄せに */
#footer ul{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: var(--f-gap) !important;
  margin: 10px 0 6px !important;
  text-align: center !important;
}
#footer ul li{
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  vertical-align: middle !important;
}
#footer ul li p{ margin: 0 !important; }

/* 左の説明画像 */
#footer ul li:first-child > img{
  height: var(--f-desc-h) !important;
  width: auto !important;
}

/* 電話番号（受話器アイコン付き） */
#footer .btn-tel2{
  padding-left: 36px !important;
  font-size: var(--f-tel-fs) !important;
  line-height: 1.15 !important;
  text-align: left !important;
  background-position: left 2px !important;
}

/* 右のCTA画像 */
#footer ul li:last-child > img{
  height: var(--f-cta-h) !important;
  width: auto !important;
}

/* 住所・コピーライトの行間とサイズを控えめに */
#footer p{
  font-size: 12px !important;
  padding: 6px 0 16px 0 !important;
  text-align: center !important;
}
#footer .copy{
  padding: 8px 0 !important;
  font-size: 11px !important;
  background: url(../images/bg01.jpg) repeat !important; /* 既存維持 */
}


/* ======================================================
   FINAL: Header slim + Logo fixed + Width optimize
   （PC 56px / SP 34px、上下 8px / 6px）
   ※このブロックは必ずファイルの一番下に置く
====================================================== */

/* ヘッダーの厚み＆横幅（中央寄せ+左右16px余白） */
#header .in {
  padding: 8px 0 !important;
  min-height: 0 !important;
  max-width: 980px;
  width: min(980px, calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
}

/* ロゴをピンポイントで固定（HTML: p.logo > a > img[alt="東北ライフ"]） */
#header .branding .logo > a > img[alt="東北ライフ"] {
  height: 104px !important;       /* PC */
  max-height: none !important;
  width: auto !important;
  display: block !important;
}

/* スマホ（注意: このサイトはモバイルで sp/ にリダイレクト） */
@media (max-width: 767px) {
  #header .in { padding: 6px 0 !important; }
  #header .branding .logo > a > img[alt="東北ライフ"] {
    height: 34px !important;     /* SP */
    max-height: none !important; /* 既存の上限があっても無効化 */
  }
}
/* ===== Header: PC104px / SP34px（最終） ===== */
:root{
  --logo-h-pc: 104px;   /* ←ロゴ高さ（PC） */
  --logo-h-sp: 34px;    /* ←このPCページでは使われないが念のため */
  --desc-h-pc: 26px;    /* 左のグレー説明画像の高さ */
  --cta-h-pc: 46px;     /* 右のオレンジCTAの高さ */
  --tel-fs-pc: 26px;    /* 電話番号の文字サイズ */
  --pad-y-pc: 8px;      /* ヘッダー上下余白 */
}

/* ヘッダー幅を中央寄せ（最大980px） */
#header .in{
  padding: var(--pad-y-pc) 0 !important;
  min-height: 0 !important;
  max-width: 980px;
  width: min(980px, calc(100% - 32px));
  margin-left: auto;
  margin-right: auto;
}

/* 横並びレイアウト */
#header .branding{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
#header .branding .logo,
#header .branding .contact{ float: none !important; }

/* ロゴだけをピンポイント指定 */
#header .branding .logo > a > img[src$="header_logo.png"][alt="東北ライフ"]{
  height: var(--logo-h-pc) !important;
  width: auto !important;
  max-height: none !important;
  display: block !important;
}

/* 連絡先側の並びとサイズ調整 */
#header .branding .contact{ display:flex; align-items:center; gap:12px; }
#header .branding .contact li{ display:flex; align-items:center; gap:8px; }
#header .branding .contact li p{ margin:0; }

/* 左のグレー説明画像 */
#header .branding .contact li:first-child img{
  height: var(--desc-h-pc) !important;
  width: auto !important;
}

/* 電話番号（受話器アイコン背景のp.btn-tel） */
#header .branding .contact .btn-tel{
  font-size: var(--tel-fs-pc) !important;
  line-height: 1.1 !important;
  padding-left: 36px !important;
}

/* 右のオレンジCTA画像 */
#header .branding .contact li:last-child img{
  height: var(--cta-h-pc) !important;
  width: auto !important;
}

/* 参考：SPは /sp/ 側で同様対応。ここでは念のため */
@media (max-width:767px){
  #header .in{ padding: 6px 0 !important; }
  #header .branding .logo > a > img[src$="header_logo.png"][alt="東北ライフ"]{
    height: var(--logo-h-sp) !important;
  }
}

.agree-checkarea {border: 1px #ccc dashed;padding: 1em;margin-top: 1em;}
.agree-checkarea p {font-size: 13px;color: #333333;margin-bottom: 8px;}
.ninni {display: inline-block; color: #fff; font-size: 12px; letter-spacing: 0.07em; padding: 3px 10px;background-color: #00a2d9;border-radius: 3px;}