@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@200..900&display=swap');
@import url("https://use.typekit.net/ywf3omi.css");
@import url("https://use.typekit.net/psf3zsd.css");

#beltbnr {
   display: none;
}
.h_bar{
   display: none;
}
/*/▲帯バナー削除用CSS▲//*/
#mainArea {
    letter-spacing: 0;
    line-height: 2;
    overflow: hidden;
    margin: 0 auto;
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    font-style: normal;
    font-size: 1.2rem;
}
#mainArea div {
    font-family: "Noto Serif JP", serif;
}
#mainArea p {
    font-family: "Noto Serif JP", serif;
}
.bnr_ {
    width: 900px;
    margin: 0 auto;
    display: block;
}
section {
    width: 860px;
    margin: 7em auto 10em;	
	position: relative;	
}
.f-f {
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    font-style: normal;
    line-height: 2.1rem;
    font-size: 1.25rem;
    letter-spacing: 0.5px;		
}
.under_ {
    margin: 0 auto 4% auto;
	clear: both;
}
.back-b {
}
.lead {
    width: 100%;
    margin: 0 auto -2em;
    position: relative;
}
.lead p {
	padding: 4em 0 2em 0;
    font-family: "Noto Serif JP", serif;
	font-size: 1.35rem;
	font-weight: 400;	
    font-style: normal;    
	line-height: 1.9;
    text-align: center;
}

/*///*/
h3 {
    font-size: 1.7rem;	
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    font-style: normal;	
	letter-spacing: 1px;
	line-height: 1.5;
    margin: 1% 0 2% 0;
    color: #0f0f0f;
}
.main_item {
    width: 600px;
    margin: 0 auto;
    position: relative;
}
.main_item .main_img {
    width: 900px;
    margin: 0 auto;
    position: relative;
}
.main_item .main_img img {
    width: 60%;
    margin: 0 auto;
    display: block;
}

/*///*/
.note {
  width: 100%;
  margin: 0 auto;
  padding: 3% 5%;
  background-color: #f1f3e9;
}
.line_main {
  position: relative;
  margin-bottom: 30px; 
  padding-bottom: 50px; 
  border-bottom: 1px solid #000; 
}
.line {
  position: relative;
  margin-bottom: 0; 
  padding-bottom: 25px; 
  border-bottom: 1px solid #000; 
}
.line:last-child {
  border: none;
}
.caption_ttl {
  font-family: "courier-std", monospace !important;
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #333;
  margin: 0;
  position: absolute;
  top: 10px;
}
.caption_ttl span {
  font-size: 1.4rem;
}
.caption {
  font-family: "courier-std", monospace !important;
  font-size: 1.4rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #333;
  margin: 0;
  position: absolute;
}
.letter_body_ttl {
  font-family: "Noto Serif JP", serif;
  font-size: 1.5rem;
  line-height: 2.3;
  color: #595187;
  margin: 0;
  position: relative;
  top: 42px; 
}
.letter_body {
  font-family: "adobe-handwriting-ernie", sans-serif !important;
  font-size: 1.7rem;
  line-height: 1.8;
  color: #595187;
  margin: 0;
  position: relative;
  top: 13px;
}
.body_1 { left: 140px; }
.body_2 { left: 110px; }
.body_3 { left: 90px; }
.body_4 { left: 120px; }


.coordinate {
    width: 900px;
    margin: 5% auto 0 auto;
}
.coordinate .sub_ttl {
    width: 65%;
    margin: 16% auto 0 auto;
}
.coordinate .sub_ttl img {
    width: 42%;
    display: block;
    margin: 0 auto;
}
.coordinate .sub_ttl p.top {
  font-family: "Noto Serif JP", serif;
  font-size: 1.8rem;
  text-align: center;
  margin: 0 0 -1% 0;    
}
.coordinate .sub_ttl p.under {
  font-family: "Noto Serif JP", serif;
  font-size: 2rem;
  text-align: center;
  margin: -4% 0 0 0;     
}
.coordinate .sub_ttl p.under b {
  font-family: "Noto Serif JP", serif;
  font-size: 4rem;
  vertical-align: sub;
  padding-right: 1%;
  font-style: italic;
}

.coordinate .top,
.coordinate .under {
  opacity: 0;
  transition: opacity 0.6s ease, transform 0.6s ease;
}
.coordinate .top {
  transform: translateY(30px);
}
.coordinate .under {
  transform: translateY(-30px);
}
.coordinate.show .top,
.coordinate.show .under {
  opacity: 1;
}
.coordinate.show .top {
  transform: translateY(0);
}
.coordinate.show .under {
  transform: translateY(0);
}

p.coord_ttl,
p.coord_ttl_2,
p.coord_ttl_3 {
  font-family: "adobe-handwriting-ernie", sans-serif !important;
  font-size: 1.8rem;
  font-weight: 400;
  line-height: 1.5;
  color: #595187;    
}
p.coord_ttl b,
p.coord_ttl_2 b,
p.coord_ttl_3 b {
  font-family: "adobe-handwriting-ernie", sans-serif !important;
  font-size: 2.3rem;
  font-weight: 600;
  color: #595187;
  margin: 0 0 0 24%;    
}

.ttl-anim {
  display: inline-block;
  opacity: 0;
  clip-path: inset(0 100% 0 0); 
  transition: 
    opacity 0.8s ease,
    clip-path 1.0s ease;
}
.ttl-anim.show {
  opacity: 1;
  clip-path: inset(0 0 0 0);
}


.other {
    width: 900px;
    margin: 7% auto 0 auto;
    background-color: #e4ecf2;
    border: #67351c 1px solid;
}
.other .other_img {
    width: 55%;
    display: inline-block;
    vertical-align: middle;
    margin: 0;
    position: relative;
}
.other .item_Text {
    width: 345px;
    vertical-align: middle;
    display: inline-block;
    margin: 0 0 0 3% !important;
    padding: 0;
}
.other .item_Text h3 {
    font-size: 1.7rem;	
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    font-style: normal;	
	letter-spacing: 1px;
	line-height: 1.5;
    margin: 1% 0 2% 0;
    color: #67351c;
}
.other .item_Text .comment_ {
	font-size: 1.3rem;
	font-weight: 400;	
	line-height: 2.0;
    margin: 1.3em auto 2em auto;
    color: #67351c;    
}
.other .item_Text .creditArea p.f-f {
    text-align: center;
    margin-bottom: 3%;
    color: #67351c;      
}


/*///*/
.comment_ {
	font-size: 1.3rem;
	font-weight: 400;	
	line-height: 2.0;
    margin: 1.3em auto 2em auto;
}

/*///*/
.creditArea {
	padding: 0;
	width: 100%;
    margin-top: 6%;
}
.creditArea p.txt {
    width: 80%;
    padding: 0;
	height: 45px;
}
.creditArea .btn {
	width: 100%;
    margin: 0 auto;
}
.creditArea p.f-f {
    text-align: center;
    margin-bottom: 3%;
}
.creditArea p.f-t {
    text-align: left;
    margin-bottom: 0;
}
.main_creditArea {
	padding: 0;
}
.main_creditArea table {
	width: 100%;
}
.main_creditArea table tr {
	padding-bottom: 5%;
}
.main_creditArea table td.txt {
    width: 80%;
    padding: 0;
	height: 45px;
}
.main_creditArea table td.btn {
	width: 20%;
}

/*////*/
.button_crdit {
    width: 73%;
    display: inline-block;
    vertical-align: middle;
    line-height: 1.7;
    font-size: 1.2rem;
}
.button_main {
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    font-style: normal;	
    display: block;
    width: 100%;
    height: 35px;
    line-height: 32px;
    border: 1.2px solid #0f0f0f;
    background: #0f0f0f;
    text-align: center;
    transition: 1s;
    vertical-align: middle;
    color: #fff;
    font-size: 1.25rem;
    letter-spacing: 1px;
    text-decoration: none;
	margin: 0 auto;
}
.button_main:hover {
    background: none;
    border: 1.2px solid #0f0f0f;
    color: #0f0f0f !important;
    transition: .3s;
}
.button_main_bro {
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    font-style: normal;	
    display: block;
    width: 100%;
    height: 35px;
    line-height: 32px;
    border: 1.2px solid #67351c;
    background: #67351c;
    text-align: center;
    transition: 1s;
    vertical-align: middle;
    color: #fff;
    font-size: 1.25rem;
    letter-spacing: 1px;
    text-decoration: none;
	margin: 0 auto;
}
.button_main_bro:hover {
    background: none;
    border: 1.2px solid #67351c;
    color: #67351c !important;
    transition: .3s;
}
.button_bl {
    font-family: "Noto Serif JP", serif;
    font-weight: 400;
    font-style: normal;	
    display: block;
    width: 90%;
    height: 35px;
    line-height: 32px;
    border-radius: 50%;
    border: 1.2px solid #0f0f0f;
    background: #0f0f0f;
    text-align: center;
    transition: 1s;
    vertical-align: middle;
    color: #fff;
    font-size: 1.2rem;
    letter-spacing: 1px;
    text-decoration: none;
	margin: 0 auto;
}
.button_bl:hover {
    background: none;
    border: 1.2px solid #0f0f0f;
    color: #0f0f0f !important;
    transition: .3s;
}

/*////*/
.button_styling {
    font-family: "Noto Serif JP", serif;
    font-weight: 400;    
    width: 600px;
    height: 46px;
    border: solid 1.2px #202020;
    background: none;
    text-align: center;
    transition: 1s;
    vertical-align: middle;
    display: block;
    color: #202020;
    line-height: 44px;
    font-size: 1.35rem;
    letter-spacing: 1px;
    font-weight: 400;
    text-decoration: none;
    margin: 0 auto;
}
.button_styling:hover {
    background: #0f0f0f;
    border: solid 1.2px #202020;
    color: #fff !important;
    transition: .3s;
}
.button_all {
    font-family: "Noto Serif JP", serif;
    font-weight: 400;    
    width: 600px;
    height: 46px;
    border: solid 1.2px #202020;
    background: #202020;
    text-align: center;
    transition: 1s;
    vertical-align: middle;
    display: block;
    color: #fff;
    line-height: 44px;
    font-size: 1.35rem;
    letter-spacing: 1px;
    font-weight: 400;
    text-decoration: none;
    margin: 0 auto;
}
.button_all:hover {
    background: none;
    border: solid 1.2px #202020;
    color: #202020 !important;
    transition: .3s;
}

/*////*/
.fade {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.5s, transform 1s;
}
.fade.active {
  opacity: 1;
  transform: translateY(0px);
}
.scrollin {
    opacity: 1 !important;
    transform: translate(0, 0) !important;
}

.item_1 {
	position: relative;
    padding: 0 0 4% 0;
	width: 100%;
    margin: 8% auto 0 auto;
}
.item_1 .item_Text {
    margin: 7% auto;
}
.item_1 .coordinate .coord_ttl {
    position: absolute;
    z-index: 10;
    top: 12%;
    width: 30%;      
    letter-spacing: normal;
    padding: 0.5em 0.1em;     
    overflow: visible;
}
.item_1 .coordinate .coord_ttl_2 {
    position: absolute;
    z-index: 10;
    top: 12%;
    left: 1%;
    width: 36%;       
    letter-spacing: normal;
    padding: 0.5em 0.1em;    
    overflow: visible;
}
.item_1 .coordinate .ld_img,
.item_2 .coordinate .ld_img {
    width: 430px;
    display: inline-block;
    vertical-align: middle;
    margin: 0 0 0 4%;
    position: relative;
}
.item_1 .coordinate .item_Text,
.item_2 .coordinate .item_Text {
    width: 370px;
    vertical-align: middle;
    display: inline-block;
    margin: 10% 0 0 3%;
	padding: 0;
}
.item_1 .coordinate .item_Text_2,
.item_2 .coordinate .item_Text_2 {
    width: 370px;
    vertical-align: middle;
    display: inline-block;
    margin: 0 0 0 5%;
	padding: 0;
}

.item_2 {
	position: relative;
    padding: 0 0 4% 0;
	width: 100%;
    margin: 6% auto 0 auto;
}
.item_2 .item_Text {
    margin: 7% auto;
}
.item_2 .coordinate .coord_ttl {
    position: absolute;
    z-index: 10;
    top: 8%;
    left: 56%;
    width: 40%;    
    letter-spacing: normal;
    padding: 0.5em 0.1em;     
    overflow: visible;
}
.item_2 .coordinate .coord_ttl_2 {
    position: absolute;
    z-index: 10;
    top: 8%;
    left: -3%;
    width: 40%;
    letter-spacing: normal;
    padding: 0.5em 0.1em; 
    overflow: visible;
}
.item_2 .coordinate .coord_ttl_3 {
    position: absolute;
    z-index: 10;
    top: 8%;
    left: 69%;
    width: 40%;
    letter-spacing: normal;
    padding: 0.5em 0.1em; 
    overflow: visible;
}

.styling {
	position: relative;
    padding: 0 0 2% 0;
	width: 1000px;
    margin: 7% auto 0 auto;
    text-align: center;
}
.styling h5 {
    font-size: 2rem;
    font-family: 'Times New Roman', Times, 'serif' !important;
    font-weight: 400;
    font-style: normal;	
	letter-spacing: 0.8px;
	line-height: 1.2;
	display: inline-block;
    margin-bottom: 2%;
}