@charset "utf-8";
/*common*/
html {
	scroll-behavior: smooth;
}
body {
	font-family: "Helvetica Neue", "Helvetica", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Arial", "Yu Gothic", "Meiryo", sans-serif;
}
.sp_item {
	display: none;
}
.flex {
	display: flex;
}
.flex3 {
	display: flex;
	justify-content: space-between;
}
h2 {
	font-size: 2em;
	line-height: 1.4em;
	font-weight: bold;
}
h3 {
	font-size: 1.5em;
	line-height: 1.4em;
	font-weight: bold;
}
.header-logo {
	display: flex;
	justify-content: space-between;
}
.header-logo h1 {
	font-size: 1.4em;
}
.read {
	font-size: 1.3em;
	font-weight: bold;
	margin-top: 2em;
	margin-bottom: 2em;
}
.read2 {
	font-size: 1.4em;
  font-weight: bold;
  margin-top: 2.5em;
  margin-bottom: 1.5em;
  text-align: center;
}
.title-s1 {
	display: flex;
	color: #fff;
	background-image: url("../images/line-7.jpg");
	background-position: left top;
	background-repeat: no-repeat;
	padding-top: 7px;
}
.title-s1 .s1_icon {
	width: 5%;
	text-align: left;
}
.title-s1 .s1_tx1 {
	font-size: 1em;
	width: 45%;
	text-align: left;
}
.title-s1 .s1_tx2 {
	font-size: 1em;
	width: 45%;
	text-align: right;
}
.case01 h2,
.flow h2 {
	font-size: 2em;
	background-color: #C1D8F0;
	padding: 0.3em;
	width: 100%;
	margin-top: 3em;
	margin-bottom: 1em;
	text-align: center;
}
.flow img {
	margin-top: 0.5em;
	margin-bottom: 2em;
}
.case01 .nb02 {
	font-size: 5em;
	text-align: center;
	color: #13399B;
	font-weight: bold;
}
.case01 h3 {
	font-size: 2.2em;
	text-align: center;
	margin-bottom: 1em;
}
.case01 h4 {
	font-size: 1.7em;
	text-align: center;
	margin-bottom: 1em;
}
.cv_box {
	background-color: #606060;
	background-image: url("../images/ctr-back.webp");
	background-position: center top;
	background-repeat: no-repeat;
	background-size: cover;
	padding-top: 60px;
  padding-bottom: 40px;
	margin-top: 4em;
}
.cv_box h3 {
	text-align: center;
	color: #fff;
	font-size: 1.8em;
}
.cv_box .cv_bt a {
	color: #fff;
	text-align: center;
	border: solid 2px #fff;
	border-radius: 40px;
	padding-top: 10px;
	padding-bottom: 10px;
	width: 40%;
	margin-right: auto;
	margin-left: auto;
	margin-top: 1.5em;
	display: block;
	font-weight: bold;
	font-size: 1.5em;
	transition: background 0.5s;
}
.cv_box .cv_bt a:hover {
	background-color: #1F1F1F;
	text-decoration: none;
}
.cap {
	font-size: 0.8em;
}
.cont-box-w {
	background-color: #fff;
	padding-top: 3em;
	padding-bottom: 2em;
	padding-left: 2em;
  padding-right: 2em;
}
.c-item {
	text-align: center;
}
.mt40 {
margin-top: 40px;	
}
.cf_footer {
	margin-bottom: 10px;
}
.t-blue {
	color: #13399B;
}
#page_top{
  width: 50px;
  height: 50px;
  position: fixed;
  right: 20px;
  bottom: 370px;
  background: #ef3f98;
  opacity: 0.6;
  border-radius: 50%;
}
#page_top a{
  position: relative;
  display: block;
  width: 50px;
  height: 50px;
  text-decoration: none;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f106';
  font-size: 25px;
  color: #fff;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -10px;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
  text-align: center;
}
@media only screen and (max-width: 995px) {
.cv_box .cv_bt a {
	width: 60%;
}
}
@media only screen and (max-width: 768px) {
	.pc_item {
		display: none;
	}
	.sp_item {
		display: inherit;
	}
	h2 {
	font-size: 1.3em;
}
h3 {
	font-size: 1.1em;
}
	.flex3 {
	display: inherit;
	}
	.title-s1 .s1_icon {
	width: 12%;
}
.title-s1 .s1_tx1 {
	width: 43%;
}
.title-s1 .s1_tx2 {
	width: 35%;
	font-size: 0.8em;
}
	.read {
	font-size: 1.1em;
		text-align: left;
	}
	.read2 {
	font-size: 1.1em;
		text-align: left;
	}
	.cv_box h3 {
  font-size: 1.3em;
}
	.cv_box .cv_bt a {
		width: 90%;
		font-size: 1.2em;
	}
	#page_top{
  bottom: 20px;
	}
}

/*fv*/
.fv-back {
	background-image: url("../images/web-fv-img5.webp");
	background-size: cover;
	overflow: hidden;
	background-position: center top;
}
.header-logo {
	padding-top: 10px;
	padding-left: 10px;
	padding-right: 10px;
}
.fv-logo {
	text-align: center;
	margin-top: 3px;
  padding-top: 40px;
}
.fv-logo img {
	width: 16%;
}
.fv_box .head-copy {
	font-size: 40px;
	color: #2B2B2B;
  font-weight: bold;
  text-align: center;
  line-height: 1.3em;
  margin-top: 0.5em;
	margin-bottom: 0.8em;
}
.head-copy2{
	font-size: 27px;
	color: #545454;
	text-align: center;
}
.fv_box h1 img {
	width: 100%;
	max-width: 758px ;
	margin-left: auto;
	margin-right: auto;
	display: block;
}
.header-cv a {
	font-size: 24px;
	background-color: #606060;
	font-weight: bold;
	text-align: center;
	padding: 0.5em;
	color: #fff;
	border: solid 0px;
	border-radius: 12.4px;
  display: block;
  margin-right: auto;
  margin-left: auto;
  width: 25.2%;
  margin-bottom: 50px;
  transition: background 0.5s;
}
.header-cv a:hover {
	background-color: #1E1E1E;
	text-decoration: none;
}
.fv-menu ul {
	display: flex;
	justify-content: center;
	padding-left: 0px;
}
.fv-menu li {
	list-style: none;
}
.fv_box .crm-img {
	background-image: url("../images/main-img.png");
	background-repeat: no-repeat;
	background-position: center top;
	padding-top: 120px;
  margin-top: 30px;
}
.cap-r {
	font-size: 0.8em;
	text-align: right;
	margin-top: -30px;
}

/*　logoスライド1枚版　*/
.loop_wrap {
  display: flex;
    width: 290vw;
    height: 135px;
    overflow: hidden;
    margin-top: 30px;
    margin-bottom: 50px;
}
.logo_banner_box {
	margin: 0 calc(50% - 50vw);
    width: 99vw;
    position: relative;
	overflow: hidden;
}
.read1 p {
	font-size: 1.7em;
  text-align: center;
  margin-top: 1.5em;
  font-weight: bold;
}

.loop_wrap img {
  width: auto;
  height: 100%;
}
@keyframes loop {
  0% {
    transform: translateX(100%);
  }
  to {
    transform: translateX(-100%);
  }
}

@keyframes loop2 {
  0% {
    transform: translateX(0);
  }
  to {
    transform: translateX(-200%);
  }
}
.loop_wrap img:first-child {
  animation: loop 100s -50s linear infinite;
}

.loop_wrap img:last-child {
  animation: loop2 100s linear infinite;
}
@media only screen and (max-width: 1150px) {
	.header-cv a {
		width: 58%;
	}
}
@media only screen and (max-width: 768px) {
	.loop_wrap {
    width: 432vw;
		margin-top: 15px;
    margin-bottom: 25px;
		height: 100px;
	}
	.fv_box .head-copy {
  font-size: 26px;
	}
	.head-copy2 {
  font-size: 15px;
	}
	.fv_box h1 img {
		padding-left: 10px;
		padding-right: 10px;
	}
	.fv_box .crm-img {
		margin-top: 20px;
  background-size: 170%;
}
	.header-cv a {
    margin-top: 0px;
    font-size: 21px;
	}
	.fv-menu {
		margin-top: -55px;
	}
	.fv-menu ul {
  padding-left: 0px;
}
.fv-menu-sp1 li img {
width: 100%;
}
	.fv-menu-sp2 li img {
width: 58%;
}
	.fv-menu-sp2 ul {
		display: flex;
		justify-content: center;
		padding-left: 0px;
	}
	.fv-menu-sp2 li {
		list-style: none;
		margin-right: -82px;
	}
	.read1 p {
  font-size: 1em;
  text-align: left;
}
}
@media only screen and (max-width: 483px) {
	.header-cv a {
		width: 86%;
	}
	.header-logo h1 {
    font-size: 1.2em;
}
	.fv-logo img {
    width: 30%;
}
	.fv_box .head-copy {
        font-size: 20px;
    }
	.header-cv a {
        margin-top: 0px;
        font-size: 20px;
    }
	.read1 p {
    font-size: 1em;
    text-align: left;
    margin-top: 1em;
    font-weight: bold;
}
	.cap-r {
    margin-top: -20px;
}
	.prologue {
    margin-top: 3em;
}
}
/*prologue*/
.prologue {
	margin-top: 4em;
}
.prologue .copy02 {
	text-align: center;
	margin-bottom: 1.5em;
}
.pg01 {
	width: 32%;
	padding: 1em;
	background-image: url("../images/prologue_back.png");
	background-repeat: repeat-x;
	background-position: top -28px left 0px ;
}
.prologue .pg01 h3 {
	text-align: center;
	color: #fff;
	background-color: #13399B;
  padding: 0.8em;
}
.prologue p {
	margin-top: 1.5em;
}
.arrow1 {
	text-align: center;
	margin-top: 2em;
}
.prologue .read10 {
	color: #C71528;
	font-size: 1.2em;
}
@media only screen and (max-width: 768px) {
	.pg01 {
	width: 100%;
		margin-bottom: 1.5em;
    padding-bottom: 0em;
    background-position: top -45px left 0px;
	}
	.prologue .read10 {
  font-size: 1em;
}
	 .prologue img {
    width: 30%;
    height: 80%;
  }
	.arrow1 {
  text-align: center;
  margin-top: 0em;
}
}

/*service*/
.service {
	background-color: #13399B;
	margin-top: 4em;
	padding-top: 4em;
	padding-bottom: 3em;
}
.service h2 {
	text-align: center;
	margin-bottom: 2em;
	color: #fff;
	font-size: 2.3em;
}
.service .tx-nb1,
.service .nb01 {
	font-size: 2.8em;
	color: #FCEFCE;
}
.service .nb01 {
  margin-bottom: -0.2em;
  display: block;
}
.service .flex {
	margin-top: 3em;
	margin-bottom: 7em;
}
.service .pt-img {
	margin-top: 3.5em;
	margin-bottom: 6em;
}
.service0,.service01,.service02,
.service03,.service04,.service05 {
	width: 28%;
}
.service .point01,.service .point03 {
	width: 45%;
	background-color: #DDDDDD;
	border: solid 0px;
	border-radius: 27px;
	padding: 1em;
	text-align: center;
  font-size: 1.5em;
  padding-top: 1.8em;
  padding-bottom: 1.8em;
  line-height: 2em;
}
.service .point02 {
	width: 10%;
	text-align: center;
	padding-top: 20px;
}
.service .point02 img {
}
.service li {
	font-size: 1.1em;
	font-weight: bold;
	text-align: center;
	list-style: none;
	margin-left: -40px;
}
.service h3 {
	text-align: center;
	font-size: 1.7em;
	margin-bottom: 0.5em;
	color: #fff;
}
.service01 h3 {
	color: #A673C4;
}
.service02 h3 {
	color: #F87E05;
}
.service03 h3 {
	color: #46A0E3;
}
.service04 h3 {
	color: #EC6E78;
}
.service05 h3 {
	color: #43B9EF;
}
.service-box2 {
	margin-top: -210px;
}
.service-box3 {
	margin-top: 25px;
}
.value-c {
	text-align: center;
	margin-top: 4em;
}
.value-c h2 {
	margin-bottom: 1.5em;
}
.value-c p {
	font-size: 1.5em;
  margin-top: 1.2em;
}
.solution-img {
	max-width: 1056px;
}
@media only screen and (max-width: 1200px) {
.service-box2 {
  margin-top: -130px;
}
	.service-box3 {
  margin-top: -70px;
}
	}
	@media only screen and (max-width: 990px) {
		    .service-box2 {
        margin-top: -100px;
    }
		.service-box3 {
        margin-top: -130px;
    }
		.service h3 {
		font-size: 1.6em;
}
}
@media only screen and (max-width: 768px) {
	.service0,.service01,.service02,
.service03,.service04,.service05 {
	width: 100%;
}
	.service img {
	margin-left: auto;
	margin-right: auto;
		width: 100%;
		margin-top: 0px;
}
	.service-box2 {
	margin-top: 0px;
}
.service-box3 {
	margin-top: 0px;
}
	.service h3 {
  margin-top: 1.5em;
		font-size: 1.5em;
}
	.service h2 {
    font-size: 1.3em;
}
	.service h3 {
        font-size: 1em;
    }
	.service .point01, .service .point03 {
    width: 45%;
    padding: 1em;
    font-size: 1em;
    padding-top: 1.3em;
    padding-bottom: 1.3em;
    line-height: 1.5em;
}
	.service .point02 img {
    width: 60%;
    height: 60%;
    margin-top: 15px;
}
	.service {
  margin-top: 3em;
  padding-top: 3em;
  padding-bottom: 1em;
}
	.service .pt-img {
  margin-top: 2.5em;
  margin-bottom: 3em;
}
	.service .flex {
  margin-top: 2em;
  margin-bottom: 3em;
}
}

/*CRMインフラ*/
.crm-infrastructure {
	background-color: #F7E9FF;
	padding-bottom: 2em;
}
.crm-infrastructure .title-s1 {
	background-color: #A673C4;
	margin-top: 4em;
}
.title-s1 .container {
	padding-top: 5px;
  padding-bottom: 5px;
}
.crm-infrastructure img {
	
}
.s1_tx1,.s1_tx2 {
	font-weight: bold;
	margin-top: 15px;
}
.crm-infrastructure h2 {
	color: #A673C4;
	text-align: center;
}
.crm-infrastructure .read {
	text-align: center;
	line-height: 1.4em;
	margin-top: 1.5em;
}
.crm-infrastructure .read2 {
	margin-top: 2.5em;
  margin-bottom: 1em;
}
.crm-infrastructure h3 {
	font-size: 1.2em;
	text-align: center;
	margin-bottom: 0.8em;
}
.crm-infrastructure p {
	margin-top: 0.8em;
}
.crm-infrastructure .infra h3{
	background-color: #EDECDA;
	padding: 0.3em;
  margin-top: 0.8em;
  margin-bottom: 0.8em;
}
.crm-infrastructure .infra,
.crm-infrastructure .infra2 {
	width: 30%;
}
.infra img,.infra2 img {
	margin-left: auto;
	margin-right: auto;
	display: block;
}
.infra2 .nv-01 {
	font-size: 4em;
  color: #F5DDDD;
  font-weight: bold;
  margin-bottom: -10px;
  text-align: center;
}
.c-logo {
	margin-left: auto;
	margin-right: auto;
	display: block;
	max-width: 873px;
}
.kozuchi-img {
	text-align: center;
}
.kozuchi-img img {
	max-width: 968px;
}
@media only screen and (max-width: 995px) {
.infra img, .infra2 img {
    width: 70%;
    height: auto;
  }
}
@media only screen and (max-width: 768px) {
	.crm-infrastructure .infra,
.crm-infrastructure .infra2 {
	width: 100%;
	margin-bottom: 1.5em;
}
	.crm-infrastructure h3 {
  font-size: 1.1em;
	}
	.value-c img {
		width: 100%;
	}
	.value-c p {
    font-size: 1em;
    margin-top: 1.2em;
    text-align: left;
}
	.value-c {
  text-align: center;
  margin-top: 2em;
}
}

/*retention*/
.retention {
	background-color: #FFF5EB;
	padding-bottom: 2em;
}
.retention .title-s1 {
	background-color: #F87E05;
	margin-top: 4em;
}
.retention h2 {
	text-align: center;
	color: #F87E05;
}
.retention h3 {
	font-size: 1.2em;
}
.retention .read {
	text-align: center;
}
.retention .retent {
	width: 23%;
}
.retent {
	border: solid 1px #FFA64E;
}
.retent-box {
	text-align: center;
	background-color: #FFA64E;
	padding: 5px;
}
.retent ul {
	margin-top: 1em;
	padding-left: 10px;
  padding-right: 10px;
}
.retent li {
	list-style: none;
}
.retent2,.retent3 {
	width: 31%;
}
.retent2 img,.retent3 img {
	margin-left: auto;
	margin-right: auto;
	display: block;
}
.retent2 h3 {
	background-color: #EDECDA;
	padding: 0.5em;
	text-align: center;
}
.retent2 p {
	margin-top: 0.7em;
}
.retent3 h3 {
	background-color: #FFA64E;
	padding: 0.5em;
	text-align: center;
}
.retent3 p {
	margin-top: 0.7em;
}
@media only screen and (max-width: 995px) {
.retent2 img,.retent3 img {
	width: 70%;
	height: auto;
}
}
@media only screen and (max-width: 768px) {
	.retention .retent {
	width: 100%;
		margin-bottom: 1.5em;
}
	.retent2,.retent3 {
	width: 100%;
		margin-bottom: 1.5em;
}
	.retent2 img,.retent3 img {
	width: 65%;
  height: 65%;
}
	.case01 h2, .flow h2 {
    font-size: 1.2em;
    padding: 0.3em;
    margin-top: 3em;
    margin-bottom: 0em;
}
	.case01 h3 {
    font-size: 1.2em;
    margin-bottom: 1.5em;
}
	.case01 .nb02 {
    font-size: 3em;
}
	.case01 img {
		width: 100%;
	}
	.case01 h4 {
    font-size: 1.1em;
	}
	.flow img {
		width: 100%;
		margin-top: 30px;
	}
}

/*acquisition*/
.acquisition {
	background-color: #FFF0F2;
	padding-bottom: 2em;
	margin-top: 4em;
}
.acquisition h3 {
	text-align: center;
	font-size: 1.2em;
  padding: 0.3em;
  margin-top: 0.8em;
  margin-bottom: 0.8em;
}
.acquisition h2 {
	color: #EC6E78;
	text-align: center;
}
.acquisition .acquisit-02 {
	margin-top: 3em;
}
.acquisition .read {
	text-align: center;
}
.acquisition .title-s1 {
	background-color: #EC6E78;
}
.acquisition .c-img {
	text-align: center;
}
.acquisition .c-img img {
	max-width: 980px;
}
.acquis,.acquis2,.acquis3,.acquis4 {
	width: 31%;
}
.acquis img, .acquis4 img {
	margin-left: auto;
	margin-right: auto;
	display: block;
}
.acquis h3 {
	background-color: #FEC5CA;
}
.acquis2 h3 {
	background-color: #FEC5CA;
	 margin-bottom: 0em;
}
.acquis3 h3 {
	background-color: #FEC5CA;
	 margin-bottom: 0em;
}
.acquis4 .nv-01 {
	font-size: 5em;
  font-weight: bold;
  color: #EDECDA;
  margin-bottom: -80px;
  margin-top: -30px;
}
.acquis4 p {
	margin-top: 0.7em;
}
@media only screen and (max-width: 995px) {
.acquis img, .acquis4 img {
	width: 70%;
	height: auto;
}
}
@media only screen and (max-width: 768px) {
	.acquis,.acquis4 {
	width: 100%;
		margin-bottom: 1.5em;
}
	.acquisition h3 {
	font-size: 1.1em;
	}
	.acquis,.acquis2,.acquis3,.acquis4 {
	width: 100%;
}
}

/*merchandising*/
.merchandising {
	background-color: #DFF5FF;
	padding-bottom: 2em;
}
.merchandising .title-s1 {
	background-color: #43B9EF;
	margin-top: 4em;
}
.merchan h2 {
	text-align: center;
	margin-bottom: 1.5em;
}
.merchan .c-img {
	text-align: center;
}
.merchan .c-img img {
	max-width: 950px;
}
.merchan h3,.merchan h4 {
	text-align: center;
}
.merchan1, .merchan2 {
	width: 31%;
}
.merchan1 img, .merchan2 img {
	margin-left: auto;
	margin-right: auto;
	display: block;
}
.merchan .read {
	text-align: center;
}
.merchan .read2 {
	text-align: center;
	margin-bottom: 1em;
}
.merchan .cap {
	text-align: center;
}
.merchan_h3a {
	color: #3291D7;
	margin-top: 2.5em;
}
.merchan_h3b {
	color: #F87E05;
	margin-top: 1.5em;
}
.merchan1 h4 {
	background-color: #A9D9F0;
	font-size: 1.2em;
  padding: 0.3em;
  margin-top: 0.8em;
  font-weight: bold;
}
.merchan2 h4 {
	background-color: #FFA348;
	font-size: 1.2em;
  padding: 0.3em;
  margin-top: 0.8em;
  font-weight: bold;
}
@media only screen and (max-width: 768px) {
	.merchan1, .merchan2 {
	width: 100%;
}
}

/*human*/
.human {
	background-color: #E8F4FF;
	padding-bottom: 2em;
}
.human .title-s1 {
	background-color: #3291D7;
	margin-top: 4em;
}
.human h2 {
	text-align: center;
	color: #3291D7;
}
.human h3 {
	text-align: center;
}
.human .read {
	text-align: center;
}
.dtoc-img {
	text-align: center;
}
.dtoc img {
	max-width: 950px;
}
@media only screen and (max-width: 768px) {
}

/*Entry*/
.entry_title h2 {
	text-align: center;
	border-top: solid 3px #13399B;
  border-bottom: solid 3px #13399B;
  padding: 1em;
  margin-top: 2em;
  margin-bottom: 1em;
}
.entry_title h3 {
	text-align: center;
}

/*entry*/
.entry {
	padding-top: 40px;
	padding-bottom: 40px;
	background-color: #fff;
}
.entry .hbspt-form {
	max-width: 500px;
	margin-left: auto;
	margin-right: auto;
}
.privacy_policy {
    overflow: scroll;
    width: 80%;
    height: 250px;
    background-color: #ffffff;
    border-radius: 3px 3px 3px 3px;
    border: solid 1px #dddddd;
    margin-bottom: 20px;
    padding: 15px;
    margin-right: auto;
    margin-left: auto;
    margin-top: 20px;
}
.entry .hbspt-form .hs-input {
  background-color: #F2F1E9;
  border: solid 1px #ababab;
  border-radius: 5px;
  padding: 8px;
  margin-bottom: 20px;
}
.entry .hbspt-form .inputs-list {
	list-style: none;
	margin-left: 0px;
}
.entry .hs-field-desc {
	font-size: 1em;
}
.entry .hs-button {
	
}
.entry .hs-button {
	font-size: 21px;
	background-color: #3A871B;
	padding: 10px;
	border: solid 0px;
	border-radius: 6px;
	color: #fff;
	transition: background 0.5s;
	text-align: center;
	width: 400px;
	display: inline-block;
	margin-bottom: 40px;
}
.entry .hs-button {
	text-align: center;
	margin-top: 50px;
}
.entry .hs-button:hover {
	background-color: #195600;
	box-shadow: 0 0 10px 3px #fff;
	text-decoration: none;
}
.contact_lf .contact-cap {
	font-size: 86%;
	text-align: center;
}

/*プライバシーポリシー*/
.privacy_policy h2{
	font-size: 1.4em;
}
.privacy_policy h3{
	font-size: 1.3em;
}
.privacy_policy h4{
	font-size: 1.2em;
}
.privacy_policy p{
	font-size: 1em;
}
@media only screen and (max-width: 768px) {
.entry .hs-button,
	.cv_bt a {
		width: 100%;
	}
	.privacy_policy h2 {
	font-size: 1.2em;
}
.privacy_policy h3 {
	font-size: 1.1em;
}
.privacy_policy h4 {
	font-size: 1em;
}
.privacy_policy p {
	font-size: 0.9em;
}
	.entry_title h2 {
  padding: 1em;
  margin-top: 0em;
  margin-bottom: 1em;
}
}

/* 全画面を覆うローディング画面のスタイル */
#loading {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #8FB2E7;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* ロゴ画像のスタイル */
#loading img {
  width: 150px; /* ロゴのサイズは適宜調整してください */
}

/* メインコンテンツの初期状態 */
#content {
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* メインコンテンツの表示状態 */
#content.show {
  opacity: 1;
}