reset style
==================================================== */
@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@400;500;600;700;800&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400;1,500;1,600;1,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Belleza&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");


.ftCg {font-family: 'Cormorant Garamond', serif;}

.cus{
  padding: 90px 0;
  position: relative;
}

.bgText{
  writing-mode: vertical-lr;
  color: rgba(0,42,95,0.05);
  font-size: 150px;
  font-size: 15rem;
  font-family: 'Cormorant Garamond', serif;
  font-weight: 600;
}

.ex,
.in{
  display: flex;
  justify-content: space-between;
}

.ex{
  margin-bottom: 70px;
}

.in .imWrap{
  order: 1;
}

.in .bgText{
  order: 2;
}

.ex .bgText,
.in .bgText{
  width: 20%;
}

.ex .imgWrap,
.in .imgWrap{
  display: flex;
  justify-content: space-between;
  width: 80%
} 

.ex .imgWrap > div,
.in .imgWrap > div{
  width: 58%;
}

.ex .imgWrap > div figure:nth-of-type(1),
.in .imgWrap > div figure:nth-of-type(1){
  margin: 0 0 8%;
}

.ex .imgWrap > div figure:nth-of-type(2),
.in .imgWrap > div figure:nth-of-type(2){
  margin: 0;
  width: 80%;
}

.ex .imgWrap > div figure:nth-of-type(2){
  margin-left: 20%;
}  

.ex .imgWrap > figure,
.in .imgWrap > figure{
  margin: 7% 0 0 0;
  width: 37%;
}

.ex .imgWrap figure img,
.in .imgWrap figure img{
  width: 100%;
}

.support{
  padding: 170px 0 140px;
  max-width: 1600px;
  width: 100%;
}

.mainImg{
  position: relative;
}

.mainImg .inner {
    position: absolute;
    left: 10%;
    top: 50%;
    transform: translateY(-50%);
    width: 50%;
    z-index: 2;
    margin: 0 auto;
    max-width: 600px;
}

.mainImg .textArea .head{
  font-family: "Shippori Mincho B1", serif;
  font-size: 36px;
  font-size: 3.6rem;
  margin-bottom: 30px;
  color: #fff;
}

.mainImg .textArea .txt-basic{
  color: #fff;
}

.support:after{
  content: "";
  position: absolute;
  right: 5%;
  top: 0;
  width: 40%;
  height: 600px;
  background: url(../../../img/index/about-bg.png) repeat;
  z-index: -1;
}

.support .flexBox.top{
  margin-bottom: 90px;
}

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

.support .flexBox.top .img{
  order: 2;
  width: 68%;
  margin-right: -20%;
}

.support .flexBox.top .detail{
  order: 1;
  width: 48%;
}

.support .flexBox.btm li{
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 70px;
  width: 48%;
}

.support .flexBox.btm li .img{
  width: 40%;
}

.support .flexBox.btm li .img img{
  width: 100%;
}

.support .flexBox.btm li .detail{
  width: 56%;
}

.support .flexBox.btm li .detail .border{
  margin-bottom: 25px;
}

.support .flexBox.btm li .detail .border span{
  font-size: 12px;
  font-size: 1.2rem;
  font-family: 'Cormorant Garamond', serif;
  position: relative;
  padding-left: 55px;
}

.support .flexBox.btm li .detail .border span:before{
  content: "";
  position: absolute;
  width: 50px;
  top: 50%;
  left: 0;
  background: #dddddd;
  height: 1px;
}

.support .flexBox.btm li .detail .ttl{
  font-size: 21px;
  font-size: 2.1rem;
  margin-bottom: 40px;
}

@media screen and (max-width: 1480px){

.support {
    padding: 100px 0 70px;
}
}

@media screen and (max-width: 1190px){
.bgText {
    font-size: 10rem;
}

.support .flexBox.btm li {
    margin-bottom: 30px;
}

.support .flexBox.btm li .detail .border {
    margin-bottom: 20px;
}

.support .flexBox.btm li .detail .ttl {
    font-size: 18px;
    font-size: 1.8rem;
    margin-bottom: 20px;
}
}

@media screen and (max-width: 834px){

.cus {
    padding: 40px 0;
}

.ex, 
.in {
    display: block;
}

.ex {
    margin-bottom: 30px;
}

.ex .bgText, 
.in .bgText {
    width: 100%;
    writing-mode: horizontal-tb;
    font-size: 3rem;
    margin-bottom: 10px;
    text-align: center;
}

.ex .imgWrap, 
.in .imgWrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.mainImg {
    position: inherit;
}

.mainImg .img{
  margin-bottom: 25px;
}

.mainImg .inner {
    position: inherit;
    left: 0;
    top: 0;
    transform: inherit;
    width: 90%;
}

.mainImg .textArea .head {
    font-family: "Shippori Mincho B1", serif;
    font-size: 36px;
    font-size: 2.0rem;
    margin-bottom: 25px;
    color: #000;
    text-align: center;
}

.mainImg .textArea .txt-basic {
    color: #000;
}

.support {
    padding: 40px 0 25px;
}

.support .flexBox {
    display: block;
}

.support .flexBox.top {
    margin-bottom: 40px;
}

.support .flexBox.top .img {
    order: 2;
    width: 100%;
    margin: 0 0 25px;
}

.support .flexBox.top .detail {
    width: 100%;
}

.support .flexBox.btm li {
    align-items: flex-start;
    margin-bottom: 25px;
    width: 100%;
}

.support .flexBox.btm li .detail .border {
    margin-bottom: 5px;
}

.support .flexBox.btm li .detail .border span {
    font-size: 1.0rem;
    padding-left: 35px;
}

.support .flexBox.btm li .detail .ttl {
    font-size: 1.6rem;
    margin-bottom: 10px;
}

.support .flexBox.btm li .detail .border span:before {
    width: 30px;
}
}